11.23作业

最新推荐文章于 2024-07-21 19:13:42 发布

ybb704630

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量22

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/ybb704630/article/details/134715858

版权

<!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: o;
        }
        .t{
            position: relative;
            width: 1670px;height: 40px;
            background-color: grey;
            margin: 0;padding: 0;
            margin:0 auto;
        }
        .tl{
            position: absolute;
           color: aliceblue; 
           width: auto;height: 40px;
           justify-content: center;
           margin: 0;padding: 0;
           line-height: 40px;
           font-size: medium;
           left: 10%;
        }
        .tr{
            position: absolute;
          width: auto;height: 40px; 
          line-height: 40px;
          color: aliceblue;
          right: 19%;
          font-size: medium;
        }
        .tc{
            position: absolute;
            right: 10%;
            width: auto;height: 40px;
        }
        .mc{
            position: relative;
            width: 1670px;height: 100px;
 
        }
        .ml{
            position: absolute;
            width: 100px;height: 100px;
            left: 10%;
        }
        .mcc{
            position: absolute;
            left: 20%;
            line-height: 100px;
            font-size: larger;
        }
        .mr{
            position: absolute;
            right: 19%;
            line-height: 100px;
            width: 100px;height: 70px;
            border-radius: 10%;
        }
        .bb{
            position: relative;
            position: relative;
            width: 1266px;height: 460px;
            justify-content: center;
            background-color: black;
            
        }
        .bl{
            position: absolute;
            width: 234px;height: 460px;
            float: left;
            display: flex;
            flex-direction: column;
            align-content: space-around;
            
        }
        .br{
            position: absolute;
            height: 460px;width: 992px;
            float: right;
            right: 0px;
            
        }
        .cvb{
            height: 46px;width: 234px;
            background-color: black;
            color: aliceblue;
            float: left;
        }
        
 
    </style>
</head>
<body>
    <div class="t">
        <div class="tl">小米商城|MIUI|IoT|云服务|天星数科|有品|小爱开放平台|企业团购|资质证照|协议规则|下载App|智能生活</div>
        <div class="tr">登录|注册|消息通知</div>
        <div class="tc"><img src="./wada.png"></div>
    </div>
    <div class="mc">
        <div class="ml"><img src="./xiaomi 12.png" alt=""></div>
        <div class="mcc">Xiaomi手机
            Redmi手机
            电视
            笔记本
            平板
            家电
            路由器
            服务中心
            社区</div>
            <div class="mr"><input type="search" value="小米" disabled></div>
            </div>
            <center><div class="bb">
                <div class="bl">
                    <div class="cvb">手机 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></div>
                    <div class="cvb">电视 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></div>
                    <div class="cvb">家电  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></div>
                    <div class="cvb">笔记本 平板  &nbsp;&nbsp;&nbsp;></div>
                    <div class="cvb">出行 穿戴  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></div>
                    <div class="cvb">耳机 音响  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></div>
                    <div class="cvb">健康 儿童  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></div>
                    <div class="cvb">生活  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></div>
                    <div class="cvb">智能 路由器  &nbsp;&nbsp;&nbsp;></div>
                    <div class="cvb">电脑 配件  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></div>
                </div>
                <div class="br"><img src="./bbbbbb.png" alt="" width="992px" height="460px"></div>
 
            </div></center>
 
    </div>
</body>
</html>