我的作业的代码

最新推荐文章于 2024-08-13 21:58:24 发布

2301_80612591

最新推荐文章于 2024-08-13 21:58:24 发布

阅读量27

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2301_80612591/article/details/134718398

版权

<!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;
    }
    .A{ 
        width: 1226px;
            height: 600px;
            background-color: rgb(238, 250, 215);
            overflow: hidden;
        }
        ul{
            list-style: none;
        }
        .B{
            width: 1226px;
            height: 40px;
            background-color: black;
            padding: 10px;
        }
        .B1{
            display: flex;
            width: 780px;
            height: 25px;
            background-color: blue;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            margin-bottom: 10px;
            color:white;
            padding-left: 1px;
            float: left;
        }
        .B1 a{
            font-size: 12px;
            padding: 3px;
        }
        .B2{
            position: relative;
            display: flex;
            width: 300px;
            height: 25px;
            background-color: blue;
            align-items: center;
            justify-content: left;
            margin-top: 10px;
            margin-bottom: 10px;
            color:white;
            padding-left: 1px;
            float: right;
        }
        .body{
            width: 1226px;
            height: 100px;
            background-color: white;
        }
        .C {
            width: 62px;
            height: 100px;
            background-color: green;
            float: left;
            display: flex;
        }
    .C2{
        width: 56px;
        height: 56px;
        padding-top: 20px;
    }
    .Cl{
        position: relative;
        display: flex;
        width: 1164px;
        height: 100px;
        background-color: blueviolet;
        float: right;
        align-items: center;
        justify-content: left;
    }
    .Cl  a{
        
        padding-left: 30px;
       
        
    }
    .input{
        position: absolute;
        left: 900px;
        top: 100px;
        width: 200px;
        height: 50px;
    }
    .D1{
        width: 234px;
        height: 460px;
        background-color:yellow ;
        float: left;
    }
    .D2{
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: center;
        
    }
    .D2 li{
        padding-top: 20px;
    }
    .D{
        position: relative;
        width: 1226px;
        height: 460px;
        background-color: brown;
        background-image: url(https://i1.mifile.cn/a4/xmad_15627255042708_pFaEU.jpg);
        background-size: cover;
    }
</style>
</head>
<body>
    <div class="A">
        <ul>
            <li class="B">
                <div class="B1">
                <a>小米官网</a>|
                <a>小米商城</a>|
                <a>小米澎湃OS</a>|
                <a>loT</a>|
                <a>云服务</a>|
                <a>天星数科</a>|
                <a>有品</a>|
                <a>小爱开放平台</a>|
                <a>资质证照</a>|
                <a>协议规则</a>|                                                                                                                                          
                <a>下载app</a>|
                <a> Select Location</a>
                </div>
                <div class="B2">
                <a>登录</a>|
                <a>注册</a>|
                <a>消息通知</a>
                </div>
                <div class="B3">
                <a>购物车（0）</a>
                </div>  
            </li>
            <li class="body">
                <div class="C">
                     <a ><img src="https://cdn.cnbj1.fds.api.mi-img.com/s02.mifile.cn/assets/static/image/logo-mi2.png" alt=""  class="C2"></a>
                </div>
                <div class="C1">
                    <a>Xiaomi手机</a>
                    <a>Redmi手机</a>
                    <a>电视</a>
                    <a>笔记本</a>
                    <a>平板</a>
                    <a>家电</a>
                    <a>路由器</a>
                    <a>服务中心</a>
                    <a>社区</a>
     
                </div>
                <div class="input">
                    <input type="text" placeholder="小米" width="200px" height=100"px">
                </div>
            </li>
            <li class="D">
                <div class="D1">
                    <ul class="D2">
                        <li>手机 ></li>
                        <li>电视 ></li>
                        <li>家电 ></li>
                        <li>笔记本 平板 ></li>
                        <li>出行 穿戴 ></li>
                        <li>耳机 音箱 ></li>
                        <li>健康 儿童 ></li>
                        <li>生活 箱包 ></li>
                        <li>智能 路由器 ></li>
                        <li>电源 配件 ></li>
                    </ul>
                </div>    
</body>
</html>