品优购项目学习记录02-main主体盒子搭建，推荐模块

一、main主体盒子搭建

1.main盒子宽度为980像素，位置距离左边220px(margin-left)，给高度就不用清除浮动
2.main里面包含左侧盒子，左浮动，focus焦点图模块
3.main里面包含右侧盒子，右浮动，newsflash新闻快报模块

1.1 newsflash新闻快报模块

• 1号盒子为news新闻模块 高度为165px
• 2号盒子为lifeservice 生活服务模块 高度为209px
• 3号盒子为bargain特价商品

1.1.1 news新闻模块

• 注意：这里我们分为上下两个模块，但是两个模块都用div
• 1号盒子news-hd新闻头部模块，给一个高度和下边框
• 2号盒子news-bd新闻主题部分，里面包含ul和li还有链接

news-hd模块
html

			<div class="news-hd">
                    <h5>品优购快报</h5>
                    <a href="#" class="more">更多</a>
                     </div>

css

/* 主模块侧边新闻栏 */
.main .newsflash .news .news-hd {
    width: 250px;
    height: 35px;
    border: 2px solid #e4e4e4;
    border-bottom: 2px dashed #e4e4e4;
}
.main .newsflash .news .news-hd h5 {
    float: left;
    font-size: 16px;
    padding-left: 14px;
    padding-top: 10px;
}
.main .newsflash .news .news-hd a {
    float: right;
    font-size: 12px;
    padding-top: 10px;
    padding-right: 15px;
}
/* 伪类表示法 */
.main .newsflash .news .news-hd a::after {
    content: '\e920';
    font-family: 'icomoon';
    margin-left: 10px;
}

news-bd模块
html

<div class="news-bd">
                    <ul>
                        <li><a href="#"><h5>【特惠】</h5>备战开学季 全民半价购数码</a></li>
                        <li><a href="#"><h5>【公告】</h5>品优稳占家电网六成份额</a></li>
                        <li><a href="#"><h5>【特惠】</h5>百元中秋全品类礼券限量领</a></li>
                        <li><a href="#"><h5>【公告】</h5>上品优生鲜 享阳澄湖大闸蟹</a></li>
                        <li><a href="#"><h5>【特惠】</h5>每日享折扣品优 品质游</a></li>
                    </ul>
                </div> 

css

.main .newsflash .news .news-bd {
    width: 250px;
    height: 130px;
    border: 2px solid #e4e4e4;
    border-top: none;
}
.main .newsflash .news .news-bd ul li {
    margin-left: 15px;
    height: 25px;
    padding-top: 10px;

}
.main .newsflash .news .news-bd ul li h5 {
    float: left;
}

1.1.2 lifeservice生活服务模块

注意，这个地方的表格是用li做的，并不是使用表格来实现的。做网页一般不会用到表格，表格一般是内页详情里

1.盒子里面的图片我们是采用精灵图进行制作的，在表格中给定一个盒子，精灵图作为该盒子的背景图。
2.盒子中的文字使用段落标签来制作

以下展示的是一个表格的做法
html部分

<li>
  <i></i>
  <p>话费</p>
</li>

css部分

.main .newsflash .lifeservice ul li {
    float: left;
    width: 62px;
    height: 70px;
    border-right:1px solid #e4e4e4;
    border-bottom:1px solid #e4e4e4;
    text-align: center;
    padding-top: 12px;
}
.main .newsflash .lifeservice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    background: url(../images/icons.png) no-repeat -19px -15px;

}

1.1.3 bargain模块

HTML

<div class="bargain"><img src="images/宋钟基.PNG" alt="" width="250" height="75"></div>

css

.main .newsflash .bargain {
    width: 250px;
    height: 80px;
}
.main .newsflash .bargain img {
    margin-top: 5px;
}

二、推荐模块

1.大盒子recom推荐模块recommend
2.里面包含2个盒子，浮动即可
3.1号盒子recom-hd
4.2号盒子recom-bd，注意里面的小竖线

竖线的制作方法

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