11.30 作业

最新推荐文章于 2024-09-26 17:57:52 发布
大梦南柯
最新推荐文章于 2024-09-26 17:57:52 发布
阅读量327
点赞数 7
文章标签： css 前端 css3
本文链接：https://blog.csdn.net/2301_80791521/article/details/134716374
版权
<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .banner{
            display: flex;
            width: 1860px;
            height: 753px;
            background-color: white;
        }
        .daohang{
            display: flex;
            flex-direction: row;
            width: 1860px;
            height: 40px;
            background-color: rgb(39, 38, 38) ;
            align-items: center;
            justify-content: space-around;
            flex-shrink: 0;

        }
        .daohang1{
            display: flex;
            width: 530px;
            height: 40px;
            background-color: rgb(39, 38, 38);
            justify-content: flex-end;
            flex-shrink: 0;
            
        }
        .s2{
            display: flex;
            align-items: center;
        }
        .s1{
            position: relative;
            display: flex;
            order: -2;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            font-size: 50%;
            flex-shrink: 0;
        }
        li{
            list-style: none;
            flex-direction: row;
            flex-shrink: 0;
        }
        .zj{
            display: flex;
            position: relative;
            position: absolute;
            top: 40px;
            width: 1860px;
            height: 260px;
            background-color: white;
            flex-wrap: wrap
            
        }
        .logo{
            width: 60px;
            height: 60px;
            position: absolute;
            top: 100px;
            left: 219px;
        }
        .left{
            position: absolute;
            top: 260px;
            left: 219px;
            width: 234px;
            height: 453px;
            padding: 20px,0,0,0;
            background-color: white;
        }
        .right{
            position:absolute;
            top: 260px;
            right: 0;
            width: 1409px;
            height: 453px;
            background-color: white;
        }       
        .image{
            height: 453px;
            width: 1409px;
        } 
        .ml li{
            display: block;
            width: 234px;
            height: 45.3px;
        }
        
    </style>
</head>
<body>
    <div class="banner">
        <div class="daohang">
            <div class="daohang1">
                <ul class="s2">
                    <li style="color: white;">登入&nbsp;</li>
                    <li style="color: white;">注册&nbsp;</li>
                    <li style="color: white;">消息通知&nbsp;</li>
                    <li style="color: white;">购物车&nbsp;</li>
                </ul>
            </div>
            <ul class="s1">
                <li style="color: white;">小米官网&nbsp;</li>
                <li style="color: white;">小米商城&nbsp;</li>
                <li style="color: white;">小米澎湃OS&nbsp;</li>
                <li style="color: white;">loT&nbsp;</li>
                <li style="color: white;">云服务&nbsp;</li>
                <li style="color: white;">天星数科&nbsp;</li>
                <li style="color: white;">有品&nbsp;</li>
                <li style="color: white;">小爱开放平台&nbsp;</li>
                <li style="color: white;">资质证照&nbsp;</li>
                <li style="color: white;">协议规则&nbsp;</li>
                <li style="color: white;">下载app&nbsp;</li>
                <li style="color: white;">Select Location&nbsp;</li>

            </ul>
            <div class="zj">
                <img src="../imags/logo.png" alt="" class="logo">
                <ul class="zj1">
                    <!-- <li>xiaomi手机</li>
                    <li>redmi手机</li>
                    <li>电视</li>
                    <li>笔记本</li>
                    <li>平板</li>
                    <li>家电</li>
                    <li>路由器</li>
                    <li>服务中心</li>
                    <li>社区</li> -->
                </ul>
                <div class="left">
                    <ul class="ml">
                        <li>手机</li>
                        <li>电视</li>
                        <li>家电</li>
                        <li>笔记本&nbsp;平板</li>
                        <li>出行&nbsp;穿戴</li>
                        <li>耳机&nbsp;音箱</li>
                        <li>健康&nbsp;儿童</li>
                        <li>生活&nbsp;箱包</li>
                        <li>智能&nbsp;路由器</li>
                        <li>电源&nbsp;配件</li>
                    </ul>
                </div>
                <div class="right"><img src="../imags/预约.jpg" alt="" class="image"></div>
            </div>
        </div>
    </div>
</body>
</html>