2023 11.23作业

原创已于 2023-12-12 15:19:26 修改 · 170 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#css #css3 #前端
于 2023-11-30 17:53:38 首次发布
该篇文章描述了小米商城网站的HTML结构和CSS样式，包括头部导航、搜索框、商品分类和底部导航，展示了商城的主要功能和布局设计。
<!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{
            width: 1226px;
            height: 600px;
            background-color: antiquewhite;
            overflow: hidden;
        }
        ul{
            list-style: none;
        }
        .head{
            width: 1226px;
            height: 40px;
            background-color: black;
            padding: 10px;
          
        }
        .head1{
            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;
            
            
        }
        .head1 a{
            font-size: 12px;
            padding: 3px;
 
        }
        .head2{
            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;
            
            
        }
        .head2 a{
            font-size: 12px;
            padding: 3px;
        }
        .head3{
            position: absolute;
            width: 80px;
            height: 20px;
            background-color: red;
            left: 1146px;
            top: 24px;
            
        }
        .head3 a{
            color: white;
            font-size: 12px;
        }
        .body{
            width: 1226px;
            height: 100px;
            background-color: white;
        }
        .logo {
            width: 62px;
            height: 100px;
            background-color: green;
            float: left;
            display: flex;
 
            
            
            
        }
    .pc{
        width: 56px;
        height: 56px;
        padding-top: 20px;
    }
    .logol{
        position: relative;
        display: flex;
        width: 1164px;
        height: 100px;
        background-color: blueviolet;
        float: right;
        align-items: center;
        justify-content: left;
        
 
        
        
        
    }
    .logol  a{
        
        padding-left: 30px;
       
        
    }
    .input{
        position: absolute;
        left: 900px;
        top: 100px;
        width: 200px;
        height: 50px;
    }
    .book1{
        width: 234px;
        height: 460px;
        background-color:yellow ;
        float: left;
    }
    .book3{
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: center;
        
    }
    .book3 li{
        padding-top: 20px;
    }
    .foot{
        position: relative;
        width: 1226px;
        height: 460px;
        background-color: brown;
        background-image: url(../图库/小米watch3.webp);
        background-size: cover;
    }
    .left{
        position: absolute;
        width: 41px;
        height: 69px;
        left: 234px;
        top: 200px;
        background-color:blanchedalmond;
    }
    .right{
        position: absolute;
        width: 41px;
        height: 69px;
        left: 1185px;
        top: 200px;
        background-color:blanchedalmond;
    }
    </style>
</head>
<body>
    <div class="banner">
    <ul>
        <li class="head">
            <div class="head1">
            <a>小米商城</a>|
            <a>MIUI</a>|
            <a>loT</a>|
            <a>云服务</a>|
            <a>天星数科</a>|
            <a>有品</a>|
            <a>小爱开放平台</a>|
            <a>企业团购</a>|
            <a>资质证照</a>|
            <a>协议规则</a>|
            <a>下载app</a>|
            <a>智能生活</a>
            </div>
            <div class="head2">
            <a>登录</a>|
            <a>注册</a>|
            <a>消息通知</a>
            </div>
            <div class="head3">
            <a>购物车（0）</a>
            </div>  
        </li>
        <li class="body">
            <div class="logo">
                 <a ><img src="../图库/logo-mi2.png" alt=""  class="pc"></a>
            </div>
            <div class="logol">
                <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="foot">
            <div class="book1">
                <ul class="book3">
                    <li>手机 ></li>
                    <li>电视 ></li>
                    <li>家电 ></li>
                    <li>笔记本 平板 ></li>
                    <li>出行 穿戴 ></li>
                    <li>耳机 音箱 ></li>
                    <li>健康 儿童 ></li>
                    <li>生活 箱包 ></li>
                    <li>智能 路由器 ></li>
                    <li>电源 配件 ></li>
                    
 
                </ul>
            </div>    
            
            
            <!-- <div class="book2"> 
 
            </div>-->
            <div class="left">
                <img src="../图库/left.png" alt="">
            </div>
            <div class="right">
                <img src="../图库/right.png" alt="">
            </div>
        </li>
    </ul>
    </div>    
</body>
</html>