品优购案例练习大家好，我是糖糖～最近一直在深耕前端基础实战，从简单的静态页面到带交互的小项目，一步步解锁 HTML/CS

大家好，我是糖糖～💖 最近一直在深耕前端基础实战，从简单的静态页面到带交互的小项目，一步步解锁 HTML/CSS 核心技能。这次想和大家分享的是「品优购」电商页面的制作全过程，这个项目是我前端学习旅程中很重要的一个实战环节，也是对 HTML 布局、CSS 样式、响应式适配等知识点的一次集中复盘。

1.品优购项目搭建

1.1创建文件夹

创建根目录下的shopping(项目文件夹)，在文件夹里分别创建以下文件夹：css（样式文件夹）、images(样式类图片文件夹)、upload(产品类图片文件夹)、js（脚本文件夹）【fonts（字体类文件夹）用字体图标时，后面再引入】

1.2创建所需文件

1.用VSCode打开项目文件夹，创建index.html(首页文件)、base.css（CSS初始化样式文件）、common.css（CSS公共样式文件）

2.填写base.css文件

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0; 
    outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    zoom: 1
}

3.在index.html文件输入！+Tab键生成模板，可将默认网站语言改为中文，如下图所示。将base.css引用到index.html，并输入内容检验是否引用成功

若浏览器显示内容如下图所示，则表示引入成功

4.有些样式与结构在很多页面都会出现，比如页面头部和底部，大多数页面都有，此时，可以把这些公共部分单独作为一个模块，就是common.css公共样式，引入该样式文件，如图所示

3.网站favicon图标

3.1制作favicon图标

1.把品优购图标切成png图片
2.把png图片转换为ico图标，这需要借助于第三方转换网站，例如：比特虫：www.bitbug.net/

3.2favicon图标放在网站根目录下

3.3引入favicon图标

引用代码由下面蓝色背景图截取代码插入如下

引入成功，效果图如下

4.网站TDK三大标签SEO优化

4.1title网站标题

title具有不可代替性，是我们内页的第一个只要标签，是搜索引擎了解网页的入口和网页主题归属的最佳判断点。
建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）

4.2description网站说明

简要说明我们网站主要做什么的。description作为网站的总体业务和主题概括，多采用“我们是...”、“我们提供...”、“...网站作为...”、“电话：010”之类的语句。

4.3keywords关键字

keyword是页面关键字，是搜索引擎的关注点之一。
keyword最好限制为6~8个关键字，关键字之间用英文逗号隔开，采用关键字1,关键字2的形式。

5.品优购首页制作

5.1快捷导航shortcut制作

结构代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购-综合网购首页-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 网站说明 -->
     <meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通电、电脑、家居百货、服装设计、
     母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！">
     <!-- 关键字 -->
      <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,数码相机,家电,服装,
      母婴,图书,食品">
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 引入初始化样式文件 -->
     <link rel="stylesheet" href="css/base.css">
     <!-- 引入我们的样式文件 -->
      <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <!-- 快捷导航模块 -->
     <section class="shortcut">
        <div class="w">
            <div class="fl"><ul>
                <li>品优购欢迎您! &nbsp;</li>
                <li>
                    <a href="#">请登录</a>&nbsp;
                    <a href="#" class="style_red">免费注册</a>

                </li>

            </ul></div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                    
                </ul>
            </div>
        </div>
     </section>
</body>
</html>

样式代码common.css

/* 声明字体 这里一定要注意路径的变化 */
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?tomleg');
    src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?tomleg') format('truetype'),
        url('../fonts/icomoon.woff?tomleg') format('woff'),
        url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


/* 版心 */
.w{
    width: 1200px;
    margin: 0 auto;
}

.fl{
    float: left;
}
.fr{
    float: right;
}
.style_red{
    color: #c81623;
}
/* 快捷导航模块 */
shortcut{
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}
.shortcut ul li{
    float: left;
}
/* 选择所有偶数的小li标签 */
.shortcut .fr ul li:nth-child(even){
width: 1px;
height: 12px;
background-color: #666;
margin: 6px 15px 0;
/* 解决小竖线粗细不一样 */
transform:scale(1.01);
}

.arrow-icon::after{
content:'\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

效果图

遇到的困难及注意事项：
1.可以用小li做竖线，竖线粗细不一则添加transform:scale(1.01);
2.使用字体图标记得改路径

5.2 header头部模块搭建

5.2.1logoSEC优化

1.logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2.h1里面放一个链接，可以返回首页，把logo的背景图片给链接即可
3.为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不显示出来。
4.最后给链接一个title属性，这样鼠标放在logo上就可以看到提示文字了。

结构代码

<!-- logo模块 -->
 <div class="logo">
    <h1>
        <a href="index.html" title="品优购商城">品优购商城</a>
    </h1>
 </div>

样式代码

.logo{
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    background-color: skyblue;
}
.logo a{
display: block;
width: 171px;
height: 61px;
background: url(../images/logo.png) no-repeat;
/* 京东的做法 */
/* font-size: 0; */

/* 淘宝的做法是让文字隐藏 */
text-indent: -9999px;
overflow: hidden;
}

另外，子绝父相，在.logo的父元素加上相对定位 position: relative;

5.2.2search模块制作

结构代码

 <!-- search搜索模块 -->
  <div class="search">
    <input type="search" name="" id="" placeholder="语言开发">
    <button>搜索</button>
</div>

样式代码

.search{
      position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border:2px solid #b1191a;
 
}

.search input{
    float: left;
    width: 454px;
    height: 32px;
    padding-left: 10px;
  
}
.search button{
    float: right;
    width: 80px;
    height: 32px;
    background-color: #c81623;
    color: #fff;
    border: 0;
}

5.2.3hotwords模块制作

遇到的问题：做完后不在头部区域，打开开发工具检查发现继承了父元素的行高，再新加行高解决问题。让我进一步学会通过开发工具解决问题。

效果图：

结构代码

<!-- hotwords热词模块制作 -->
 <div class="hotwords">
    <a href="#" class="style_red">优惠购首发</a>
    <a href="#">亿元优惠</a>
    <a href="#">9.9团购</a>
    <a href="#">每满99减30</a>
    <a href="#">办公用品</a>   
    <a href="#">电脑</a>
    <a href="#">通信</a>
 </div>

样式代码

.hotwords{
position: absolute;
top: 66px;
left: 346px;
/* 添加行高，防止继承父元素行高 */
line-height: 15px;
}

.hotwords a{
    margin: 0 10px;
}

5.2.4 shopcar模块制作

结构代码

 <!-- 购物车模块 -->
  <div class="shopcar">我的购物车
    <i class="count">8</i>
  </div>

样式代码

.shopcar{
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.shopcar::before{
    content:'\e93a';
    font-family: 'icomoon';
    margin-right: 5px;
color: #b1191a;
}

.shopcar::after{
    content:'\e920';
    font-family: 'icomoon';
    margin-left: 10px;
 
}

.count{
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
}

效果图

5.2.5nav模块制作

    <!-- nav模块制作 start-->
<nav class="nav ">
    <div class="w">
        <div class="dropdown">
            <div class="dt">全部商品分类</div>
            <div class="dd">
                <ul>
                  <li><a href="#">家用电器</a></li>
                  <li><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">通信</a></li>
                  <li><a href="#">女装</a>、<a href="#">鞋包</a>、<a href="#">配饰</a></li>
                  <li><a href="#">男装</a>、<a href="#">运动</a>、<a href="#">户外</a></li>
                  <li><a href="#">美妆</a>、<a href="#">护肤</a>、<a href="#">个护</a></li>
                  <li><a href="#">家居</a>、<a href="#">家纺</a>、<a href="#">日用</a></li>
                  <li><a href="#">家电</a>、<a href="#">厨电</a>、<a href="#">智能</a></li>
                  <li><a href="#">母婴</a>、<a href="#">童装</a>、<a href="#">玩具</a></li>
                  <li><a href="#">食品</a>、<a href="#">生鲜</a>、<a href="#">零食</a></li>
                  <li><a href="#">酒水</a>、<a href="#">饮料</a>、<a href="#">冲调</a></li>
                  <li><a href="#">图书</a>、<a href="#">文具</a>、<a href="#">音像</a></li>
                  <li><a href="#">汽车</a>、<a href="#">配件</a>、<a href="#">养护</a></li>
                  <li><a href="#">宠物</a>、<a href="#">用品</a>、<a href="#">口粮</a></li>
                  <li><a href="#">医药</a>、<a href="#">保健</a>、<a href="#">器械</a></li>
                  <li><a href="#">家具</a>、<a href="#">建材</a>、<a href="#">装修</a></li>
                </ul>
            </div>
        </div>
        <div class="navitems">
            <ul>
                <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>
                <li><a href="#">有趣</a></li>

            </ul>
        </div>
    </div>
    <!-- nav模块制作 end-->

样式代码

/* .nav模块制作 */
.nav{
    height: 47px;
    border-bottom: 2px solid #b1191a;
}

.nav  .dropdown{
    float: left;
    width: 171px;
    height: 45px;
    line-height: 45px;
    background-color: #b1191a;

}

.nav .navitems{
    float: left;
    line-height: 45px;
}

.dropdown .dt{
    width: 100%;
    height: 100%;
    color:#fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}

.dropdown .dd{
width: 171px;
height: 465px;
background-color: #c81623;
margin-top: 2px;
}

.dropdown .dd ul li{
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
padding-left: 10px;
    color: #fff;
}

.dropdown .dd ul li:hover{
        color: #c81623;
    
}

.dropdown .dd ul li::after{
    position: absolute;
    top: 1px;
    right: 10px;
    color: #fff;
    content: '\e920';
    font-family: 'icomoon';
    font-size: 14px;

}
.dropdown .dd ul li a{
    font-size: 14px;
    color: #fff;

}

.dropdown .dd ul li a:hover{
    color: #c81623;
    background-color: #fff;
} 

.navitems ul li{
    float: left;

}

.navitems ul li a{
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}

效果图

5.3底部模块制作

遇到的问题：

问题1: 问题分析：nav 内部的元素用了 float: left，虽然 nav 设了 height: 47px，但页面整体的文档流没有被浮动元素 “撑住”，再加上 footer 没有做「清除上方所有浮动」的处理，导致 footer 向上偏移，和 nav 重叠。另外，footer与nav盒子挨得太近，导致nav下边框的红色消失。

解决方法：给 nav 内部的 .w 容器加 clearfix（关键），注意样式代码文件要有伪代码清除浮动的代码.给footer盒子加margin-top:20px;

问题2：问题分析：运用精灵图时，一直显示左上角的地方，坐标无效。

解决办法：为了五个坐标位置不同，给h5加类名后，在样式代码的选择器中错误将h5和新类名都写上去了，这种低级错误要避免。

结构代码

    <!-- 底部模块的制作 start--> 
     <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5 class="t1"></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="t2"></h5>
                        <div class="service_txt">
                            <h4>极速物流</h4>
                            <p>急速物流，急速送达</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="t3"></h5>
                        <div class="service_txt">
                            <h4>无忧售后</h4>
                            <p>倚天无理由退换货</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="t4"></h5>
                        <div class="service_txt">
                            <h4>特色服务</h4>
                            <p>私人定制家电套餐</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="t5"></h5>
                        <div class="service_txt">
                            <h4>帮助中心</h4>
                            <p>您的私人指南</p>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="mod_help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅游/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
   
                                <dl>
                                    <dt>配送指南</dt>
                                    <dd><a href="#">上门自提</a></dd>
                                    <dd><a href="#">211延时达</a></dd>
                                    <dd><a href="#">配送服务查询</a></dd>
                                    <dd><a href="#">配送费收取标准</a></dd>
                                    <dd><a href="#">海派配送</a></dd>
                                   
                                </dl>
                                    <dl>
                                        <dt>支付方式</dt>
                                        <dd><a href="#">货到付款</a></dd>
                                        <dd><a href="#">在线支付</a></dd>
                                        <dd><a href="#">分期付款</a></dd>
                                        <dd><a href="#">邮局汇款</a></dd>
                                        <dd><a href="#">公司转账</a></dd>
                                  </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="#">售后政策</a></dd>
                    <dd><a href="#">价格保护</a></dd>
                    <dd><a href="#">退款说明</a></dd>
                    <dd><a href="#">返修/退换货</a></dd>
                    <dd><a href="#">取消订单</a></dd>
               
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href="#">夺宝岛</a></dd>
                    <dd><a href="#">DDY装机</a></dd>
                    <dd><a href="#">延保服务</a></dd>
                    <dd><a href="#">品优购E卡</a></dd>
                    <dd><a href="#">品优购通信</a></dd>
                 </dl>
                <dl>
                    <dt>帮助中心</dt>
                 <dd>
                    <img src="images/erweima.png" alt="">
                    品优购客户端
                 </dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a> | <a href="#">手机品优购</a>
 | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">品优购社区</a> | <a href="#">品优购公益</a> | <a href="#">English Size</a> | <a href="#">Contact U</a>
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 
                    传真：010-82935100 邮箱：zhangghj+itcast.cn<br>
                    京ICP备08001421号-18 京公网安备110108007702
                </div>
            </div>
        </div>
     </footer>
    <!-- 底部模块的制作 end-->

样式代码

/* 底部模块制作 */
.footer{
    height: 415px;
    background-color: #f5f5f5;
    margin-top: 20px;
    padding-top: 20px;
}

.mod_service{
   
   height: 80px;
   border-bottom: 1px solid #ccc;
}

.mod_service ul li{
    float: left;
    width: 240px;
    height: 50px;
    background-color: pink;
    padding-left: 35px;
}

.mod_service ul  h5{
    float: left;
  width: 50px;
  height: 50px;
    background:url(/images/icons.png) no-repeat ;
    margin-right: 8px;
}
.mod_service ul li .t1{
    background-position: -252px -2px;
}
.mod_service ul li .t2{
    background-position: -255px -54px;
}
.mod_service ul li  .t3{
    background-position: -256px -106px;
}
.mod_service ul li  .t4{
    background-position: -257px -158px;
}
.mod_service ul li  .t5{
    background-position: -256px -210px;
}
.service_txt h4{
    font-size: 14px;
}

.service_txt p {
    font-size: 12px;
}

.mod_help{
    height: 180px;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-left: 50px;
}

.mod_help dl dt{
    font-size: 16px;
    margin-bottom: 10px;
} 

.mod_help dl{
    float: left;
    width: 200px;
}

.mod_help dl:last-child {
    float: left;
    width: 90px;
    text-align: center;
}

.mod_copyright {
    text-align: center;
    padding-top: 20px;
}

.links{
    margin-bottom: 15px;
}
.links a{
    margin: 0 3px;
}
.copyright {
line-height: 20px;
}

5.4main主体模块制作

创建index.css并引入

    <!-- 引入我们index.css文件 -->
      <link rel="stylesheet" href="css/index.css">

结构代码


    <!-- 首页专有的模块main start-->
     <div class="w">
        <div class="main">
            <div class="focus">
                <ul>
                    <li>
                        <img src="upload/focus1.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="newsflash">
                <div class="news">
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#"><strong>[特惠]</strong>备战开学季 全民半价购数码 快来抢购吧</a></li>
                            <li><a href="#"><strong>[公告]</strong>品优稳占家电网购六成份额</a></li>
                            <li><a href="#"><strong>[特惠]</strong>百元中秋全品类礼券限量领</a></li>
                            <li><a href="#"><strong>[公告]</strong>上品优生鲜 享阳澄湖大闸蟹</a></li>
                            <li><a href="#"><strong>[特惠]</strong>每日享折扣品优品质游</a></li>

                        </ul>
                    </div>
                </div>
                <div class="lifeservice">
                    <ul>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                    <li>
                        <i></i>
                        <p>机票</p>
                    </li>
                        <li>
                            <i></i>
                            <p>电影票</p>
                        </li>
                            <li>
                                <i></i>
                                <p>游戏</p>
                            </li>
                                <li>
                                    <i></i>
                                    <p>彩票</p>
                                </li>
                                    <li>
                                        <i></i>
                                        <p>加油卡</p>
                                    </li>
                                    <li>
                                        <i></i>
                                        <p>酒店</p>
                                    </li>
                                    <li>
                                        <i></i>
                                        <p>火车票</p>
                                    </li>
                                    <li>
                                        <i></i>
                                        <p>众筹</p>
                                    </li>
                                    <li>
                                        <i></i>
                                        <p>理财</p>
                                    </li>
                                    <li>
                                        <i></i>
                                        <p>礼品卡</p>
                                    </li>
                                    <li>
                                        <i></i>
                                        <p>文档</p>
                                    </li>
                               
                                </ul>
                </div>
                <div class="bargain">
                    <img src="upload/bargain.jpg" alt="">
                </div>
            </div>
        </div>
     </div>
    <!-- 首页专有的模块main start-->

样式代码

.main{
    width: 980px;
    height: 455px;
    margin-left: 220px;
    margin-top: 2px;
    margin-top: 10px;
}

.focus{
    float: left;
    width: 721px;
    height: 455px;
    background-color: purple;   

}

.newsflash{
    float: right;
    width: 250px;
height: 455px;
/* background-color: skyblue; */
}

.news{
    height: 160px;
    border: 1px solid #e4e4e4;
    /* background-color: pink; */
}
.news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
}

.news-hd h5{
    float: left;
    font-size: 14px;
}

.news-hd .more{
    float: right;
}

.news-hd .more::after{
    content: '\e920';
    font-family: 'icomoon';
 }

 .news-bd{
    padding: 5px 15px 0;
 }
 
 .news-bd ul li{
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
 }
 
.lifeservice{
    height: 209px;
    /* background-color: purple; */
    border: 1px solid #e4e4e4;
    border-top:  0;
    border-right: 0;
}

.lifeservice ul li{ 
  float: left;
  width: 25%;
  height: 71px;
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  text-align: center;
 }


.lifeservice ul li i {
  display: inline-block;
  width: 24px;
  height: 28px;
  background-color: pink;
  margin-top: 12px;
  background: url(../images/icons.png) no-repeat -19px -15px;
 }
       
.bargain{
    margin-top: 5px;
}

效果图

5.5recom推荐模块制作

结构代码

 <div class="w recom">
    <div class="recom_hd">
        <img src="images/clock.png" alt="">
        <h3>今日推荐</h3>
    </div>
    <div class="recom_bd">
        <ul>
            <li><img src="upload/recommend01.png" alt=""></li>
            <li><img src="upload/recommend01.png" alt=""></li>
            <li><img src="upload/recommend01.png" alt=""></li>
            <li><img src="upload/recommend01.png" alt=""></li>
        </ul>
    </div>
 </div>
<!-- 推荐模块end -->

样式代码

/* 推荐模块 */
.recom{
    height: 163px;
    background-color: #ebebeb;
    margin-top: 12px;
}

.recom_hd{
    float: left;
    height: 163px;
    width: 205px;
    background-color: #5c5251;
    text-align: center;
    padding-top: 30px;
}

 .recom .recom_hd h3{
    color: #fff;
    font-size: 14px;
    line-height: 33px;
    padding-top: 3px;
}

.recom_bd{
    float: left;
}

.recom_bd ul li{
    position: relative;
    float: left;
    width: 25%;
   
}

.recom_bd ul li img{
    width: 248px;
    height: 163px;
}

.recom_bd ul li:nth-child(-n+3):after{
    position: absolute;
    right: 0;
    top: 10px;
    content:'';
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

5.6楼层区域模块

结构代码

 <!-- 楼层区域的制作 start -->
     <div class="floor">
        <!-- 一楼家用电器 楼层-->
        <div class="w jaidian">
            <div class="box_hd"><h3>家用电器</h3>
                <div class="tab_list">
                    <ul>
                        <li><a href="#" class="style_red">热门</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>
                        <li><a href="#">高端电器</a></li>
                
                    </ul>
                </div>
            </div>
        
            <div class="box_bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <ul>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">4K电视</a></li>
                                <li><a href="#">空气净化器</a></li>
                                <li><a href="#">IH电饭煲</a></li>
                                <li><a href="#">滚筒洗衣机</a></li>
                                <li><a href="#">电热水器</a></li>
                            </ul>
                            <a href="#">
                                <img src="upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt="">
                           

                            </a>
                        </div>
                        <div class="col211">
                            <a href="#" class="bb">
                                <img src="upload/floor-1-2.png" alt="">
                               

                            </a>
                            <a href="#">
                               
                                <img src="upload/floor-1-3.png" alt="">
                            
                            </a>
                        </div>
                        <div class="col211">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                           

                            </a>
                        </div>
                        <div class="col_219">
                            <a href="#"class="bb">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>

                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                     
                    </div>
                </div>
            </div>

        </div>

        </div>

样式代码

/* 家用电器模块 */
.box_hd{
    height: 30px;
    border-bottom: 2px solid #c81623;
}

.box_hd h3 {
    float: left;
    font-size: 18px;
    font-weight: 400;
    color: #c81623;
}

.tab_list {
    float: right;
    line-height: 30px;
}

.tab_list ul li {
    float: left;

}
.tab_list ul li a{
    margin: 0 15px;
}

.floor .w{
    margin-top: 30px;
}

.box_bd{
    height: 361px;
    /* background-color: pink; */
}

.tab_list_item>div{
    float: left;
}

.col_210{
    width: 210px;
    background-color: #f9f9f9;

}

.col_210 ul {
margin-top: 12px;
text-align: center;
}

.col_210 a img{
    width: 207px;
height: 250px;
}

.col_210 ul li{
    float: left;
width: 85px;
height: 34px;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 33px;
margin-right: 10px;
}

.col_329{
    width: 329px;
}

.col211{
    width: 211px;
    border-right: 1px solid #ccc;
}

.col_219{
    width: 219px;
}

.bb{
    /* 一般情况下，a如果含有宽度的盒子，a需要转化为块级元素，才能让宽高生效。 */
    display: block;
    border-bottom: 1px solid #ccc;
}

效果图

5.7主页效果图

（由于平台限制，二维码已经打码）

index.html(1).png

6.品优购列表页制作

6.1准备工作

创建list.html文件和list.css样式文件，将相同部分地方并复制粘贴引入样式代码。

list.html结构代码

<!DOCTYPE html>
<html lang="en">
<>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表页-综合网购首页-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站说明 -->
<meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通电、电脑、家居百货、服装设计、
     母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！">
<!-- 关键字 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,数码相机,家电,服装,
      母婴,图书,食品">
      <!-- 引入favicon图标 -->
        <link rel="shortcut icon" href="favicon.ico" />
        <!-- 引入初始化样式文件 -->
        <link rel="stylesheet" href="css/base.css">
        <!-- 引入我们的样式文件 -->
        <link rel="stylesheet" href="css/common.css">
        <!-- 引入列表页的CSS文件 -->
        <link rel="stylesheet" href="css/list.css">
  </head>
<body>
        <!-- 快捷导航模块start -->
        <section class="shortcut">
            <div class="w">
                <div class="fl">
                    <ul>
                        <li>品优购欢迎您! &nbsp;</li>
                        <li>
                            <a href="#">请登录</a>&nbsp;
                            <a href="#" class="style_red">免费注册</a>
        
                        </li>
        
                    </ul>
                </div>
                <div class="fr">
                    <ul>
                        <li>我的订单</li>
                        <li></li>
                        <li class="arrow-icon">我的品优购</li>
                        <li></li>
                        <li>品优购会员</li>
                        <li></li>
                        <li>企业采购</li>
                        <li></li>
                        <li class="arrow-icon">关注品优购</li>
                        <li></li>
                        <li class="arrow-icon">客户服务</li>
                        <li></li>
                        <li class="arrow-icon">网站导航</li>
        
                    </ul>
                </div>
            </div>
        </section>
        <!-- 快捷导航模块 end -->
        
        <!-- header头部制作start -->
        <header class="header w">
            <!-- logo模块 -->
            <div class="logo">
                <h1>
                    <a href="index.html" title="品优购商城">品优购商城</a>
                </h1>
            </div>
        
            <!-- search搜索模块 -->
            <div class="search">
                <input type="search" name="" id="" placeholder="语言开发">
                <button>搜索</button>
            </div>
        
        
            <!-- hotwords热词模块制作 -->
            <div class="hotwords">
                <a href="#" class="style_red">优惠购首发</a>
                <a href="#">亿元优惠</a>
                <a href="#">9.9团购</a>
                <a href="#">每满99减30</a>
                <a href="#">办公用品</a>
                <a href="#">电脑</a>
                <a href="#">通信</a>
            </div>
        
            <!-- 购物车模块 -->
            <div class="shopcar">我的购物车
                <i class="count">8</i>
            </div>
        </header>
        <!-- header头部制作end-->
        
        <!-- nav模块制作 start-->
        <nav class="nav">
            <div class="w clearfix">
                <div class="dropdown">
                    <div class="dt">全部商品分类</div>
                    <div class="dd">
                        <ul>
                            <li><a href="#">家用电器</a></li>
                            <li><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">通信</a></li>
                            <li><a href="#">女装</a>、<a href="#">鞋包</a>、<a href="#">配饰</a></li>
                            <li><a href="#">男装</a>、<a href="#">运动</a>、<a href="#">户外</a></li>
                            <li><a href="#">美妆</a>、<a href="#">护肤</a>、<a href="#">个护</a></li>
                            <li><a href="#">家居</a>、<a href="#">家纺</a>、<a href="#">日用</a></li>
                            <li><a href="#">家电</a>、<a href="#">厨电</a>、<a href="#">智能</a></li>
                            <li><a href="#">母婴</a>、<a href="#">童装</a>、<a href="#">玩具</a></li>
                            <li><a href="#">食品</a>、<a href="#">生鲜</a>、<a href="#">零食</a></li>
                            <li><a href="#">酒水</a>、<a href="#">饮料</a>、<a href="#">冲调</a></li>
                            <li><a href="#">图书</a>、<a href="#">文具</a>、<a href="#">音像</a></li>
                            <li><a href="#">汽车</a>、<a href="#">配件</a>、<a href="#">养护</a></li>
                            <li><a href="#">宠物</a>、<a href="#">用品</a>、<a href="#">口粮</a></li>
                            <li><a href="#">医药</a>、<a href="#">保健</a>、<a href="#">器械</a></li>
                            <li><a href="#">家具</a>、<a href="#">建材</a>、<a href="#">装修</a></li>
        
                        </ul>
                    </div>
                </div>
                <div class="navitems">
                    <ul>
                        <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>
                        <li><a href="#">有趣</a></li>
        
                    </ul>
                </div>
            </div>
            <!-- nav模块制作 end-->



                <!-- 底部模块的制作 start-->
                <footer class="footer">
                    <div class="w">
                        <div class="mod_service">
                            <ul>
                                <li>
                                    <h5 class="t1"></h5>
                                    <div class="service_txt">
                                        <h4>正品保障</h4>
                                        <p>正品保障，提供发票</p>
                                    </div>
                                </li>
                                <li>
                                    <h5 class="t2"></h5>
                                    <div class="service_txt">
                                        <h4>极速物流</h4>
                                        <p>急速物流，急速送达</p>
                                    </div>
                                </li>
                                <li>
                                    <h5 class="t3"></h5>
                                    <div class="service_txt">
                                        <h4>无忧售后</h4>
                                        <p>倚天无理由退换货</p>
                                    </div>
                                </li>
                                <li>
                                    <h5 class="t4"></h5>
                                    <div class="service_txt">
                                        <h4>特色服务</h4>
                                        <p>私人定制家电套餐</p>
                                    </div>
                                </li>
                                <li>
                                    <h5 class="t5"></h5>
                                    <div class="service_txt">
                                        <h4>帮助中心</h4>
                                        <p>您的私人指南</p>
                                    </div>
                                </li>
                
                            </ul>
                        </div>
                        <div class="mod_help">
                            <dl>
                                <dt>服务指南</dt>
                                <dd><a href="#">购物流程</a></dd>
                                <dd><a href="#">会员介绍</a></dd>
                                <dd><a href="#">生活旅游/团购</a></dd>
                                <dd><a href="#">常见问题</a></dd>
                                <dd><a href="#">大家电</a></dd>
                                <dd><a href="#">联系客服</a></dd>
                            </dl>
                
                            <dl>
                                <dt>配送指南</dt>
                                <dd><a href="#">上门自提</a></dd>
                                <dd><a href="#">211延时达</a></dd>
                                <dd><a href="#">配送服务查询</a></dd>
                                <dd><a href="#">配送费收取标准</a></dd>
                                <dd><a href="#">海派配送</a></dd>
                
                            </dl>
                            <dl>
                                <dt>支付方式</dt>
                                <dd><a href="#">货到付款</a></dd>
                                <dd><a href="#">在线支付</a></dd>
                                <dd><a href="#">分期付款</a></dd>
                                <dd><a href="#">邮局汇款</a></dd>
                                <dd><a href="#">公司转账</a></dd>
                            </dl>
                            <dl>
                                <dt>售后服务</dt>
                                <dd><a href="#">售后政策</a></dd>
                                <dd><a href="#">价格保护</a></dd>
                                <dd><a href="#">退款说明</a></dd>
                                <dd><a href="#">返修/退换货</a></dd>
                                <dd><a href="#">取消订单</a></dd>
                
                            </dl>
                            <dl>
                                <dt>特色服务</dt>
                                <dd><a href="#">夺宝岛</a></dd>
                                <dd><a href="#">DDY装机</a></dd>
                                <dd><a href="#">延保服务</a></dd>
                                <dd><a href="#">品优购E卡</a></dd>
                                <dd><a href="#">品优购通信</a></dd>
                            </dl>
                            <dl>
                                <dt>帮助中心</dt>
                                <dd>
                                    <img src="images/erweima.png" alt="">
                                    品优购客户端
                                </dd>
                            </dl>
                        </div>
                        <div class="mod_copyright">
                            <div class="links">
                                <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a
                                    href="#">营销中心</a> | <a href="#">手机品优购</a>
                                | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">品优购社区</a> | <a href="#">品优购公益</a> | <a
                                    href="#">English Size</a> | <a href="#">Contact U</a>
                            </div>
                            <div class="copyright">
                                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000
                                传真：010-82935100 邮箱：zhangghj+itcast.cn<br>
                                京ICP备08001421号-18 京公网安备110108007702
                            </div>
                        </div>
                    </div>
                </footer>
                <!-- 底部模块的制作 end-->
</body>
</html>

6.2秒杀模块

结构代码：在logo模块后面添加代码

 <!-- 列表页的秒杀模块 -->
         <div class="sk">
            <img src="images/sk.png" alt="">
         </div>

样式代码

/* 列表页专有的CSS */
.sk{
    position: absolute;
    left: 190px;
    top: 40px;
    line-height: 45px;
    border-left: 1px solid #c81523;
    padding:3px 0 0 14px;
}

6.3列表页header和nav修改

先删掉不同部分的代码，完成后如下图所示

6.4列表页代码

结构代码

<!DOCTYPE html>
<html lang="en">
<>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表页-综合网购首页-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站说明 -->
<meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通电、电脑、家居百货、服装设计、
     母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！">
<!-- 关键字 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,数码相机,家电,服装,
      母婴,图书,食品">
      <!-- 引入favicon图标 -->
        <link rel="shortcut icon" href="favicon.ico" />
        <!-- 引入初始化样式文件 -->
        <link rel="stylesheet" href="css/base.css">
        <!-- 引入我们的样式文件 -->
        <link rel="stylesheet" href="css/common.css">
        <!-- 引入列表页的CSS文件 -->
        <link rel="stylesheet" href="css/list.css">

  </head>
<body>
        <!-- 快捷导航模块start -->
        <section class="shortcut">
            <div class="w">
                <div class="fl">
                    <ul>
                        <li>品优购欢迎您! &nbsp;</li>
                        <li>
                            <a href="#">请登录</a>&nbsp;
                            <a href="#" class="style_red">免费注册</a>
        
                        </li>
        
                    </ul>
                </div>
                <div class="fr">
                    <ul>
                        <li>我的订单</li>
                        <li></li>
                        <li class="arrow-icon">我的品优购</li>
                        <li></li>
                        <li>品优购会员</li>
                        <li></li>
                        <li>企业采购</li>
                        <li></li>
                        <li class="arrow-icon">关注品优购</li>
                        <li></li>
                        <li class="arrow-icon">客户服务</li>
                        <li></li>
                        <li class="arrow-icon">网站导航</li>
        
                    </ul>
                </div>
            </div>
        </section>
        <!-- 快捷导航模块 end -->
        
        <!-- header头部制作start -->
        <header class="header w">
            <!-- logo模块 -->
            <div class="logo">
                <h1>
                    <a href="index.html" title="品优购商城">品优购商城</a>
                </h1>
            </div>

        <!-- 列表页的秒杀模块 -->
         <div class="sk">
            <img src="images/sk.png" alt="">
         </div>


            <!-- search搜索模块 -->
            <div class="search">
                <input type="search" name="" id="" placeholder="语言开发">
                <button>搜索</button>
            </div>
        
        
            <!-- hotwords热词模块制作 -->
            <div class="hotwords">
                <a href="#" class="style_red">优惠购首发</a>
                <a href="#">亿元优惠</a>
                <a href="#">9.9团购</a>
                <a href="#">每满99减30</a>
                <a href="#">办公用品</a>
                <a href="#">电脑</a>
                <a href="#">通信</a>
            </div>
        
            <!-- 购物车模块 -->
            <div class="shopcar">我的购物车
                <i class="count">8</i>
            </div>
        </header>
        <!-- header头部制作end-->
        
        <!-- nav模块制作 start-->
        <nav class="nav">
            <div class="w clearfix">
           <div class="sk_list"><ul>
            <li><a href="#">品牌秒杀</a></li>
            <li><a href="#">即将售罄</a></li>
            <li><a href="#">超值低价</a></li>
            </div>
            <div class="sk_con">
                <ul>
                    <li><a href="#">女装</a></li>
                    <li><a href="#" class="style_red">女鞋</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>

            </div>
            <!-- nav模块制作 end-->

<!-- 列表页主体部分start -->
 <div class="sk_container w">
    <div class="sk_hd">
        <img src="images/banner1.png" alt="">
    </div>
    <div class="sk_bd">
        <ul class="clearfix">
            <li><img src="upload/list.png" alt=""></li>
            <li><img src="upload/list.png" alt=""></li>
            <li><img src="upload/list.png" alt=""></li>
            <li><img src="upload/list.png" alt=""></li>
            <li><img src="upload/list.png" alt=""></li>
            <li><img src="upload/list.png" alt=""></li>
            <li><img src="upload/list.png" alt=""></li>
            <li><img src="upload/list.png" alt=""></li>

        </ul>
    </div>

 </div>
<!-- 列表页主体部分end -->


                <!-- 底部模块的制作 start-->
                <footer class="footer">
                    <div class="w">
                        <div class="mod_service">
                            <ul>
                                <li>
                                    <h5 class="t1"></h5>
                                    <div class="service_txt">
                                        <h4>正品保障</h4>
                                        <p>正品保障，提供发票</p>
                                    </div>
                                </li>
                                <li>
                                    <h5 class="t2"></h5>
                                    <div class="service_txt">
                                        <h4>极速物流</h4>
                                        <p>急速物流，急速送达</p>
                                    </div>
                                </li>
                                <li>
                                    <h5 class="t3"></h5>
                                    <div class="service_txt">
                                        <h4>无忧售后</h4>
                                        <p>倚天无理由退换货</p>
                                    </div>
                                </li>
                                <li>
                                    <h5 class="t4"></h5>
                                    <div class="service_txt">
                                        <h4>特色服务</h4>
                                        <p>私人定制家电套餐</p>
                                    </div>
                                </li>
                                <li>
                                    <h5 class="t5"></h5>
                                    <div class="service_txt">
                                        <h4>帮助中心</h4>
                                        <p>您的私人指南</p>
                                    </div>
                                </li>
                
                            </ul>
                        </div>
                        <div class="mod_help">
                            <dl>
                                <dt>服务指南</dt>
                                <dd><a href="#">购物流程</a></dd>
                                <dd><a href="#">会员介绍</a></dd>
                                <dd><a href="#">生活旅游/团购</a></dd>
                                <dd><a href="#">常见问题</a></dd>
                                <dd><a href="#">大家电</a></dd>
                                <dd><a href="#">联系客服</a></dd>
                            </dl>
                
                            <dl>
                                <dt>配送指南</dt>
                                <dd><a href="#">上门自提</a></dd>
                                <dd><a href="#">211延时达</a></dd>
                                <dd><a href="#">配送服务查询</a></dd>
                                <dd><a href="#">配送费收取标准</a></dd>
                                <dd><a href="#">海派配送</a></dd>
                
                            </dl>
                            <dl>
                                <dt>支付方式</dt>
                                <dd><a href="#">货到付款</a></dd>
                                <dd><a href="#">在线支付</a></dd>
                                <dd><a href="#">分期付款</a></dd>
                                <dd><a href="#">邮局汇款</a></dd>
                                <dd><a href="#">公司转账</a></dd>
                            </dl>
                            <dl>
                                <dt>售后服务</dt>
                                <dd><a href="#">售后政策</a></dd>
                                <dd><a href="#">价格保护</a></dd>
                                <dd><a href="#">退款说明</a></dd>
                                <dd><a href="#">返修/退换货</a></dd>
                                <dd><a href="#">取消订单</a></dd>
                
                            </dl>
                            <dl>
                                <dt>特色服务</dt>
                                <dd><a href="#">夺宝岛</a></dd>
                                <dd><a href="#">DDY装机</a></dd>
                                <dd><a href="#">延保服务</a></dd>
                                <dd><a href="#">品优购E卡</a></dd>
                                <dd><a href="#">品优购通信</a></dd>
                            </dl>
                            <dl>
                                <dt>帮助中心</dt>
                                <dd>
                                    <img src="images/erweima.png" alt="">
                                    品优购客户端
                                </dd>
                            </dl>
                        </div>
                        <div class="mod_copyright">
                            <div class="links">
                                <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a
                                    href="#">营销中心</a> | <a href="#">手机品优购</a>
                                | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">品优购社区</a> | <a href="#">品优购公益</a> | <a
                                    href="#">English Size</a> | <a href="#">Contact U</a>
                            </div>
                            <div class="copyright">
                                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000
                                传真：010-82935100 邮箱：zhangghj+itcast.cn<br>
                                京ICP备08001421号-18 京公网安备110108007702
                            </div>
                        </div>
                    </div>
                </footer>
                <!-- 底部模块的制作 end-->

</body>
</html>

样式代码

/* 列表页专有的CSS */
.sk{
    position: absolute;
    left: 190px;
    top: 40px;
    line-height: 45px;
    border-left: 1px solid #c81523;
    padding:3px 0 0 14px;
}

.sk_list{
    float: left;
}

.sk_list ul li{
float: left;
}

.sk_list ul li a{
display: block;
line-height: 47px;
padding: 0 30px;
font-size: 16px;
font-weight: 700;
color: #000;
}

.sk_con{
    float: left;
    margin-left: 10px;
}

.sk_con ul li{
    float: left;
}

.sk_con ul li a {
    display: block;
    line-height: 49px;
    padding: 0 20px;
}

.sk_con ul li:last-child a::after{
    content: '\e91e';
    font-family: 'icomoon';
}

.sk_bd ul li{
    overflow: hidden;
    float: left;
    margin-left: 13px;
    width: 280px;
    height: 460px;
    border: 1px solid transparent;
}

.sk_bd ul li :nth-child(4n){
margin-right: 0;
}

.sk_bd ul li:hover{
    border:1px solid #c81523;
}

6.5列表页效果图

（平台限制，二维码已打码）

list.html(1).png

7.品优购注册页制作

7.1注册页类名命名

创建注册页面：register.html

注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

名称	说明
注册专区	registerarea
注册内容	reg-form
错误的	error
成功的	success
默认的	default

7.2注册页header制作

结构代码

  <div class="w">
        <header>
            <div class="logo">
               <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
        </header>

样式代码

.w{
    width: 1200px;
    margin:0 auto;
}

header{
    height: 84px;
    border-bottom: 2px solid #c81523;
}

.logo{
    padding-top: 18px;
}

7.3注册页注册主体

结构代码

 <div class="registerarea">
            <h3>注册新用户
                <div class="login">我有账号，去<a href="#">登录</a></div>
            </h3>
            <div class="reg_form">
                <form action=""><ul>
                    <li>
                        <label for="">手机号：</label>
                        <input type="text" class="inp">
                        <span class="error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span>
                    </li>
                    <li>
                        <label for="">短信验证码：</label>
                        <input type="text" class="inp">
                        <span class="success"><i class="success_icon"></i>短信验证码输入正确</span>
                    </li>
                    <li>
                        <label for="">登陆密码：</label>
                        <input type="text" class="inp">
                        <span class="error"></span>
                    </li>
                    <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em></li>
                    <li>
                        <label for="">确认密码：</label>
                        <input type="text" class="inp">
                        <span class="error"></span>
                    </li>
                    <li class="agree"><input type="checkbox" name="" id="">同意协议并注册
                        <a href="#">《知晓用户协议》</a>
                    </li>
                    <li><input type="submit" value="完成注册" class="btn"></li>
                </ul></form>
             
            </div>
        </div>

样式代码

.registerarea{
    height: 522px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.registerarea h3{
    height: 42px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    line-height: 42px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 400;
}

.login{
    float: right;
    font-size: 14px;
}

.login a{
    color: #c81523;
}

.reg_form{
    width: 600px;
    /* background-color: pink; */
    margin: 50px auto;
}

.reg_form ul li  {
    margin-bottom: 20px;
}

.reg_form ul li label{
    display: inline-block;
    width: 88px;
    text-align: right;
}

.reg_form ul li .inp{
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}

.error{
    color: #c81523;
}


.error_icon ,
.success_icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-top: -2px;

}

.error_icon{
       background: url(/images/error.jpg) no-repeat;
       background-size:100% 100%;
    
}

.success{
    color: green;
}

.success_icon {
    background: url(/images/success.jpg) no-repeat;
    background-size: 100% 100%;
}
 
.safe{
    padding-left: 175px;
}
.safe em{
padding: 0 12px;
}

.ruo{

    background-color: #de1111;
}

.zhong {

    background-color: #40b83f;
}

.qiang {

    background-color: #f79100;
}

.agree{
    padding-left: 95px;
}

.agree a{
    color: #1ba1e6;
}

.agree input{
    vertical-align: middle;
    
}

.btn{
    width: 200px;
    height: 34px;
    background-color: #c81523;
    color: #fff;
    margin: 30px 0 0 70px;
}

注意：注册内容要写在表单域里，可以最后再放进表单域里

效果图

7.4底部模块

结构代码

 <!-- 底部模块的制作 start-->
<footer>
    
        <div class="mod_copyright">
            <div class="links">
                <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a>
                | <a href="#">手机品优购</a>
                | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">品优购社区</a> | <a href="#">品优购公益</a> | <a
                    href="#">English Size</a> | <a href="#">Contact U</a>
            </div>
            <div class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000
                传真：010-82935100 邮箱：zhangghj+itcast.cn<br>
                京ICP备08001421号-18 京公网安备110108007702
            </div>
        </div>
</footer>
<!-- 底部模块的制作 end-->

样式代码

.mod_copyright {
    text-align: center;
    padding-top: 20px;
}

.links {
    margin-bottom: 15px;
}

.links a {
    margin: 0 3px;
}

.copyright {
    line-height: 20px;
}

效果图

8.学习收获

1. 精通CSS浮动布局及清除浮动的实操方法
2. 掌握子绝父相定位的精准布局技巧
3. 学会抽离公共样式，实现多页面样式复用
4. 建立规范的前端项目文件目录结构
5. 熟练使用浏览器开发者工具排查样式问题
6. 掌握精灵图、字体图标的正确使用方法
7. 理解电商页面模块化开发的核心逻辑
8. 学会页面TDK设置与logo的SEO优化技巧
9. 掌握表单页面的样式设计与状态提示方法
10. 形成发现问题、解决问题、复盘总结的思维闭环.

最后

以上就是品优购重要页面从 0 到 1 的制作全过程啦～✨ 其实前端页面制作没有捷径，无非是把基础知识点拆解开，一点点打磨布局、调试样式、优化体验。这个项目让我深刻感受到，看似简单的电商页面，藏着无数需要抠细节的地方：小到一个按钮的 hover 效果，大到整站的响应式适配，每一步都是对基础的检验。

我已经把这个项目的完整代码整理到了我的 GitHub 仓库中，大家可以直接访问：github.com/TANG1110/fr… 查看全部源码，也可以跟着代码一步步实操～

作为一名还在成长的前端学习者，我会持续把实战过程和学习心得记录在这个仓库里，也欢迎小伙伴们在评论区交流想法、指出问题～前端路漫漫，咱们一起打怪升级，把基础打牢，把页面做精～💪

如果这篇分享对你有帮助的话，别忘了点赞收藏～我是糖糖，咱们下期见～