11.28作业

最新推荐文章于 2024-10-13 19:30:05 发布
w20040802
最新推荐文章于 2024-10-13 19:30:05 发布
阅读量373
点赞数 9
文章标签： css css3 html
本文链接：https://blog.csdn.net/w20040802/article/details/134701054
版权
<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .xo{
            background-color: rgb(53, 49, 49);
        }
        .oo{
            text-align: center;
            width: 1224px;
            height: 40px;
        }
        a{
            font-size: small;
            color:white;
            text-decoration: none;
        }
        li{
            list-style: none;
            display: inline-block;
            width: 60px;
            height: 40px;
        }
        .d1{
            width: 78px;

        }
        .cx{
            width: 82px;
        }
        .fo{
            background-color: aqua;
            
        }
        .op{
            display: inline-block;
        }
        .box{
           
            text-align: left;
        }
        .box{
            float: left;
        }        
        .fang2{
            position: relative;
            height: 100px;
            background-color: pink;
        }
        .img{
            position: absolute;
            width: 56px;
            height: 56px;
            top:10px;
            left: 20px;
        }
        .nwo{
            display: inline-block;
            position: absolute;
            top: 10px;
            right: 300px;
        }
        .w3{
            background-color: rgb(110, 96, 96);
        }
        .en{
            width: 234px;
            height: 460px;
            text-align: center;
        }
       .q{
         display: inline-block;
         width: 200px;
         background-color: bisque;
    
        }
        .q1{
        position: relative;
        }
        .q2{
        position: absolute;
        bottom: 20px;
        right: 10px;
        } 
        .q3{
            position: absolute;
            left: 0;
            bottom: 45%;
        }
        .q4{
            position: absolute;
            right: 0;
            bottom: 45%;
        }
    </style>
</head>
<body>
    <div class="xo">
        <div class="box">
            <ul class="oo">
                <li><a href="#">小米官网</a></li>
                <li><a href="#">小米商店</a></li>
                <li><a href="#">小米澎湃</a></li>
                <li><a href="#">loT</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">天星数科</a></li>
                <li><a href="#">有品</a></li>
                <li class="d1"><a href="#">小爱开发平台</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li><a href="#">下载app</a></li>
                <li class="cx"><a href="#" >location</a></li>
            </ul>
        </div >  
        <div class="bo">
            <ul >
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
                <li><a href="#">购物车</a></li>
         </div> 
       
    </div>
    <div class="fang2">
        <div class="img">
            <img src="../新建文件夹/图片1.png" >
        </div>
        <div class="nwo">
            <ul class="oo2">
                <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="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">服务中心</a></li>
                <li><a href="#">社区</a></li>
                <li> <input type="text" class="dw"></li>

            </ul>
          
           

        </div>
    </div>
    <div class="lsat">
        <div class="en">
            <ul class="w3">
                <li style="display: block;">手机</li>
                <li style="display: block;">电视</li>
                <li style="display: block;">家电</li>
                <li style="display: block;">笔记本 平板</li>
                <li style="display: block;">出行穿戴</li>
                <li style="display: block;">耳机 音响</li>
                <li style="display: block;">健康 儿童</li>
                <li style="display: block;">生活 箱包</li>
                <li style="display: block;">智能 路由器</li>
                <li style="display: block;">电源 配件</li>
            </ul>
        </div>
        <div class="q">
            <div class="q1">
                <img src="../新建文件夹/图片2.png">
            </div >
            <div class="q2">
                <img src="../新建文件夹/图片3.png">

            </div>
            <div class="q3">
                <img src="../新建文件夹/图片4.png">
            </div>
            <div class="q4">
                <img src="../新建文件夹/图片5.png">
            </div>
        </div>


    </div>
</body>
</html>