主要代码

<!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;
        }

        a {
            display: inline-block;
            text-decoration: none;
            width: 90px;
            height: 50px;
            text-align: center;
            line-height: 90px;
            color: black;
        }

        b {
            display: inline-block;
            text-decoration: none;
            width: 234px;
            height: 42px;
            text-align: center;
            line-height: 50px;
            color: white;
        }

        .header {
            display: flex;
            width: 1226px;
            height: 100px;
        }

        .headerleft {
            width: 236px;
            height: 50px;
        }

        .headerright {
            display: flex;
            width: 996px;
            height: 50px;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            background-color: white;
        }

        .goods {
            display: flex;
            width: 1226px;
            height: 460px;
        }

        .goodsleft {
            width: 230px;
            height: 460px;
            background-color: grey;
        }

        li {
            width: 1200px;
            height: 460px;
            list-style: none;
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66eff8e22a48ded4854017b25cbf631.jpeg?thumb=1&w=1839&h=690&f=webp&q=90);
            background-size: cover;
        }

        .right ul {
            display: flex;
            width: 990px;
            height: 460px;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="headerleft">
    <img src="../代码/微信图片_20230710184448.png" width="70px" height="60px">
        </div>
        <div class="headeright">
       

            <header>
                <right>
                    <a href="#">Xiaomi手机</a>
                    <a href="#">Redmi手机</a>
                    <a href="#">电视</a>
                    <a href="#">笔记本</a>
                    <a href="#">平板</a>
                    <a href="#">家电</a>
                    <a href="#">路由器</a>
                    <a href="#">服务中心</a>
                    <a href="#">社区</a>
                    <a><input type="text" name="" id="" placeholder="显示器"></a> 
                </right>
            </header>
        </div>
    </div>
    <div class="goods">
        <div class="goodsleft">
            <b href="#">手机</b></br>
            <b href="#">电视</b></br>
            <b href="#">家电</b></br>
            <b href="#">笔记本 平板</b></br>
            <b href="#">出行 穿戴</b></br>
            <b href="#">耳机 音箱</b></br>
            <b href="#">健康 儿童</b></br>
            <b href="#">生活箱包</b></br>
            <b href="#">智能 路由器</b></br>
            <b href="#">电源 配件</b></br>
        </div>
        <div class="right">
            <ul>
                <li>
                    <a href="#">

                    </a>
                </li>

            </ul>
        </div>
    </div>

</body>

</html>

效果图

小米商城实验-HTML_html