云计算笔记和作业

神游四方

已于 2023-11-30 18:34:33 修改

阅读量426

点赞数 10

文章标签： css javascript

于 2023-11-29 23:51:11 首次发布

本文链接：https://blog.csdn.net/shenyousifang/article/details/134701861

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1500px;
            height: 460px;
            background-color: beige;
            background-image: url(../图片/微信图片_20231126160033.webp);
        }
        .search{
            width: 200px;
            height: 33px;
            padding-top: 5px;
        }
        .top{
            width: 1500px;
            height: 60px;      
            background-color: wheat;
            display: flex;
            justify-content: center;

         }
         .top1{
            padding-right: 40px;
         }
        .top2{
            list-style: none;
            display: flex;
            justify-content: left;
        
        }
        .top2 li{
            width: 90px;
            height: 25px;
            background-color: bisque;
            padding-top: 20px;
            padding-right: 15px;
        }
        .top3{
            width: 250px;
            height: 400px;
            background-color:whitesmoke;
            justify-content: left;
            padding-right: 40px;
        }
        .top3 li{
            width:250px;
            height: 40px;
            
        }
        .bottom{
            width: 1400px;
            height: 460px;
            background-color: wheat;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <div class="top1">
                <img src="../图片/favicon.ico">
            </div>
            <div>
            <ul class="top2">
                <li>Xiaomi手机</li><li>Redmi手机</li><li>电视</li><li>笔记本</li><li>平板</li><li>家电</li><li>路由器</li><li>服务中心</li><li>社区</li>
            </ul >
            </div>
            <div class="search">
                <input type="text" class="search" id="search" placeholder="搜索">
            </div>
        </div>
        <div class="left">
            <ul class="top3">
                <li>手机</li> <li>电视</li> <li>家电</li> <li>笔记本 平板</li> <li>出行 穿戴</li> <li>耳机 音箱</li> <li>健康 儿童</li> <li>生活 箱包</li> <li>智能 路由器</li> <li>电源 配件</li>
            </ul>
        </div>
    </div>
</body>
</html>

结果：