技术教程 编程教程 小米商城主页展示HTML+CSS 正文

小米商城主页展示HTML+CSS

2023-06-13,,

大佬们呀，花了好几天的时间总算是看着页面展示可以了，求赐教！

小米商城主页，对大佬来说肯定简单爆了，我抄写了好久呀，总是有一点点的小问题，还搞不明白

主要是一个静态的小米商城页面，HTML前端代码不复杂，一堆的div和ul、li就没问题了，主要是css代码搞不懂导致显示不正常

话不多说，直接上代码：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>小米商城首页</title>

        <link rel="icon" href="img/favicon.ico">

        <link rel="stylesheet" href="./css/topBar.css">

        <link rel="stylesheet" href="./css/head.css">

        <link rel="stylesheet" href="./css/body.css">

        <link rel="stylesheet" href="./css/foot.css">

    </head>

    <body>

        <!-- 顶部导航栏 -->

        <div class="topBar">

            <div class="container1">

                <div class="topBar-nav">

                    <a href="#">MIUI</a>

                    <span class="sep">|</span>

                    <a href="#">loT</a>

                    <span class="sep">|</span>

                    <a href="#">云服务</a>

                    <span class="sep">|</span>

                    <a href="#">金融</a>

                    <span class="sep">|</span>

                    <a href="#">有品</a>

                    <span class="sep">|</span>

                    <a href="#">小爱开放平台</a>

                    <span class="sep">|</span>

                    <a href="#">政企服务</a>

                    <span class="sep">|</span>

                    <a href="#">下载app</a>

                    <span class="sep">|</span>

                    <a href="#">select Region</a>

                    <span class="sep">|</span>

                </div>

                <div class="topBar-cart">

                    <a href="#" target="_self">

                        <img src="img/cart.png" alt="购物车" id="t-cart">购物车

                    </a>

                </div>

                <div class="user-info">

                    <a href="#">登录</a>

                    <span class="sep">|</span>

                    <a href="#">注册</a>

                    <span class="sep">|</span>

                    <a href="#">消息通知</a>

                    <span class="sep">|</span>

                </div>

            </div>

        </div>

        <!-- 头部logo导航 和商品搜索部分 -->

        <div class="header">

            <div class="container2">

                <!-- logo的盒子 -->

                <div class="logo">

                    <img src="img/logo.png" alt="LOGO">

                </div>

                <!-- 下面是导航的盒子 -->

                <div class="nav">

                    <div class="sub-nav">

                        <a href="#">小米手机&nbsp</a>

                        <a href="#">红米手机&nbsp</a>

                        <a href="#">电视&nbsp</a>

                        <a href="#">笔记本&nbsp</a>

                        <a href="#">空调&nbsp</a>

                        <a href="#">新品&nbsp</a>

                        <a href="#">路由器&nbsp</a>

                        <a href="#">智能硬件&nbsp</a>

                        <a href="#">服务&nbsp</a>

                        <a href="#">社区&nbsp</a>

                    </div>

                </div>

                <div class="search">

                    <input type="text" name="goods" value="请输入商品名:&nbsp&nbsp" id="s1">

                    <input type="submit" name="submit" value="搜索" id="s2">

                </div>

            </div>

        </div>

        <!-- 内容主题部分 -->

        <div class="content">

            <!-- 内容选择样表 -->

            <div class="content-list">

                <div class="sub-content">

                    <ul>

                        <li>手机电话卡&nbsp&nbsp&nbsp></li><br>

                        <li>电视&nbsp&nbsp&nbsp盒子&nbsp&nbsp&nbsp></li><br>

                        <li>笔记本平板&nbsp&nbsp&nbsp></li><br>

                        <li>家电插线板&nbsp&nbsp&nbsp></li><br>

                        <li>出行&nbsp&nbsp&nbsp穿戴&nbsp&nbsp&nbsp></li><br>

                        <li>智能路由器&nbsp&nbsp&nbsp></li><br>

                        <li>电源&nbsp&nbsp&nbsp配件  &nbsp&nbsp&nbsp></li><br>

                        <li>健康&nbsp&nbsp&nbsp儿童  &nbsp&nbsp&nbsp></li><br>

                        <li>耳机&nbsp&nbsp&nbsp箱包  &nbsp&nbsp&nbsp></li><br>

                    </ul>

                </div>

            </div>

            <!-- 轮播图 -->

            <div class="viewpager">

                <a href="#">

                    <img src="img/lunbo.jpg" alt="轮播图" width="992px" height="460px">

                </a>

            </div>

        </div>

        <div class="shop">

            <!-- 选购引导 -->

            <div class="channel">

                <ul>

                    <li><a href="#">选购手机</a></li>

                    <li><a href="#">企业团购</a></li>

                    <li><a href="#">F码通道</a></li>

                    <li><a href="#">米粉卡</a></li>

                    <li><a href="#">以旧换新</a></li>

                    <li><a href="#">话费充值</a></li>

                </ul>

            </div>

            <div class="advertise">

                <ul>

                    <li>

                        <a href="#">

                            <img src="img/ad1.jpg" alt="广告1" width="316px" height="170px">

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="img/ad2.jpg" alt="广告1" width="316px" height="170px">

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="img/ad3.jpg" alt="广告1" width="316px" height="170px">

                        </a>

                    </li>

                </ul>

            </div>

        </div>

        <!-- 内容主体 闪购部分 -->

        <div class="tag">

            <div class="letter">小米闪购</div>

            <div class="form">查看更多</div>

        </div>

        <div class="limit-shop">

            <div class="shangou">

            </div>

            <div class="shangpin">

                <ul>

                    <li>

                        <a href="#">

                            <img src="img/ad4.png" alt="广告" width="233px" height="388px">

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="img/ad5.png" alt="广告" width="233px" height="388px">

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="img/ad6.png" alt="广告" width="233px" height="388px">

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="img/ad7.png" alt="广告" width="233px" height="388px">

                        </a>

                    </li>

                </ul>

            </div>

        </div>

        <!-- 页末 售后部分 -->

        <div class="foot">

            <div class="f-cont">

                <div class="f1">

                    <ul>

                        <li><div class="f11"><a href="#">预约维修服务</a></div></li>

                        <li><div class="f11"><a href="#">7天无理由退换货</a></div></li>

                        <li><div class="f11"><a href="#">15天免费换货</a></div></li>

                        <li><div class="f11"><a href="#">满150元包邮</a></div></li>

                        <li><div class="f12"><a href="#">520家售后网点</a></div></li>

                    </ul>

                </div>

                <div class="f2">

                    <div class="f21">

                        <div class="f22">帮助中心</div>

                        <ul>

                            <li><a href="#">账户管理</a></li>

                            <li><a href="#">购物指南</a></li>

                            <li><a href="#">订单操作</a></li>

                        </ul>

                    </div>

                    <div class="f21">

                        <div class="f22">服务支持</div>

                        <ul>

                            <li><a href="#">售后政策</a></li>

                            <li><a href="#">自助服务</a></li>

                            <li><a href="#">相关下载</a></li>

                        </ul>

                    </div>

                    <div class="f21">

                        <div class="f22">线下门店</div>

                        <ul>

                            <li><a href="#">小米之家</a></li>

                            <li><a href="#">服务网点</a></li>

                            <li><a href="#">授权体验店</a></li>

                        </ul>

                    </div>

                    <div class="f21">

                        <div class="f22">关于小米</div>

                        <ul>

                            <li><a href="#">了解小米</a></li>

                            <li><a href="#">加入小米</a></li>

                            <li><a href="#">投资者关系</a></li>

                        </ul>

                    </div>

                    <div class="f21">

                        <div class="f22">关注我们</div>

                        <ul>

                            <li><a href="#">新浪微博</a></li>

                            <li><a href="#">官方微信</a></li>

                            <li><a href="#">联系我们</a></li>

                        </ul>

                    </div>

                    <div class="f21">

                        <div class="f22">特色服务</div>

                        <ul>

                            <li><a href="#">F码通道</a></li>

                            <li><a href="#">礼物码</a></li>

                            <li><a href="#">防伪查询</a></li>

                        </ul>

                    </div>

                    <div class="f21" id="f21">

                        <span class="spf21">400-100-5678</span><br>周一至周日8:00-18:00

                        <div class="f212"><a href="#">联系客服</a></div>

                    </div>

                </div>

            </div>

            <div class="f3">

                探索黑科技，小米为发烧而生

            </div>

        </div>

    </body>

</html>

HTML

CSS代码主要有四个部分，分别是topBar、head、body、foot，用来编辑页面的样式，代码如下：

/* 清除默认样式 */

* {

    padding: 0;

    margin: 0;

}

ul {

    list-style: none;

}

/* 顶部广告栏 */

.sep {

    width: 3.22px;

    font: 16px/40px "Microsoft YaHei";

    color:#424242;

    margin: auto 6px;

}

/* 导航栏 */

.topBar {

    height: 40px;

    background-color: #333;

}

.container1 {

    width: 1226px;

    height: 40px;

    margin: 0 auto;

}

.topBar-nav {

    width: 750px;

    height: 40px;

    float: left;

    text-align: center;

}

.topBar-nav a {

    font-size: 14px;

    font-weight: bolder;

    color: #b0b0b0;

    text-decoration: none;

}

.topBar-nav a:hover {

    color: #fff;

}

.topBar-cart {

    width: 120px;

    height: 40px;

    background-color: gray;

    float: right;

    text-align: center;

}

.topBar-cart a {

    font-size: 14px;

    font-weight: border;

    color: #b0b0b0;

    text-decoration: none;

    margin: 5px auto;

}

.topBar-cart a:hover {

    color: #fff;

}

.topBar-cart #t-cart{

    width: 22px;

    height: 22px;

    position: relative;

    top: 8px;

}

.user-info{

    width: 200px;

    height: 40px;

    float: right;

    margin-right: 15px;

}

.user-info a {

    font-size: 14px;

    font-weight: border;

    color: #b0b0b0;

    text-decoration: none;

}

.user-info a:hover {

    color: #fff;

}

topBar

.head {

    width: 100%;

    height: 110px;

}

.container2 {

    width: 1226px;

    height: 110px;

    margin: 0 auto;

}

.header .container2 .logo {

    margin-top: 24px;

    margin-right: 24px;

    width: 55px;

    height: 55px;

    float: left;

}

.header .container2 .logo img {

    display: block;

    width: 100%;

    height: 100%;

}

.nav {

    width: 820px;

    height: 110px;

    float: left;

}

.nav .sub-nav {

    width: 580px;

    height: 30px;

    margin: 40px auto 40px;

}

.nav .sub-nav a {

    font-size: 17px;

    font-weight: border;

    color: black;

    text-decoration: none;

    text-align: center;

}

.nav .sub-nav a:hover {

    color: #ff6700;

}

.search {

    margin-top: 25px;

    width: 300px;

    height: 50px;

    float: right;

}

.search #s1 {

    width: 240px;

    height: 50px;

    text-align: right;

    font-weight: border;

}

.search #s2 {

    width: 50px;

    height: 50px;

}

head

.content {

    width: 1226px;

    height: 460px;

    margin: 0 auto 20px;

}

.content-list {

    float: left;

    width: 234px;

    height: 460px;

    background-color: #355;

}

.content-list .sub-content {

    width: 200px;

    height: 380px;

    margin: 50px auto;

    color: white;

}

.viewpager {

    float: left;

    width: 992px;

    height: 460px;

}

.shop {

    width: 1226px;

    height: 170px;

    margin: 0 auto 30px;

}

.channel {

    width: 225px;

    height: 170px;

    float: left;

}

.channel ul li {

    background-color: #5f5750;

    width: 75px;

    height: 85px;

    font: 12px/85px "Microsoft YaHei";

    text-align: center;

    float: left;

}

.channel ul li a {

    display: block;

    width: 75px;

    height: 85px;

    color: whitesmoke;

}

.channel ul li a:hover {

    display: block;

    width: 75px;

    height: 85px;

    color: white;

}

.shop .advertise {

    float: left;

    width: 992px;

    height: 170px;

}

.shop .advertise ul li {

    width: 316px;

    height: 170px;

    float: right;

    margin-left: 14px;

}

.tag {

    width: 1226px;

    height: 40px;

    margin: 0 auto;

}

.tag .letter {

    width: 90px;

    height: 25px;

    float: left;

    font-size: 15px;

    margin-top: 15px;

}

.tag .form {

    width: 70px;

    height: 25px;

    float: right;

    font-size: 15px;

    margin-top: 15px;

}

.limit-shop {

    width: 1226px;

    height: 340px;

    margin: 0 auto;

}

.limit-shop .shangou {

    width: 234px;

    height: 388px;

    float: left;

    background-image: url(../img/bd.png);

    background-size: 234px 388px;

}

.limit-shop .shangpin {

    width: 992px;

    height: 340px;

    float: left;

}

.limit-shop .shangpin ul li {

    width: 233px;

    height: 340px;

    float: right;

    margin-left: 15px;

}

body

.foot {

    margin-top: 20px;

}

.foot .f-cont {

    padding: 60px;

}

.foot a {

    text-decoration: none;

}

.foot .f1 {

    height: 50px;

    border-bottom: 1px solid #dddddd;

    margin: 0 auto;

}

.foot .f1 .f11 {

    width: 245.2px;

    height: 25px;

    border-right: 1px solid #dddddd;

}

.foot .f1 .f12 {

    width: 245.2px;

    height: 25px;

}

.foot ul li {

    width: 243.5px;

    float: left;

    text-align: center;

}

.foot ul li a {

    font: 16px/25px "Microsoft YaHei";

    color: black;

}

.foot ul li a:hover {

    color: #FF6700;

}

.foot .f2 {

    height: 112px;

    padding: 40px 0;

}

.foot .f2 .f21 {

    width: 160px;

    height: 112px;

    float: left;

}

.foot .f2 .f22 {

    width: 150px;

    height: 17px;

    text-align: right;

    margin-bottom: 20px;

}

.f21 ul li a {

    color: #666666;

}

#f21 {

    width: 250px;

    height: 112px;

    margin-left: 20px;

    border-left: 1px solid #dddddd;

    text-align: center;

}

.spf21 {

    color: #ff6700;

    font-size: 20px;

}

.f212 {

    width: 120px;

    height: 30px;

    border: 1px solid #ff6700;

    margin: 20px 70px;

}

.f212 a {

    display: block;

    width: 120px;

    height: 30px;

    font: 12px/30px "Microsoft YaHei";

    color: #ff6700;

}

.f212 a:hover {

    display: block;

    width: 120px;

    height: 30px;

    font: 16px/30px "Microsoft YaHei";

    color: #fff;

    background-color: #ff6700;

}

.f3 {

    height: 73px;

    color: #bebebe;

    text-align: center;

    background-color: #fafafa;

    font: 20px/73px "Microsoft YaHei";

}

foot

图片什么的就别在意了，就是网图，王者联盟的英雄人物图片，重要的是框架结构和样式结构

图片一换，这不就是个正经网站首页了吗，哈哈

运行效果如下图：

完毕。

小米商城主页展示HTML+CSS的相关教程结束。

《小米商城主页展示HTML+CSS.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!