CSS基础学习案例

最新推荐文章于 2024-05-07 22:37:05 发布

小凡在努力

最新推荐文章于 2024-05-07 22:37:05 发布

阅读量1.4k

点赞数 1

文章标签： css 学习前端 html

本文链接：https://blog.csdn.net/weixin_52031422/article/details/125661086

版权

CSS–小米商城案例

1.内容回顾

HTML标签

固定格式，记住标签长什么样子，例如：
h/ div/ span/ a/ img/ ul/ li/ table/ input/ form

CSS样式

引用CSS：标签，头部，文件

.xx{ 类
    .... !important
}
<div class='xx xx'></div>

CSS样式

高度/宽度/块级or行内or块级行内/浮动/字体/文字/内边距/外边距

浮动<div style="clear: both"></div>   

关于边距
	-body自带边距 margin：0;
	- 区域居中 margin：0 auto;

页面布局

根据你看到的页面把他们划分成很多小区域，再去填充样式

2.案例顶部菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .container{
            width: 980px;
            margin: 0 auto;
        }

        .header{
                color: #b0b0b0;
                background: #333;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            margin-right: 5px;
            font-size: 12px;

            text-decoration: none;
        }
        .header a:hover{
            color:white;
        }
        .header .menu{
            float: left;
        }
        .header .account{
            float: right;
        }

    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com/shop">小米商城</a>
                <a href="https://home.miui.com/">MIUI</a>
                <a href="https://iot.mi.com/">LOT</a>
            </div>

            <div class="account">
                <a>登录</a>
                <a>注册</a>
                <a>消息通知</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
</body>
</html>

3.二级菜单

3.1 划分区域

在这里插入图片描述

3.2搭建骨架

三个区域logo,sub-menu，sub-search

<div class="sub-header">
        <div class="container">
            <div class="logo"></div>
            
            <div class="sub-menu"></div>

			<div class="sub-search"></div>
        
    		 <div style="clear: both"></div>
        </div>
	</div>
</div>

总和：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .container{
            width: 980px;
            margin: 0 auto;
        }

        .sub-header{
            height: 100px;
        }
        .sub-header .container .logo{
            float: left;
            width: 243px;
            height: 100px;
        }
        .sub-header .container .logo a{
            display: inline-block;
            margin-top: 22px;
        }
        .sub-header .sub-menu a{
            display: inline-block;
            line-height: 100px;
            padding: 0 10px;
            color: #333;
            font-size: 16px;

            text-decoration: none;
        }
        .sub-header .sub-menu a:hover{
            color: #ff6700;
        }
    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="logo">
                <a href="https://www.mi.com/">
                    <img src="logo-mi2.png" alt="" style="width: 56px; height: 56px"/>
                </a>
            </div>
            <div class="sub-menu">
                <a href="https://www.mi.com/shop">Xiaoi手机</a>
                <a href="https://www.mi.com/shop">Redmi红米</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
            </div>
            <div class="sub-search"></div>
            <div style="clear: both"></div>
        </div>
    </div>
</body>
</html>

4.整合顶部菜单 + 二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .container{
            width: 980px;
            margin: 0 auto;
        }

        .header{
                color: #b0b0b0;
                background: #333;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            margin-right: 5px;
            font-size: 12px;

            text-decoration: none;
        }
        .header a:hover{
            color:white;
        }
        .header .menu{
            float: left;
        }
        .header .account{
            float: right;
        }

        .sub-header{
            height: 100px;
        }
        .sub-header .container .logo{
            float: left;
            width: 243px;
            height: 100px;
        }
        .sub-header .container .logo a{
            display: inline-block;
            margin-top: 22px;
        }
        .sub-header .sub-menu a{
            display: inline-block;
            line-height: 100px;
            padding: 0 10px;
            color: #333;
            font-size: 16px;

            text-decoration: none;
        }
        .sub-header .sub-menu a:hover{
            color: #ff6700;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com/shop">小米商城</a>
                <a href="https://home.miui.com/">MIUI</a>
                <a href="https://iot.mi.com/">LOT</a>
            </div>

            <div class="account">
                <a>登录</a>
                <a>注册</a>
                <a>消息通知</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div class="sub-header">
        <div class="container">
            <div class="logo">
                <a href="https://www.mi.com/">
                    <img src="logo-mi2.png" alt="" style="width: 56px; height: 56px"/>
                </a>
            </div>
            <div class="sub-menu">
                <a href="https://www.mi.com/shop">Xiaoi手机</a>
                <a href="https://www.mi.com/shop">Redmi红米</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
            </div>
            <div class="sub-search"></div>
            <div style="clear: both"></div>
        </div>
    </div>
</body>
</html>

小结

a标签是行内标签，行内标签的高度，内外边距，默认无效
垂直方向居中
- 文本 + line-height
- 图片 + 边距
a标签默认有下划线，去除 + text-decoretion : none

鼠标放上后该变标签样式

.c1:hover{
    color: xxx
}
a:hover{
    colol:xx
    xxx:xxx
}

5. 推荐菜单

5.1整合案例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小凡的小米商城案例</title>
    <style>
        body{
            margin: 0;
        }
        img{
            height: 100%;
            width: 100%;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .left{
            float: left;
        }

        .header{
                color: #b0b0b0;
                background: #333;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            margin-right: 5px;
            font-size: 12px;

            text-decoration: none;
        }
        .header a:hover{
            color:white;
        }
        .header .menu{
            float: left;
        }
        .header .account{
            float: right;
        }
        .header .account a{
            text-decoration: none;
        }
        .sub-header{
            height: 100px;
        }
        .sub-header .container .logo{
            float: left;
            width: 243px;
            height: 100px;
        }
        .sub-header .container .logo a{
            display: inline-block;
            margin-top: 22px;
        }
        .sub-header .sub-menu a{
            display: inline-block;
            line-height: 100px;
            padding: 0 10px;
            color: #333;
            font-size: 16px;

            text-decoration: none;
        }
        .sub-header .sub-menu a:hover{
            color: #ff6700;
        }

        .news .channle{
             width: 228px;
             height: 164px;
             padding: 3px;
             background-color: #5f5750;
        }

        .product{
            width: 1224px;
            height:460px;

            margin-bottom: 15px;
        }

        .news .item-list{
            width: 316px;
            height: 170px;
            margin-left: 14px;
        }

        .channle-list{
            width: 76px;
            height: 82px;
            float: left;
        }

         .channle-list img{
             height: 24px;
             width: 24px;
             margin: 0 auto 4px;
             display: block;
         }
          .channle-list a{
              text-align: center;
              font-size: 12px;
              padding-top: 18px;
              display: block;
              color: white;
              opacity: .7;
              text-decoration: none;
          }
          .channle-list a:hover{
              opacity: 1;
          }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com/shop">小米商城</a>
                <a href="https://home.miui.com/">MIUI</a>
                <a href="https://iot.mi.com/">LOT</a>
            </div>

            <div class="account">
                <a href="https://account.xiaomi.com/fe/service/login/password?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252Fshop%252526sign%25253DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Fshop%26sign%3DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%2C%2C&_sign=yBTYxCh0uB6YSglhQfg4uoP%2BRz4%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">登录</a>
                <a href="https://cn.account.xiaomi.com/fe/service/register?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252Fshop%252526sign%25253DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Fshop%26sign%3DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%2C%2C&_sign=yBTYxCh0uB6YSglhQfg4uoP%2BRz4%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN&_uRegion=CN">注册</a>
                <a>消息通知</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div class="sub-header">
        <div class="container">
            <div class="logo">
                <a href="https://www.mi.com/">
                    <img src="logo-mi2.png" alt="" style="width: 56px; height: 56px"/>
                </a>
            </div>
            <div class="sub-menu">
                <a href="https://www.mi.com/shop">Xiaoi手机</a>
                <a href="https://www.mi.com/shop">Redmi红米</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
            </div>
            <div class="sub-search"></div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div class="news">
        <div class="container">
        <div class="product">
            <a href="https://www.mi.com/">
                <img src="tp1.jpg" alt="">
            </a>
        </div>
        <div class="channle left">
            <div class="channle-list">
                <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                    <img src="l1.png" alt=""/>
                    <span >保障服务</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://qiye.mi.com/">
                    <img src="l2.png" alt=""/>
                    <span >企业团购</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://www.mi.com/shop/order/fcode">
                    <img src="l3.png" alt=""/>
                    <span >F码通道</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://10046.mi.com/">
                    <img src="l4.png" alt=""/>
                    <span >米粉卡</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://www.mi.com/a/h/16769.html">
                    <img src="l5.png" alt=""/>
                    <span >以旧换新</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://account.xiaomi.com/fe/service/login/password?sid=recharge&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Frecharge.10046.mi.com%25252Fsts%25253Fsign%25253DbC%2525252Bk1yrraTJbriZ0UbiV7hfzHz4%2525253D%252526followup%25253Dhttp%2525253A%2525252F%2525252Frecharge.10046.mi.com%2525252F%2526sid%253Drecharge&callback=http%3A%2F%2Frecharge.10046.mi.com%2Fsts%3Fsign%3DbC%252Bk1yrraTJbriZ0UbiV7hfzHz4%253D%26followup%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252F&_sign=3pa5Zba%2FIHtDJzbFwCNYwaYP0sU%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">
                    <img src="l6.png" alt=""/>
                    <span >话费充值</span>
                </a>
            </div>
        </div>
        <div class="item-list left">
            <a href="https://www.mi.com/redminote11t-pro">
                <img src="tp2.jpg" alt="">
            </a>
        </div>
        <div class="item-list left">
            <a href="https://www.mi.com/redminote11t-pro">
                <img src="tp3.jpg" alt="">
            </a>
        </div>
        <div class="item-list left">
            <a href="https://www.mi.com/redminote11t-pro">
                <img src="tp4.jpg" alt="">
            </a>
        </div>
        <div style="clear: both"></div>
        </div>
    </div>
</body>
</html>

5.2 小结

设置透明度opacity,其值由0-1，值越大越接近本色
在这里插入图片描述

6.CSS进阶知识点

6.1 hover（伪类）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: #ff6700;
            font-size: 20px;
        }
        .c1:hover{
            color: aquamarine;
            font-size: 50px;
        }
        .c2{
            height: 300px;
            width: 500px;
            border: 1px solid indianred;
        }
        .c2:hover{
            border: 5px solid greenyellow;
        }

        .download{
            display: none;
        }

        .app:hover .download{
            display: block;
        }
    </style>
</head>
<body>
<div class="c1">湖南</div>
<div class="c2">长沙</div>

<div class="app">
    <div>下载APP</div>
    <div class="download">
        <img src="df.png" />
    </div>
</div>
</body>
</html>

6.2 after（伪类）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after{
            content: "真可爱";
            font-size: 20px;
            color: #ff6700;
        }
    </style>
</head>
<body>
<div class="c1">大凡</div>
<div class="c1">小灿</div>
</body>
</html>

作用：去除文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix{
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
            border: 2px solid greenyellow;
        }
    </style>
</head>
<body>
<div class="clearfix">
    <div class="item">xxx</div>
    <div class="item">xxx</div>
    <div class="item">xxx</div>
    <div class="item">xxx</div>
</div>
</body>
</html>

6.3 position

fixed
relative
absolute

1. fixed

作用：固定在窗口的某个位置（绝对值）

案例：返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小凡的小米商城案例</title>
    <style>
        body {
            margin: 0;
        }

        img {
            height: 100%;
            width: 100%;
        }

        .back {
            position: fixed;
            width: 60px;
            height: 60px;
            border: 2px solid burlywood;

            right: 20px;
            bottom: 100px;
        }
    </style>
</head>
<body>

<div style="background-color: aquamarine ;width: 3000px;height: 3000px"></div>
<div class="back">
    backtop
</div>
</body>
</html>

案例：dilog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dilog{
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;

            left: 0;
            right: 0;
            margin: 0 auto;

            top: 200px;
        }
        .mask{
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.7;
        }
    </style>
</head>
<body>
<div style="height: 1000px; background-color: #ff6700"></div>

<div class="mask"></div>

<div class="dilog"></div>
</body>
</html>

2.relative和absolute

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 300px;
            width: 500px;
            border: 2px solid red;
            margin: 100px;

            position: relative;
        }

        .c1 .c2{
            height: 59px;
            width: 59px;
            background-color: aquamarine;

            position: absolute;
            right: 30px;
            bottom: 30px;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
</body>
</html>

整合案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小凡的小米商城案例</title>
    <style>
        body{
            margin: 0;
        }
        img{
            height: 100%;
            width: 100%;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .left{
            float: left;
        }

        .header{
                color: #b0b0b0;
                background: #333;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            margin-right: 5px;
            font-size: 12px;

            text-decoration: none;
        }
        .header a:hover{
            color:white;
        }
        .header .menu{
            float: left;
        }
        .header .account{
            float: right;
        }
        .header .account a{
            text-decoration: none;
        }

        .app{
            position: relative;
        }
        .download{
            position: absolute;
            display: none;
        }
        .app:hover .download{
            display: block;
        }
        .sub-header{
            height: 100px;
        }
        .sub-header .container .logo{
            float: left;
            width: 243px;
            height: 100px;
        }
        .sub-header .container .logo a{
            display: inline-block;
            margin-top: 22px;
        }
        .sub-header .sub-menu a{
            display: inline-block;
            line-height: 100px;
            padding: 0 10px;
            color: #333;
            font-size: 16px;

            text-decoration: none;
        }
        .sub-header .sub-menu a:hover{
            color: #ff6700;
        }

        .news .channle{
             width: 228px;
             height: 164px;
             padding: 3px;
             background-color: #5f5750;
        }

        .product{
            width: 1224px;
            height:460px;

            margin-bottom: 15px;
        }

        .news .item-list{
            width: 316px;
            height: 170px;
            margin-left: 14px;
        }

        .channle-list{
            width: 76px;
            height: 82px;
            float: left;
        }

         .channle-list img{
             height: 24px;
             width: 24px;
             margin: 0 auto 4px;
             display: block;
         }
          .channle-list a{
              text-align: center;
              font-size: 12px;
              padding-top: 18px;
              display: block;
              color: white;
              opacity: .7;
              text-decoration: none;
          }
          .channle-list a:hover{
              opacity: 1;
          }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com/shop">小米商城</a>
                <a href="https://home.miui.com/">MIUI</a>
                <a href="https://iot.mi.com/">LOT</a>
                <a href="https://iot.mi.com/" class="app">下载APP
                    <img src="download.png" alt="" class="download"/>
                </a>
            </div>

            <div class="account">
                <a href="https://account.xiaomi.com/fe/service/login/password?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252Fshop%252526sign%25253DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Fshop%26sign%3DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%2C%2C&_sign=yBTYxCh0uB6YSglhQfg4uoP%2BRz4%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">登录</a>
                <a href="https://cn.account.xiaomi.com/fe/service/register?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252Fshop%252526sign%25253DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Fshop%26sign%3DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%2C%2C&_sign=yBTYxCh0uB6YSglhQfg4uoP%2BRz4%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN&_uRegion=CN">注册</a>
                <a>消息通知</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div class="sub-header">
        <div class="container">
            <div class="logo">
                <a href="https://www.mi.com/">
                    <img src="logo-mi2.png" alt="" style="width: 56px; height: 56px"/>
                </a>
            </div>
            <div class="sub-menu">
                <a href="https://www.mi.com/shop">Xiaoi手机</a>
                <a href="https://www.mi.com/shop">Redmi红米</a>
                <a href="https://www.mi.com/shop">电视</a>
                <a href="https://www.mi.com/shop">笔记本</a>
                <a href="https://www.mi.com/shop">平板</a>
                <a href="https://www.mi.com/shop">家电</a>
            </div>
            <div class="sub-search"></div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div class="news">
        <div class="container">
        <div class="product">
            <a href="https://www.mi.com/">
                <img src="tp1.jpg" alt="">
            </a>
        </div>
        <div class="channle left">
            <div class="channle-list">
                <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                    <img src="l1.png" alt=""/>
                    <span >保障服务</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://qiye.mi.com/">
                    <img src="l2.png" alt=""/>
                    <span >企业团购</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://www.mi.com/shop/order/fcode">
                    <img src="l3.png" alt=""/>
                    <span >F码通道</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://10046.mi.com/">
                    <img src="l4.png" alt=""/>
                    <span >米粉卡</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://www.mi.com/a/h/16769.html">
                    <img src="l5.png" alt=""/>
                    <span >以旧换新</span>
                </a>
            </div>
            <div class="channle-list">
                <a href="https://account.xiaomi.com/fe/service/login/password?sid=recharge&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Frecharge.10046.mi.com%25252Fsts%25253Fsign%25253DbC%2525252Bk1yrraTJbriZ0UbiV7hfzHz4%2525253D%252526followup%25253Dhttp%2525253A%2525252F%2525252Frecharge.10046.mi.com%2525252F%2526sid%253Drecharge&callback=http%3A%2F%2Frecharge.10046.mi.com%2Fsts%3Fsign%3DbC%252Bk1yrraTJbriZ0UbiV7hfzHz4%253D%26followup%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252F&_sign=3pa5Zba%2FIHtDJzbFwCNYwaYP0sU%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">
                    <img src="l6.png" alt=""/>
                    <span >话费充值</span>
                </a>
            </div>
        </div>
        <div class="item-list left">
            <a href="https://www.mi.com/redminote11t-pro">
                <img src="tp2.jpg" alt="">
            </a>
        </div>
        <div class="item-list left">
            <a href="https://www.mi.com/redminote11t-pro">
                <img src="tp3.jpg" alt="">
            </a>
        </div>
        <div class="item-list left">
            <a href="https://www.mi.com/redminote11t-pro">
                <img src="tp4.jpg" alt="">
            </a>
        </div>
        <div style="clear: both"></div>
        </div>
    </div>
</body>
</html>
llowup%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252F&_sign=3pa5Zba%2FIHtDJzbFwCNYwaYP0sU%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">
                    <img src="l6.png" alt=""/>
                    <span >话费充值</span>
                </a>
            </div>
        </div>
        <div class="item-list left">
            <a href="https://www.mi.com/redminote11t-pro">
                <img src="tp2.jpg" alt="">
            </a>
        </div>
        <div class="item-list left">
            <a href="https://www.mi.com/redminote11t-pro">
                <img src="tp3.jpg" alt="">
            </a>
        </div>
        <div class="item-list left">
            <a href="https://www.mi.com/redminote11t-pro">
                <img src="tp4.jpg" alt="">
            </a>
        </div>
        <div style="clear: both"></div>
        </div>
    </div>
</body>
</html>

小凡在努力

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习案例

HTML标签CSS样式引用CSS：标签，头部，文件CSS样式页面布局三个区域logo,sub-menu，sub-search4.整合顶部菜单 + 二级菜单小结a标签是行内标签，行内标签的高度，内外边距，默认无效垂直方向居中a标签默认有下划线，去除 + 鼠标放上后该变标签样式5. 推荐菜单5.1整合案例如下5.2 小结设置透明度,其值由0-1，值越大越接近本色6.2 after（伪类）作用：去除文档流6.3...
复制链接

扫一扫