HTML静态网页成品作业(HTML CSS)—— 小米商城首页网页(1个页面)

🎉不定期分享源码，关注不丢失哦

文章目录

• 一、作品介绍
• 二、作品演示
• 三、代码目录
• 四、网站代码
• • HTML部分代码
• 五、源码获取

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有1个页面。

二、作品演示

三、代码目录

四、网站代码

HTML部分代码

<div class="nav">
        <div class="navCenter">
            <ul>
                <li><a href="#">小米官网</a><span>|</span></li>
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">IoT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星数科</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li><a href="#">下载app</a><span>|</span></li>
                <li><a href="#">Select Region</a></li>
            </ul>
            <div class="login">
                <ul>
                    <li><a href="#">登录<span>|</span></a></li>
                    <li><a href="#">注册</a><span>|</span></li>
                    <li><a href="#">消息通知</a></li>
                </ul>
                <div class="shoppingCart">
                    购物车( 0 )
                </div>
            </div>
        </div>
    </div>
</header>
<div class="logoNav">
    <div class="logo"><img src="images/logo.png" width="52"></div>
    <ul>
        <li><a href="#">Xiaomi手机</a></li>
        <li><a href="#">Redmi手机</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">笔记本</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">家电</a></li>
        <li><a href="#">路由器</a></li>
        <li><a href="#">服务中心</a></li>
        <li><a href="#">社区</a></li>
    </ul>
    <div class="search">
        <input type="search">
        <input type="submit" value="搜索">
    </div>
</div>
<div class="banner">
    <ul class="bannerPic">
        <li><img src="images/banner1.jpeg" alt=""></li>
    </ul>
    <div class="menu">
        <ul>
        <li><a href="#">手机</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">家电</a></li>
        <li><a href="#">电脑&nbsp;&nbsp;排版</a></li>
        <li><a href="#">出行&nbsp;&nbsp;穿戴</a></li>
        <li><a href="#">耳机&nbsp;&nbsp;音箱</a></li>
        <li><a href="#">健康&nbsp;&nbsp;儿童</a></li>
        <li><a href="#">生活&nbsp;&nbsp;箱包</a></li>
        <li><a href="#">智能&nbsp;&nbsp;路由器</a></li>
        <li><a href="#">电源&nbsp;&nbsp;配件</a></li>
        </ul>
    </div>
</div>
<div class="suggest">
    <ul class="app">
        <li><img src="./images/1.png" alt="" width="24"><div>保障服务</div></li>
        <li><img src="./images/2.png" alt="" width="24"><div>企业团购</div></li>
        <li><img src="./images/3.png" alt="" width="24"><div>F码通道</div></li>
        <li><img src="./images/4.png" alt="" width="24"><div>米粉卡</div></li>
        <li><img src="./images/5.png" alt="" width="24"><div>以旧换新</div></li>
        <li><img src="./images/6.png" alt="" width="24"><div>话费充值</div></li>
    </ul>
    <ul class="suggestImg">
        <li><img src="images/b1.jpg" alt=""></li>
        <li><img src="images/b2.jpg" alt=""></li>
        <li><img src="images/b3.jpg" alt=""></li>
    </ul>
</div>

五、源码获取

🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.想要获取本文源码，点击前往吧