web4前端

最新推荐文章于 2024-07-30 23:06:43 发布

盐焗星球

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量378

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/liuxini2251/article/details/134701524

版权

<!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;
    }
    .box {
        width: 1226px;
        height: 460px;
        display: flex;
        flex-direction: column;
    }
    .top {
        width: 1226px;
        height: 100px;
        background-color: white;
        display: flex;
        justify-content: space-between;
    }
    .sup-left {
        width: 30%;
        margin: auto;
    }
    .sup-center {
        width: 25%;
        margin: auto;
    }
    .sup-right {
        width: 45%;
        margin: auto;
    }
    .search-input {
        width: 100%;
        padding: 10px;
        border-radius: 4px;
        font-size: 16px;
        background: none;
        float: right;
    }
    .bottom {
        width: 1226px;
        height: 360px;
        background-color: gray;
        display: flex;
    }
    .left {
            width: 20%;
            padding-left: 20px;
    }
    .right {
            width: 80%;
        }
    .sub-left {
        height: 10%;
        box-sizing:border-box;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <div class="sup-left">
                <img src="../tu/xiaomi.png" alt="" style="max-width:100%;max-height: 100%;">
            </div>
            <div class="sup-center">Xiaomi手机</div>
            <div class="sup-center">Redmi手机</div>
            <div class="sup-center">电视</div>
            <div class="sup-center">笔记本</div>
            <div class="sup-center">平板</div>
            <div class="sup-center">家电</div>
            <div class="sup-center">路由器</div>
            <div class="sup-center">服务中心</div>
            <div class="sup-center">社区</div>
            <div class="sup-right">
                <div class="search-input">
                    <input type="text" class="search-input" id="search-input"></div>
            </div>
        </div>
        <div class="bottom">
          <div class="left">
            <div class="sub-left">手机&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;></div>
            <div class="sub-left">电视&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;></div>
            <div class="sub-left">家电&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;></div>
            <div class="sub-left">笔记本 平板&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;></div>
            <div class="sub-left">出行 穿戴&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;></div>
            <div class="sub-left">耳机 音响&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;></div>
            <div class="sub-left">健康 儿童&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;></div>
            <div class="sub-left">生活 箱包&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;></div>
            <div class="sub-left">智能 路由器&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;></div>
            <div class="sub-left">电源 配件&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;></div>
          </div>
          <div class="right">
            <img src="../tu/shouji.jpg" alt="" style="width:100%;height: auto;">
          </div>
        </div>
      </div>
</body>
</html>