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

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

主要是一个静态的小米商城页面，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

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

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

运行效果如下图：

完毕。