品优购PC端静态首页制作

最新推荐文章于 2025-05-17 16:09:35 发布

沐霖_tian

最新推荐文章于 2025-05-17 16:09:35 发布

阅读量1.2k

点赞数 19

本文链接：https://blog.youkuaiyun.com/qq_69347371/article/details/143857569

版权

页面展示：

项目结构：

由于各个页面头部和尾部相似，可转至公共页面。引入公共样式和首页样式如下：

品优购静态首页制作

一、主体模块

1）main 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动

2）main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点图模块

3）main 里面包含右侧盒子，宽度为 250像素，右浮动，newsflash 新闻快报模块

1、焦点图模块

结构图：

实现思路：

a、大的 focus 盒子包裹 1 号展示图片的盒子，2号 3号左右箭头的盒子，4号小圆点的盒子

b、包裹 1 号盒子（ul > li > a > img），轮播图这样的布局是为了后面方便配置js逻辑代码

c、2 号盒子跟 3 号盒子左右箭头，利用定位的方式来实现

d、4 号盒子里面放小圆点（ol > li）

小圆圈利用边框实现
小圆点里面背景颜色来实现

结构实现：

<!-- 5、main 主体模块 start -->
    <div class="w">
        <div class="main">
            <!-- 焦点图模块 -->
            <div class="focus fl">
                <ul>
                    <li><a href="#"><img src="uploads/focus.png" alt=""></a></li>
                </ul>
                <!-- 左侧按钮箭头 -->
                <a href="#" class="prev"> &lt; </a>
                <!-- 右侧按钮箭头 -->
                <a href="#" class="next"> &gt; </a>
                <!-- 小圆点 -->
                <ol class="promo-nav">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li class="selected"></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
        </div>
    </div>

样式实现：

/* 主体模块 */
.main {
    width: 980px;
    height: 455px;
    margin-left: 220px;
    margin-top: 10px;
}

/* 焦点图模块 */
.focus {
    position: relative;
    width: 721px;
    height: 455px;
}

/* 箭头 */
.prev,
.next {
    position: absolute;
    /* 绝对定位的盒子垂直居中 */
    top: 50%;
    margin-top: -18px;
    /* 加了绝对定位的盒子可以直接设置高度和宽度 */
    width: 25px;
    height: 36px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 36px;
    color: #fff;
    text-decoration: none;
}

/* 左箭头 */
.prev {
    left: 0;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

/* 右箭头 */
.next {
    /* 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 
    同理  top  bottom  会执行 top */
    right: 0;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

/* 小圆点 */
.promo-nav {
    position: absolute;
    left: 50px;
    bottom: 10px;
    width: 120px;
    height: 20px;
}

.promo-nav li {
    float: left;
    width: 10px;
    height: 10px;
    margin: 5px 4px;
    border-radius: 50%;
    border: 1px solid #fff;
}

.promo-nav .selected {
    background-color: #fff;
}

2、新闻快报模块

右侧的模块分为上中下三个盒子

1）、新闻部分

结构图：

实现思路：

a、1 号盒子为 news 新闻模块高度为 165px

b、分为上下两个结构，但是两个模块都用 div，上面是 news-hd，下面是 news-bd

c、上面是news-hd，设置高度是 33px，设置下边框

里面放一个h5 标题
放一个a标签，内容是更多，然后让 a 进行右浮动，三角用伪元素设置字体图标就好

d、下面是news-bd

里面包含 ul 和 li 还有链接
给li设置高度，24px，设置单行文字溢出省略： 1. 设置 overflow: hidden; 2.设置 white-space: nowrap; 3. 设置 text-overflow: ellipsis;

结构实现：

<!-- 5、main 主体模块 start -->
    <div class="w">
        <div class="main">
            <!-- 新闻快报模块 -->
            <div class="newsflash fr">
                <!-- 新闻部分 -->
                <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>
        </div>
    </div>

样式实现：

/* 新闻快报模块 */
.newsflash {
    float: right;
    width: 250px;
    height: 455px;
}

/* 新闻部分 */
.news {
    height: 165px;
    border: 1px solid #e4e4e4;
}

.news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}

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

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

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

.news-bd {
    padding: 5px 15px 0;
}

.news-bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    /* 强制一行显示 */
    white-space: nowrap;
    /* 文字用省略号代替超出的部分 */
    text-overflow: ellipsis;
}

2）、生活服务部分

结构图：

实现思路：

a、2 号盒子为 lifeservice 生活服务模块高度为 209px 设置边框（左右下边框）

b、里面的内容是 ul > 12*li，给li设置宽 63px，高71px，设置右边和下边的边框，设置浮动，这样设置后，第四个li会装不开，掉下来，解决办法如下

lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li
可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个小 li
lifeservice 盒子 overflow 隐藏多余的部分就可以了

c、在 li 里面放一个 i（里面放图标），下面的文本用 p 标签包裹

d、给 i 设置 24px宽和28px的高（注意 i 是行内元素，转成行内块），给 li 设置 text-align:center 让里面内容居中显示

结构实现：

      <div class="w">
        <div class="main">
            <!-- 新闻快报模块 -->
            <div class="newsflash fr">
                <!-- 生活服务部分 -->
                <div class="lifeservice">
                    <ul>
                        <li>
                            <i class="hf"></i>
                            <p>话费</p>
                        </li>
                        <li class="jian">
                            <i class="jp"></i>
                            <p>机票</p>
                            <span></span>
                        </li>
                        <li>
                            <i class="dyp"></i>
                            <p>电影票</p>
                        </li>
                        <li>
                            <i class="yx"></i>
                            <p>游戏</p>
                        </li>
                        <li>
                            <i class="cp"></i>
                            <p>彩票</p>
                        </li>
                        <li>
                            <i class="jyz"></i>
                            <p>加油站</p>
                        </li>
                        <li>
                            <i class="jd"></i>
                            <p>酒店</p>
                        </li>
                        <li>
                            <i class="hcp"></i>
                            <p>火车票</p>
                        </li>
                        <li>
                            <i class="zc"></i>
                            <p>众筹</p>
                        </li>
                        <li>
                            <i class="lc"></i>
                            <p>理财</p>
                        </li>
                        <li>
                            <i class="lpc"></i>
                            <p>礼品卡</p>
                        </li>
                        <li>
                            <i class="bt"></i>
                            <p>白条</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

样式实现：

/* 生活服务部分 */
.lifeservice {
    overflow: hidden;
    height: 209px;
    border: 1px solid #e4e4e4;
    border-top: 0;
}

.lifeservice ul {
    width: 252px;
}

.lifeservice ul li {
    float: left;
    width: 63px;
    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;
    margin-top: 12px;
}

.lifeservice .jian {
    position: relative;
}

.lifeservice .jian span {
    position: absolute;
    background: url(../images/jian.jpg) no-repeat;
    top: 0;
    right: 0;
    width: 12px;
    height: 15px;
}

.lifeservice .hf {
    background: url(../images/icons.png) no-repeat -19px -15px;
}

.lifeservice .jp {
    background: url(../images/icons.png) no-repeat -79px -15px;
}

.lifeservice .dyp {
    background: url(../images/icons.png) no-repeat -140px -15px;
}

.lifeservice .yx {
    background: url(../images/icons.png) no-repeat -205px -15px;
}

.lifeservice .cp {
    background: url(../images/icons.png) no-repeat -15px -88px;
}

.lifeservice .jyz {
    background: url(../images/icons.png) no-repeat -79px -88px;
}

.lifeservice .jd {
    background: url(../images/icons.png) no-repeat -140px -88px;
}

.lifeservice .hcp {
    background: url(../images/icons.png) no-repeat -205px -88px;
}

.lifeservice .zc {
    background: url(../images/icons.png) no-repeat -15px -157px;
}

.lifeservice .lc {
    background: url(../images/icons.png) no-repeat -79px -157px;
}

.lifeservice .lpc {
    background: url(../images/icons.png) no-repeat -140px -157px;
}

.lifeservice .bt {
    background: url(../images/icons.png) no-repeat -205px -157px;
}

3）、特价商品

结构图：

实现思路：

3 号盒子为 bargain 特价商品直接插入一张图片

结构实现：

    <div class="w">
        <div class="main">
            <!-- 新闻快报模块 -->
            <div class="newsflash fr">
                <!-- 特价商品 -->
                <div class="bargain">
                    <img src="uploads/bargain.png" alt="">
                </div>
            </div>
        </div>
    </div>
<!-- 5、main 主体模块 end -->

样式实现：

/* 特价商品 */
.bargain {
    margin-top: 5px;
}

二、推荐模块

结构图：

实现思路：

a、大盒子 recommend 设置版心，设置 163px的高，设置距离上边 12px

b、1 号盒子 recom_hd

设置宽度205px，高度163px
里面放一个img标签，插入图片，下面的文字用 P 标签

c、2 号盒子 recom_bd ，注意里面的小竖线

右侧结构里面放 ul 包含 4个 li，每个li里面包含左边文本 div 右边放图片
给 li 设置浮动
小竖线给类名 space 设置宽 1px 高143px ，距离上侧10px 的外边距，背景颜色为（#ddd）

结构实现：

<!-- 6、recommend 推荐模块 start -->
    <div class="w recommend">
        <div class="recom-hd fl">
            <img src="uploads/tuijian.png" alt="">
            <p>今日推荐</p>
        </div>
        <div class="recom-bd fr">
            <ul>
                <li class="li_1">
                    <div class="left">
                        <h5>优质好货</h5>
                        <span>满300减100</span>
                        <p>满500减200</p>
                    </div>
                    <a href="#"><img src="uploads/1.png"></a>
                </li>
                <li class="space"></li>
                <li class="li_2">
                    <div class="left">
                        <h5>品牌尾货</h5>
                        <span>满300减100</span>
                        <p>团购低至9.9</p>
                        <b>团购</b>
                    </div>
                    <a href="#"><img src="uploads/2.png"></a>
                </li>
                <li class="space"></li>
                <li class="li_3">
                    <div class="left">
                        <h5>时尚穿搭</h5>
                        <span>低至3.6折</span>
                        <p>暑期出游季</p>
                        <b>闪购</b>
                    </div>
                    <a href="#"><img src="uploads/3.png"></a>
                </li>
                <li class="space"></li>
                <li class="li_4">
                    <div class="left">
                        <h5>0点上新</h5>
                        <span>全场包邮</span>
                        <p>低至1折</p>
                        <b>闪购</b>
                    </div>
                    <a href="#"><img src="uploads/4.png"></a>
                </li>
            </ul>
        </div>
<!-- 6、recommend 推荐模块 end -->

样式实现：

/* 推荐模块 */
.recommend {
    height: 163px;
    margin-top: 12px;
}

.recommend .recom-hd {
    width: 205px;
    height: 163px;
    color: #fff;
    text-align: center;
    padding-top: 22px;
    background-color: #5c5251;
}

.recommend .recom-hd img {
    width: 55px;
    height: 55px;
}

.recommend .recom-hd p {
    padding-top: 10px;
    font-size: 15px;
}

.recommend .recom-bd {
    background-color: #ebebeb;
}

.recommend .recom-bd li {
    float: left;
    width: 248px;
    height: 163px;
}

.recommend .recom-bd .space {
    width: 1px;
    height: 143px;
    margin-top: 10px;
    background-color: #ddd;
}

.recommend .recom-bd .left {
    float: left;
    margin: 20px 0 0 20px;
}

.recommend .recom-bd h5 {
    font-size: 15px;
    margin-bottom: 10px;
}

.recommend .recom-bd span {
    color: #fff;
    font-size: 14px;
}

.recommend .recom-bd .li_1 span {
    background-color: #00a0e8;
}

.recommend .recom-bd .li_2 span {
    background-color: #5fb200;
}

.recommend .recom-bd .li_3 span {
    background-color: #e2162f;
}

.recommend .recom-bd .li_4 span {
    background-color: #0085fb;
}

.recommend .recom-bd b {
    color: #fff;
    padding: 0 15px;
    border-radius: 10px;
}

.recommend .recom-bd .li_2 b {
    background-color: #5fb200;
}

.recommend .recom-bd .li_3 b {
    background-color: #e2162f;
}

.recommend .recom-bd .li_4 b {
    background-color: #0085fb;
}

.recommend .recom-bd p {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 20px;
}

.recommend .recom-bd img {
    float: right;
    margin-top: 21px;
}

.recommend .recom-bd .li_1 img {
    margin-right: 40px;
}

.recommend .recom-bd .li_2 img {
    margin-right: 20px;
}

.recommend .recom-bd .li_3 img {
    margin-right: 46px;
}

.recommend .recom-bd .li_4 img {
    margin-right: 39px;
}

三、推测模块

结构图：

a、盒子 conjecture 版心水平居中对齐

b、1号盒子为上面部分 title -- 里面左侧标题H3 左浮动右侧链接 a 右浮动

c、2号盒子为底下部分 content --- 里面是无序列表有 11个小li 组成，选出类名为 spac e的d、小 li 设置宽1px 高62px，距离上侧160px 背景色为#ededed

结构实现：

<!-- 7、conjecture 推测模块 start -->
    <div class="w conjecture">
        <div class="title">
            <h3>猜你喜欢</h3>
            <a href="#">换一批 &nbsp;<img src="uploads/huan.png" alt=""></a>
        </div>
        <div class="content">
            <ul>
                <li>
                    <div><a href="#"><img src="uploads/conjecture_1.png" alt="手提包"></a></div>
                    <h6>阳光美包新款单肩包女</h6>
                    <p>包时尚子母包四件套女</p>
                    <span>¥116.00</span>
                </li>
                <li class="space"></li>
                <li>
                    <div><a href="#"><img src="uploads/conjecture_2.png" alt="锅"></a></div>
                    <h6>爱仕达 30CM炒锅不粘</h6>
                    <p>锅NWG8330E电磁炉炒</p>
                    <span>¥99.00</span>
                </li>
                <li class="space"></li>
                <li>
                    <div><a href="#"><img src="uploads/conjecture_3.png" alt="耳机"></a></div>
                    <h6>捷波朗</h6>
                    <p>（jabra）BOOSI劲步</p>
                    <span>¥245.00</span>
                </li>
                <li class="space"></li>
                <li>
                    <div><a href="#"><img src="uploads/conjecture_4.png" alt="屏幕"></a></div>
                    <h6>欧普</h6>
                    <p>JYLZ08面板灯平板灯铝</p>
                    <span>¥238.00</span>
                </li>
                <li class="space"></li>
                <li>
                    <div><a href="#"><img src="uploads/conjecture_5.png" alt="三星手机"></a></div>
                    <h6>三星</h6>
                    <p>（G5500）移动联</p>
                    <span>¥649.00</span>
                </li>
                <li class="space"></li>
                <li>
                    <div><a href="#"><img src="uploads/conjecture_6.png" alt="洗发露"></a></div>
                    <h6>韩国所望</h6>
                    <p>紧致湿润精华露400ml</p>
                    <span>¥649.00</span>
                </li>
            </ul>
        </div>
    </div>
<!-- 7、conjecture 推测模块 end -->

样式实现·：

/* 推测模块 */
.conjecture {
    margin: 20px auto;
}

.conjecture .title {
    height: 30px;
    line-height: 30px;
}

.conjecture .title h3 {
    float: left;
    font-size: 16px;
}

.conjecture .title a {
    float: right;
    font-size: 14px;
    margin-right: 15px;
}

.conjecture .content {
    height: 230px;
    border: 1px solid #ededed;
}

.conjecture .content li {
    float: left;
    width: 198px;
    height: 100%;
}

.conjecture .content .space {
    width: 1px;
    height: 62px;
    margin-top: 160px;
    background-color: #ededed;
}

.conjecture .content li div {
    width: 100%;
    height: 160px;
    line-height: 160px;
    text-align: center;
}

.conjecture .content li h6 {
    margin-left: 35px;
    font-size: 13px;
    font-weight: 400;
}

.conjecture .content li p {
    margin-left: 35px;
    font-size: 12px;
}

.conjecture .content li span {
    margin-left: 35px;
    font-size: 18px;
    color: #df3033;
}

四、传智播客·有趣区

结构图：

实现思路：

a、盒子 interestall 版心水平居中对齐

b、1号盒子为标题H2

c、盒子interest --- 里面是无序列表有 4个小li 组成，第一个小 li 放一张图片，最后一个里面是 ol>li 精灵图片位置为 -3px -3px，ol 里面每个 li 宽高分别为 79.5px 58px

d、利用 :nth-child(n) 分别选出 2 号和 3 号盒子设置宽度盒子里面有 h3 标题和两个 a 上下并列， a 里面左侧文本右侧图片

结构实现：

<!-- 8、interestall 传智播客·有趣区 start -->
    <div class="interestall w">
        <h2>传智播客·有趣区</h2>
        <div class="interest w">
            <ul>
                <li><a href="#"><img src="uploads/interest01.png" alt=""></a></li>
                <li>
                    <h3>好东西</h3>
                    <a href="#">
                        <div class="ibox1">
                            <img src="uploads/interest02.png" alt="">
                            <div class="shuoming">
                                <h2>达人推荐</h2>
                                <p>
                                    雷神金属机械键盘
                                </p>
                                <p class="style_red">
                                    与你相见恨晚
                                </p>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="ibox2">
                            <img src="uploads/interest03.png" alt="">
                            <div class="shuoming2">
                                <h2>发现好物</h2>
                                <p>
                                    一不小心霸气外露
                                </p>
                                <p class="style_red">
                                    等你来
                                </p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <h3>品牌街</h3>
                    <a href="#">
                        <div class="ibox3">
                            <img src="uploads/interest04.png" alt="">
                            <div class="shuoming3">
                                <h2>苏泊尔</h2>
                                <p>
                                    返厂大秀厂
                                </p>
                                <p class="style_red">
                                    爆品直降100元
                                </p>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="ibox4">
                            <img src="uploads/interest05.png" alt="">
                            <div class="shuoming4">
                                <h2>国际大牌</h2>
                                <p>
                                    adidas
                                </p>
                                <p class="style_red">
                                    部分3免1
                                </p>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div>
                            <div class="ibox5">
                                <img src="uploads/interest06.png" alt="">
                                <div class="shuoming5">
                                    <h2>本周特卖</h2>
                                    <p>
                                        大牌折扣
                                    </p>
                                    <p class="style_red">
                                        每周上新
                                    </p>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <ol>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                    </ol>
                </li>
            </ul>
        </div>
    </div>
<!-- 8、interestall 传智播客·有趣区 end -->

样式实现：

/* 传智播客·有趣区 */
.interestall {
    margin: 30px auto;
}

.interest {
    height: 406px;
    border: #ededed 1px solid;
}

.interest ul li {
    float: left;
    height: 406px;
}

.interest ul li:nth-child(2) {
    width: 228px;
}

.interest ul li:nth-child(2) h3 {
    text-align: center;
    font-size: 15px;
    width: 190px;
    border-bottom: 1px dashed #ededed;
    margin-left: 19px;
    padding: 5px 0px;
}

.interest ul li:nth-child(2) .ibox1 {
    position: relative;
    height: 208px;
    border-bottom: #ededed 1px solid;
}

.interest ul li:nth-child(2) .ibox1 img {
    position: absolute;
    right: -2px;
    top: 30px;
}

.interest ul li:nth-child(2) .shuoming {
    position: absolute;
    left: 10px;
    top: 70px;
}

.interest ul li:nth-child(2) h2 {
    padding-bottom: 5px;
}

.interest ul li:nth-child(2) .ibox2 {
    height: 164px;
    position: relative;
}

.interest ul li:nth-child(2) .ibox2 img {
    position: absolute;
    right: -2px;
    bottom: 0px;
}

.interest ul li:nth-child(2) .shuoming2 {
    position: absolute;
    left: 10px;
    top: 50px;
}

.interest ul li:nth-child(3) h3 {
    width: 365px;
    padding: 5px 0px;
    text-align: center;
    font-size: 15px;
    border-bottom: 1px dashed #ededed;
    margin-left: 21px;
}

.interest ul li:nth-child(3) .ibox3 {
    position: relative;
    width: 407px;
    height: 208px;
    border-bottom: #ededed solid 1px;
}

.interest ul li:nth-child(3) .ibox3 img {
    position: absolute;
    right: 0px;
    bottom: 10px;
}

.interest ul li:nth-child(3) .ibox3 .shuoming3 {
    position: absolute;
    top: 72px;
    left: 52px;
}

.interest ul li:nth-child(3) h2 {
    padding-bottom: 5px;
}

.interest ul li:nth-child(3) .ibox4 {
    position: relative;
    float: left;
    width: 203px;
    height: 165px;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}

.interest ul li:nth-child(3) .ibox4 img {
    position: absolute;
    right: 0px;
    top: 32px;
}

.interest ul li:nth-child(3) .ibox4 .shuoming4 {
    position: absolute;
    left: 15px;
    top: 50px;
}

.interest ul li:nth-child(3) h2 {
    padding-bottom: 5px;
}

.interest ul li:nth-child(3) .ibox5 {
    position: relative;
    float: right;
    height: 165px;
    width: 202px;
    border-bottom: 1px solid #ededed;
}

.interest ul li:nth-child(3) .ibox5 img {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.interest ul li:nth-child(3) .ibox5 .shuoming5 {
    position: absolute;
    left: 15px;
    top: 50px;
}

.interest ul li:nth-child(3) h2 {
    padding-bottom: 5px;
}

.interest ul li:nth-child(4) {
    width: 159px;
    background: url(../uploads/jingling.png) no-repeat -3px -3px;
}

.interest ul li:last-child ol li {
    float: left;
    width: 79.5px;
    height: 58px;
}

五、楼层模块

结构图：

此处共有三层楼，每层有三个盒子，下面以家电楼层为例分析具体实现思路。

实现思路：

a、1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子

box_hd 给 30px 的高度，2个像素的下边框
里面放一个左侧 h3 的盒子，右侧一个div盒子，div盒子里面放 ul > li > a
左侧盒左浮动，右侧盒子右浮动
a标签之间的距离用左右的padding撑开即可

b、2 号盒子 box_bd，不要给高度

box_bd 属于是tab栏的内容区域，所以在这个里面先嵌套一个盒子 tab_content，在tab_content 里面包裹tab选项卡对应的内容
内容被一个大盒子包裹（tab_list_item），里面是 ul 包裹 5个 li，每个li设置对应的宽度，然后设置浮动
而这5个li的宽度是不一致的，在这里我们的做法是先把宽度的样式列出来，然后给对应的li设置
- 第一个小 li 分为上下结构，上面是 ol 包裹 li ，li里面包裹 a，下面插入一张图片
- 上面的li设置宽高，设置浮动，这样就排列下来了
- 后面的小 li 里面先放一个a标签，然后在a标签里面插入图片即可

c、3 号盒子 box_bottom 里面插入图片

结构实现：

<!-- 9、jiadian 家电模块 start -->
    <div class="w jiadian clearfix">
        <div class="box-hd">
            <h3>家用电器</h3>
            <div class="tab-list">
                <ul>
                    <li><a href="#">热门</a></li>
                    <li class="space"></li>
                    <li><a href="#">大家电</a></li>
                    <li class="space"></li>
                    <li><a href="#">生活电器</a></li>
                    <li class="space"></li>
                    <li><a href="#">厨房电器</a></li>
                    <li class="space"></li>
                    <li><a href="#">个护健康</a></li>
                    <li class="space"></li>
                    <li><a href="#">应季电器</a></li>
                    <li class="space"></li>
                    <li><a href="#">空气/净水</a></li>
                    <li class="space"></li>
                    <li><a href="#">新奇特</a></li>
                    <li class="space"></li>
                    <li><a href="#">高端电器</a></li>
                </ul>
            </div>
        </div>
        <div class="box-bd">
            <ul class="tab-content">
                <li class="list-1 fl">
                    <ol>
                        <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>
                    </ol>
                    <h5>三星曲面电视</h5>
                    <p>抽奖送豪礼</p>
                    <img src="uploads/floor1_1.png">
                </li>
                <li class="list-2 fl">
                    <div class="title">
                        <p>烧水壶智能光控泡茶壶茶具套装</p>
                        <span>满299.00减40.00</span>
                    </div>
                    <img src="uploads/floor1_2.png" alt="茶壶">
                    <div class="circle">
                        <ul>
                            <li class="current"></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </li>
                <li class="list-3 fl">
                    <div class="top">
                        <h5>没满200减20元</h5>
                        <p>烘焙节1元抢购</p>
                        <img src="uploads/floor1_3-1.png" alt="烤箱">
                    </div>
                    <div class="bottom">
                        <h5>买乐视电视享钜惠</h5>
                        <p>送60个月会员</p>
                        <img src="uploads/floor1_3-2.png" alt="电视机">
                    </div>
                </li>
                <li class="list-4 fl">
                    <h5>8.20彩电宅购节</h5>
                    <p>65寸4K智能电视3799</p>
                    <img src="uploads/floor1_4.png" alt="彩电">
                </li>
                <li class="list-3 fl">
                    <div class="top">
                        <h5>消暑神器全场领券</h5>
                        <p>1元赢空调</p>
                        <img src="uploads/floor1_5-1.png" alt="空调">
                    </div>
                    <div class="bottom">
                        <h5>买乐视电视享钜惠</h5>
                        <p>送60个月会员</p>
                        <img src="uploads/floor1_5-2.png" alt="电扇">
                    </div>
                </li>
            </ul>
        </div>
        <div class="box-bottom">
            <img src="uploads/floor1.jpg" alt="">
        </div>
    </div>
<!-- 9、jiadian 家电模块 end -->
<!-- 10、tongxun 通讯模块 start -->
    <div class="w tongxun clearfix">
        <div class="box-hd">
            <h3>手机通讯</h3>
            <div class="tab-list">
                <ul>
                    <li><a href="#">热门</a></li>
                    <li class="space"></li>
                    <li><a href="#">品质优选</a></li>
                    <li class="space"></li>
                    <li><a href="#">新机尝鲜</a></li>
                    <li class="space"></li>
                    <li><a href="#">高性价比</a></li>
                    <li class="space"></li>
                    <li><a href="#">口碑推荐</a></li>
                    <li class="space"></li>
                    <li><a href="#">合约机</a></li>
                    <li class="space"></li>
                    <li><a href="#">手机卡</a></li>
                    <li class="space"></li>
                    <li><a href="#">店铺精选</a></li>
                    <li><a href="#">手机配件</a></li>
                </ul>
            </div>
        </div>
        <div class="box-bd">
            <ul class="tab-content">
                <li class="list-1 fl">
                    <ol>
                        <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>
                    </ol>
                    <h5>中兴A1 低至499元</h5>
                    <p>国民指纹，超6万好评</p>
                    <img src="uploads/floor2_1.png">
                </li>
                <li class="list-2 fl">
                    <div class="title">
                        <p>360 N4S限量版</p>
                        <span>1199元抢购</span>
                    </div>
                    <img src="uploads/floor2_2.png" alt="茶壶">
                    <div class="circle">
                        <ul>
                            <li class="current"></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </li>
                <li class="list-3 fl">
                    <div class="top">
                        <h5>Moto X极</h5>
                        <p>低至¥2999</p>
                        <img src="uploads/floor2_3-1.png" alt="烤箱">
                    </div>
                    <div class="bottom">
                        <h5>乐max2 限量秒杀</h5>
                        <p>每日1899秒</p>
                        <img src="uploads/floor2_3-2.png" alt="电视机">
                    </div>
                </li>
                <li class="list-4 fl">
                    <h5>G9青春版玫瑰金首发</h5>
                    <p>赢0元试用</p>
                    <img src="uploads/floor2_4.png" alt="彩电">
                </li>
                <li class="list-3 fl">
                    <div class="top">
                        <h5>荣耀V8 2K屏</h5>
                        <p>¥2799元</p>
                        <img src="uploads/floor2_5-1.png" alt="空调">
                    </div>
                    <div class="bottom">
                        <h5>vivo x7星空灰</h5>
                        <p>1元赢新机</p>
                        <img src="uploads/floor2_5-2.png" alt="电扇">
                    </div>
                </li>
            </ul>
        </div>
        <div class="box-bottom">
            <img src="uploads/floor2.jpg" alt="">
        </div>
    </div>
<!-- 10、tongxun 通讯模块 end -->
<!-- 11、diannao 电脑模块 start -->
    <div class="w diannao clearfix">
        <div class="box-hd">
            <h3>电脑办公</h3>
            <div class="tab-list">
                <ul>
                    <li><a href="#">热门</a></li>
                    <li class="space"></li>
                    <li><a href="#">电脑/平板</a></li>
                    <li class="space"></li>
                    <li><a href="#">潮流影音</a></li>
                    <li class="space"></li>
                    <li><a href="#">智能/外设</a></li>
                    <li class="space"></li>
                    <li><a href="#">DIY硬件</a></li>
                    <li class="space"></li>
                    <li><a href="#">电竞游戏</a></li>
                    <li class="space"></li>
                    <li><a href="#">办公/网络</a></li>
                    <li class="space"></li>
                    <li><a href="#">文具电教</a></li>
                    <li class="space"></li>
                    <li><a href="#">精选配件</a></li>
                </ul>
            </div>
        </div>
        <div class="box-bd">
            <ul class="tab-content">
                <li class="list-1 fl">
                    <ol>
                        <li><a href="#">SSD硬盘</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>
                    </ol>
                    <h5>电脑特惠直降3000</h5>
                    <p>游戏本6期免息</p>
                    <img src="uploads/floor3_1.png">
                </li>
                <li class="list-2 fl">
                    <div class="title">
                        <p>大牌相机低价抢</p>
                        <span>运动相机低至¥299</span>
                    </div>
                    <img src="uploads/floor3_2.png" alt="茶壶">
                    <div class="circle">
                        <ul>
                            <li class="current"></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </li>
                <li class="list-3 fl">
                    <div class="top">
                        <h5>平板新世界</h5>
                        <p>开启2IN1时代</p>
                        <img src="uploads/floor3_3-1.png" alt="烤箱">
                    </div>
                    <div class="bottom">
                        <h5>低价来袭</h5>
                        <p>机械键盘低至99元</p>
                        <img src="uploads/floor3_3-2.png" alt="电视机">
                    </div>
                </li>
                <li class="list-4 fl">
                    <h5>全场6期分期免息</h5>
                    <p>我和DIY有个约会</p>
                    <img src="uploads/floor3_4.png" alt="彩电">
                </li>
                <li class="list-3 fl">
                    <div class="top">
                        <h5>消暑神器全场领券</h5>
                        <p>1元赢空调</p>
                        <img src="uploads/floor3_5-1.png" alt="空调">
                    </div>
                    <div class="bottom">
                        <h5>潮流手配 尖叫来袭</h5>
                        <p>满99元减30元</p>
                        <img src="uploads/floor3_5-2.png" alt="电扇">
                    </div>
                </li>
            </ul>
        </div>
        <div class="box-bottom">
            <img src="uploads/floor3.jpg" alt="">
        </div>
    </div>
<!-- 11、diannao 电脑模块 end -->

样式实现：

/* 家电模块 */
.jiadian .box-hd,
.tongxun .box-hd,
.diannao .box-hd {
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-bottom: 2px solid #c81623;
}

.jiadian .box-hd h3,
.tongxun .box-hd h3,
.diannao .box-hd h3 {
    float: left;
    font-size: 18px;
    color: #c81623;
}

.jiadian .box-hd .tab-list ul,
.tongxun .box-hd .tab-list ul,
.diannao .box-hd .tab-list ul {
    float: right;
    margin-right: 9px;
}

.jiadian .box-hd li,
.tongxun .box-hd li,
.diannao .box-hd li {
    float: left;
}

.jiadian .box-hd .tab-list .space,
.tongxun .box-hd .tab-list .space,
.diannao .box-hd .tab-list .space {
    width: 1px;
    height: 12px;
    margin: 9px 14px;
    background-color: #999999;
}

.jiadian .box-bd .tab-content,
.tongxun .box-bd .tab-content,
.diannao .box-bd .tab-content {
    height: 360px;
}

.jiadian .box-bd .tab-content .list-1,
.tongxun .box-bd .tab-content .list-1,
.diannao .box-bd .tab-content .list-1 {
    width: 209px;
    height: 100%;
    text-align: center;
    background-color: #f9f9f9;
}

.jiadian .box-bd .tab-content .list-1 li,
.tongxun .box-bd .tab-content .list-1 li,
.diannao .box-bd .tab-content .list-1 li {
    float: left;
    width: 86px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin: 0 9px;
    border-bottom: 1px solid #ededed;
}

.jiadian .box-bd .tab-content .list-1 h5,
.tongxun .box-bd .tab-content .list-1 h5,
.diannao .box-bd .tab-content .list-1 h5 {
    display: inline-block;
    font-size: 18px;
    margin-top: 26px;
    color: #cb343d;
}

.jiadian .box-bd .tab-content .list-1 p,
.tongxun .box-bd .tab-content .list-1 p,
.diannao .box-bd .tab-content .list-1 p {
    font-size: 13px;
    font-weight: 600;
    color: #cb343d;
}

.jiadian .box-bd .tab-content .list-1 img,
.tongxun .box-bd .tab-content .list-1 img,
.diannao .box-bd .tab-content .list-1 img {
    margin-top: 10px;
}

.jiadian .box-bd .tab-content .list-2,
.tongxun .box-bd .tab-content .list-2,
.diannao .box-bd .tab-content .list-2 {
    width: 329px;
    height: 100%;
    background-color: #aed6d8;
}

.jiadian .box-bd .tab-content .list-2 .title,
.tongxun .box-bd .tab-content .list-2 .title,
.diannao .box-bd .tab-content .list-2 .title {
    margin: 38px 0 0 30px;
    font-size: 18px;
    color: #1d7584;
}

.jiadian .box-bd .tab-content .list-2 img,
.tongxun .box-bd .tab-content .list-2 img,
.diannao .box-bd .tab-content .list-2 img {
    margin: 30px 0 0 53px;
}

.jiadian .box-bd .tab-content .list-2 .circle,
.tongxun .box-bd .tab-content .list-2 .circle,
.diannao .box-bd .tab-content .list-2 .circle {
    width: 50px;
    height: 16px;
    margin: 15px auto;
}

.jiadian .box-bd .tab-content .list-2 .circle li,
.tongxun .box-bd .tab-content .list-2 .circle li,
.diannao .box-bd .tab-content .list-2 .circle li {
    float: left;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 6px;
    background-color: black;
    border-radius: 50%;
}

.jiadian .box-bd .tab-content .list-2 .circle .current,
.tongxun .box-bd .tab-content .list-2 .circle .current,
.diannao .box-bd .tab-content .list-2 .circle .current {
    background-color: #fff;
}

.jiadian .box-bd .tab-content .list-3,
.tongxun .box-bd .tab-content .list-3,
.diannao .box-bd .tab-content .list-3 {
    width: 220px;
    height: 100%;
    background-color: #ffffff;
}

.jiadian .box-bd .tab-content .list-3 div,
.tongxun .box-bd .tab-content .list-3 div,
.diannao .box-bd .tab-content .list-3 div {
    position: relative;
    height: 50%;
    padding: 25px 0 0 19px;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}

.jiadian .box-bd .tab-content .list-3 div h5,
.tongxun .box-bd .tab-content .list-3 div h5,
.diannao .box-bd .tab-content .list-3 div h5 {
    font-size: 16px;
}

.jiadian .box-bd .tab-content .list-3 div p,
.tongxun .box-bd .tab-content .list-3 div p,
.diannao .box-bd .tab-content .list-3 div p {
    font-size: 14px;
    color: #e82633;
}

.jiadian .box-bd .tab-content .list-3 div img,
.tongxun .box-bd .tab-content .list-3 div img,
.diannao .box-bd .tab-content .list-3 div img {
    position: absolute;
    right: 0;
    bottom: 0;
}

.jiadian .box-bd .tab-content .list-4,
.tongxun .box-bd .tab-content .list-4,
.diannao .box-bd .tab-content .list-4 {
    width: 221px;
    height: 100%;
    text-align: center;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    background-color: #ffffff;
}

.jiadian .box-bd .tab-content .list-4 h5,
.tongxun .box-bd .tab-content .list-4 h5,
.diannao .box-bd .tab-content .list-4 h5 {
    margin-top: 72px;
    font-size: 19px;
    font-weight: 500;
}

.jiadian .box-bd .tab-content .list-4 p,
.tongxun .box-bd .tab-content .list-4 p,
.diannao .box-bd .tab-content .list-4 p {
    color: #999999;
    font-size: 16px;
    margin-bottom: 82px;
}

.jiadian .box-bottom,
.tongxun .box-bottom,
.diannao .box-bottom {
    margin-top: 20px;
    margin-bottom: 28px;
}

六、热门疯抢

结构图：

实现思路：

a、大盒子 hot 设置版心，设置 311px的高，设置距离上边 30px。

b、1 号盒子 h5 标题设置高度163px

c、2 号盒子content 高281px 边框为1px

里面放 ul 包含 5个 li，每个li里面包含a>img，有p和span包裹文本
给 li 设置浮动
后四个小 li 又分为上下盒子，盒子里面左侧图片右侧文本

结构实现：

<!-- 12、hot 热门疯抢 start -->
    <div class="w hot">
        <h5 class="title">热门疯抢</h5>
        <div class="content">
            <ul>
                <li class="li-1">
                    <a href="#"><img src="uploads/hot_1.jpg" alt="VR眼镜"></a>
                    <p>暴风魔镜 小D 虚拟现实智能VR眼镜3</p>
                    <span>¥79.00</span>
                </li>
                <li class="li-2">
                    <div class="top">
                        <div class="left">
                            <a href="#"><img src="uploads/hot_2-1.jpg" alt="电源"></a>
                        </div>
                        <div class="right">
                            <h6>羽博 7800毫安 Z</h6>
                            <p>3 移动电源/充电</p>
                            <span>¥139.00</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <a href="#"><img src="uploads/hot_2-3.jpg" alt="美女"></a>
                        </div>
                        <div class="right">
                            <h6>2016夏季新款短</h6>
                            <p>袖镂空大V领蕾丝</p>
                            <span>¥128.00</span>
                        </div>
                    </div>
                </li>
                <li class="li-2">
                    <div class="top">
                        <div class="left">
                            <a href="#"><img src="uploads/hot_2-2.jpg" alt="音响"></a>
                        </div>
                        <div class="right">
                            <h6>羽博 7800毫安 Z</h6>
                            <p>3 移动电源/充电</p>
                            <span>¥139.00</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <a href="#"><img src="uploads/hot_2-4.jpg" alt="美女"></a>
                        </div>
                        <div class="right">
                            <h6>2016夏季新款短</h6>
                            <p>袖镂空大V领蕾丝</p>
                            <span>¥128.00</span>
                        </div>
                    </div>
                </li>
                <li class="li-2">
                    <div class="top">
                        <div class="left">
                            <a href="#"><img src="uploads/hot_2-1.jpg" alt="电源"></a>
                        </div>
                        <div class="right">
                            <h6>羽博 7800毫安 Z</h6>
                            <p>3 移动电源/充电</p>
                            <span>¥139.00</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <a href="#"><img src="uploads/hot_2-3.jpg" alt="大美女"></a>
                        </div>
                        <div class="right">
                            <h6>2016夏季新款短</h6>
                            <p>袖镂空大V领蕾丝</p>
                            <span>¥128.00</span>
                        </div>
                    </div>
                </li>
                <li class="li-3">
                    <div class="box">
                        <div class="left">
                            <a href="#"><img src="uploads/hot_3-1.jpg" alt="笔记本"></a>
                        </div>
                        <div class="right">
                            <a href="#"><img src="./uploads/pic1.jpg" alt="头像"></a>
                            <span>0807**</span>
                            <p>“高分辨率的屏幕用着和<br>&nbsp;&nbsp;&nbsp;台式机一样......”</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="left">
                            <a href="#"><img src="uploads/hot_3-2.jpg" alt="摄像头"></a>
                        </div>
                        <div class="right">
                            <a href="#"><img src="./uploads/pic2.jpg" alt="头像"></a>
                            <span>淹***鱼</span>
                            <p>“摄像头超清晰，拍出来<br>&nbsp;&nbsp;&nbsp;的图片是1......”</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
<!-- 12、hot 热门疯抢 end -->

样式实现：

/* 热门疯抢 */
.hot {
    margin: 30px auto;
    height: 311px;
    margin-top: 0;
}

.hot .title {
    height: 30px;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 400;
}

.hot .content {
    height: 281px;
    border: 1px solid #e5e5e5;
}

.hot .content li {
    float: left;
}

.hot .content .li-1 {
    width: 239px;
    height: 281px;
    border-right: 1px solid #e5e5e5;
}

.hot .content .li-1 img {
    margin: 40px 0 67px 40px;
}

.hot .content .li-1 p {
    margin: 0 0 10px 29px;
}

.hot .content .li-1 span {
    margin-left: 29px;
    font-size: 15px;
    font-weight: 600;
    color: #df3033;
}

.hot .content .li-2 {
    width: 219px;
}

.hot .content .li-2 div {
    float: left;
}

.hot .content .li-2 .top {
    width: 219px;
    height: 139px;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}

.hot .content .li-2 .left {
    height: 100%;
    line-height: 139px;
    margin: 0 10px;
}

.hot .content .li-2 .right h6 {
    margin-top: 22px;
    font-size: 12px;
    font-weight: 400;
}

.hot .content .li-2 .right p {
    font-size: 12px;
    margin-bottom: 3px;
}

.hot .content .li-2 .right span {
    font-size: 16px;
    color: #df3033;
}

.hot .content .li-2 .bottom {
    width: 219px;
    height: 139px;
    border-right: 1px solid #ededed;
}

.hot .content .li-3 .box {
    width: 301px;
    height: 140px;
}

.hot .content .li-3 .box .left {
    float: left;
    width: 110px;
    margin: 22px 0 0 22px;
}

.hot .content .li-3 .box .right {
    float: left;
    width: 160px;
    margin-top: 20px;
}

.hot .content .li-3 .box .right span {
    margin-left: 5px;
}

.hot .content .li-3 .box .right p {
    display: inline-block;
    width: 165px;
    height: 47px;
    padding-top: 7px;
    margin-top: 10px;
    font-size: 13px;
    background-color: #f8f8f8;
}

有一天你将破茧而出，成长得比别人期待的还要美丽，但这个过程会很痛很辛苦，有时候还会觉得灰心，面对汹涌而来的现实，觉得自己渺小无力，但这也是生活里的一部分，做好你现在能做的，然后相信一切都会好的。