Python笔记day50（前端|CSS）|opacity属性、transition属性、静态商城页面

最新推荐文章于 2025-05-09 15:49:51 发布

拼搏的小白

最新推荐文章于 2025-05-09 15:49:51 发布

阅读量878

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 Python 文章标签： opacity属性 transition属性静态商城页面

本文链接：https://blog.csdn.net/qq_34755081/article/details/82427038

本文回顾了Python学习的内容，重点介绍了CSS中的opacity属性和transition属性，详细阐述了transition属性的四个组成部分，并给出了一个使用纯HTML和CSS构建的静态商城页面的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，内容回顾

    1. 伪类和伪元素
        1. 伪类
            1. :link
            2. :visited
            3. :hover (重要)
            4. :active
            5. :focus(input标签获取光标焦点)
        2. 伪元素
            1. :first-letter
            2. :before(重要 在内部前面添加)
            3. :after(重要 在内部后面添加)

    2. CSS属性
        1. 字体
            1. font-family
            2. font-size
            3. font-weight
        2. 文本属性
            1. text-align 对齐(重要)
            2. text-decoration 装饰 (去除a标签的下划线(text-decoration: none))
            3. text-indent 首行缩进

        3. 背景属性
            1. background-color  背景颜色
            2. background-image  背景图片(九宫格涮葫芦娃)  url() no-repeat 50% 50%

        4. color
            1. red (直接写名字)
            2. #FF0000
            3. rgb(255, 0, 0)  --> rgba(255,0,0,0.5)

        5. 边框属性 border
            1. border-width (边框宽度)
            2. border-style (边框样式)
            3. border-color (边框颜色)

            简写:
                border: 1px solid red;

        6. CSS盒子模型

            1. content (内容)
            2. padding (内填充) 调整内容和边框之间距离时使用这个属性
            3. border  (边框)
            4. margin  (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)

            注意: 要习惯看浏览器console窗口那个盒子模型

        7. display (标签的展现形式)
            1. inline
            2. block   菜单里面的a标签可以设置成block
            3. inline-block
            4. none  (不让标签显示,不占位)

        8. float(浮动)
            1. 多用于实现布局效果
                1. 顶部的导航条
                2. 页面左右分栏 (博客页面:左边20%,右边80%)
            2. float
                1. 任何标签都可以浮动,浮动之后都会变成块级 a标签float之后就可以设置高和宽
            3. float取值:
                1. left
                2. right
                3. none
        9. clear 清除浮动--> 清除浮动的副作用(内容飞出,父标签撑不起来)
            1. 结合伪元素来实现
                .clearfix:after {
                    content: "",
                    display: "block",
                    clear: both;
                }

            2. clear取值:
                1. left
                2. right
                3. both
        10. overflow
            1. 标签的内容放不下(溢出)

            2. 取值:
                1. hidden  --> 隐藏
                2. scroll  --> 出现滚动条
                3. auto
                4. scroll-x
                5. scroll-y

            例子:
                圆形头像的例子
                    1. overflow: hidden
                    2. border-radius: 50%  (圆角)
        11. 定位 position
            1. static(默认)

            2. relative(相对定位 --> 相当于原来的位置)

            3. absolute(绝对定位 -->相当对于定位过的前辈标签)

            4. fixed (固定 --> 返回顶部按钮示例)


            补充:
                脱离文档流的3种方式
                    float
                    absolute
                    fixed

        12. opacity (不透明度)
            1. 取值0~1
            2. 和rgba()的区别:
                1. opacity改变元素\子元素的透明度效果
                2. rgba()只改变背景颜色的透明度效果

        13. z-index
            1. 数值越大,越靠近你
            2. 只能作用于定位过的元素

            3. 自定义的模态框示例

2，opacity

 opacity (不透明度)
            1. 取值0~1
            2. 和rgba()的区别:
                1. opacity改变元素\子元素的透明度效果
                2. rgba()只改变背景颜色的透明度效果

opacity: value|inherit;

值	描述
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit	应该从父元素继承 opacity 属性的值。

3，transition

定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

4，纯html+CSS静态商场页面

这里写图片描述

shop.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mi.com</title>
    <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/mi.css">
</head>

<body>
    <!-- 顶部导航栏 start -->
    <div class="nav">
        <div class="container">
            <ul class="nav-left">
                <li>
                    <a href="">玉米商城</a>
                </li>
                <li>
                    <a href="">链接A</a>
                </li>
                <li>
                    <a href="">链接B</a>
                </li>
                <li>
                    <a href="">链接C</a>
                </li>
                <li>
                    <a href="">链接D</a>
                </li>
            </ul>
            <ul class="nav-right fr">
                <li>
                    <a href="">登录</a>
                </li>
                <li>
                    <a href="">注册</a>
                </li>
                <li>
                    <a href="">消息</a>
                </li>
                <li>
                    <a href="">购物车</a>
                </li>
            </ul>
        </div>

    </div>
    <!-- 顶部导航栏 end -->

    <!-- 首屏 开始 -->
    <div class="main">
        <!-- 目录导航 开始 -->
        <div class="main-header">
            <div class="logo fl">
                <img src="./img/logo.png" alt="">
                <img src="./img/logo_r.png" alt="">
            </div>
            <ul class="top-menu fl">
                <li>
                    <a href="">玉米手机</a>
                </li>
                <li>
                    <a href="">苞米</a>
                </li>
                <li>
                    <a href="">电视</a>
                </li>
                <li>
                    <a href="">爆米花</a>
                </li>
                <li>
                    <a href="">路由器</a>
                </li>
                <li>
                    <a href=