一、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;
}