lian xi

最新推荐文章于 2024-08-23 11:10:08 发布
l1l2x1x2
最新推荐文章于 2024-08-23 11:10:08 发布
阅读量488
点赞数 10
文章标签： css css3 前端
本文链接：https://blog.csdn.net/l1l2x1x2/article/details/134717467
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none ;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .two{
            position: sticky;
            top: 0;
            background-color: black;
        }
        .three{
            margin: 0 auto;
            list-style: none;
            width: 1226px;
            padding-top: 14px;
            padding-bottom: 14px;
        }
        .a2{
            color: rgb(93, 88, 88);
        }
        .four{
            margin: 0 auto;
            width: 1226px;
            height: 100px;
            background-color: white;
        }
        .p{
            float: left;
            top: 25px;
            padding-top: 25px;
            padding-bottom: 25px;
            width: 50px;
            height: 50px;
        }
        .five{
            display: flex;
            width: 850px;
            height: 100px;
            float: left;
        }
        .five div{
            height: 100px;
            background-color: white;
        }
        .er{
            display: inline-block;
            list-style: none;
            text-decoration: none;
            color: black;
            font-size: medium;
            font-display: initial;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 40px;
        }
        .out{
            width: 190px;
            height: 100px;
        }
        .rop{
            float: left;
            width: 310px;
            height: 100px;
            background-color: white;
        }
        .rap{
            float: left;
            margin-left: 20px;
            margin-top: 25px;
            height: 50px;
            width: 240px;
        }
        .op{
            float: left;
            width: 50px;
            height: 50px;
            margin-top: 25px;
        }
        .six{
            margin: 0 auto;
            background-color: white;
            width: 1226px;
            height: 670px;
        }
        .senen{
            width: 1226px;
            height: 460px;
            background-image: url();
            background-repeat: repeat;
            background-size: contain;
        }
        .eight{
            float: left;
            width: 234px;
            height: 460px;
            background-color: grey;
        }
        .eight2{
            float: left;
            width: 992px;
            height: 460px;
            background-image: url(./1701331007982.jpg);
            background-repeat: no-repeat;
            background-size: contain;
        }
        .nine{
            padding-top: 20px;
            list-style: none;
        }
        .ten{
            width: 234px;
            height: 42px;
            background-color: grey;
        }
        .nine li{
            color: white;
            padding-top: 15px;
            padding-left: 40px;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">
            <div class="three">
                <a href="" class="a1">|</a>
                <a href="#" class="a2">小米官网</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">小米商城</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">小米澎湃</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">云服务</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">天星数科</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">有品</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">小爱开发</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">资质证照</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">协议规则</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">下载</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">Select Location</a>
                <a href="#" class="a1">|</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" class="a1">|</a>
                <a href="#" class="a2">登录</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">注册</a>
                <a href="" class="a1">|</a>
                <a href="#" class="a2">消息通知</a>
            </div>
        </div>
        <div class="four">
            <img src="./1701331790215(1).jpg" class="p">
            <ul class="five">
                <div class="out">
                     <li class="er">&nbsp;</li>
                </div>
                <div><li class="er">Xiaomi手机</li></div>
                <div><li class="er">Redmi手机</li></div>
                <div><li class="er">电视</li></div>
                <div><li class="er">笔记本</li></div>
                <div><li class="er">平板</li></div>
                <div><li class="er">家电</li></div>
                <div><li class="er">路由器</li></div>
                <div><li class="er">服务中心</li></div>
                <div><li class="er">社区</li></div>
            </ul>
            <div class="rop">
                <input type="search" class="rap" placeholder="空气净化器">
                <img src="./1701334230045.jpg" class="op">
            </div>
        </div>
        <div>
            <div class="six">
                <div class="senen">
                    <div class="eight">
                        <ul class="nine">
                            <div class="ten"><li>手机</li></div>
                            <div class="ten"><li>电视</li></div>
                            <div class="ten"><li>家电</li></div>
                            <div class="ten"><li>笔记本&nbsp;平板</li></div>
                            <div class="ten"><li>出行&nbsp;穿戴</li></div>
                            <div class="ten"><li>耳机&nbsp;音箱</li></div>
                            <div class="ten"><li>健康&nbsp;儿童</li></div>
                            <div class="ten"><li>生活&nbsp;箱包</li></div>
                            <div class="ten"><li>智能&nbsp;路由器</li></div>
                            <div class="ten"><li>电源&nbsp;配件</li></div>
                        </ul>
                    </div>
                    <div class="eight2"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>