接着上一篇博客继续制作，静态网页的搭建基本是完成了。
文章目录
1.底部模块制作
以footer标签包裹底部模块制作的部分，将底部模块分成三个部分。
服务模块制作（mod-service模块)
把四个图标所在的区域分为四个
- 标签,设置float样式以实现平行放置；
-
图标我引用了谷歌标签，在图标的css样式里增加float：left用于将图标和右边文字置于同一高度；
而右边的上下两行字体则分别用h4和p标签，分开设置样式便于区分；
html部分 <div class="mod_service"> <ul> <li> <i class="material-icons md-36">verified_user</i> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障，提供发票</p> </div> </li> <li> <i class="material-icons md-36">verified_user</i> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障，提供发票</p> </div> </li> <li> <i class="material-icons md-36">verified_user</i> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障，提供发票</p> </div> </li> <li> <i class="material-icons md-36">verified_user</i> <div class="service_txt"> <h4>正品保障</h4> <p>正品保障，提供发票</p> </div> </li> </ul> </div> css部分： footer{ height: 415px; background-color: #f5f5f5; padding-top: 30px; } .mod_service{ height: 80px; border-bottom: 1px solid #ccc; } .mod_service ul li{ float: left; width: 300px; height: 50px; /* background-color: pink; */ padding-left: 35px; } .mod_service ul li i{ float: left; width: 50px; height: 50px; font-size: 40px; color: red; margin-right: 0px; } .service_txt h4{ font-size: 14px; } .service_txt p{ font-size: 12px; }效果如图：
帮助模块制作（mod_help模块）
这个比较简单，用一个大盒子，设置底部边界，并设置左与上的padding值。
用dl>dt>dd的表格标签制作样式。
对于dt设置font-size,
多个dl模块则是复制粘贴，再对dl设置float值来使之浮于同一列。
最后一个dl模块用lastchild对其选择，并修改宽度，保持整齐。
html部分： <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="#">会员介绍</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> <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> <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> <dd><a href="#">联系客服</a></dd> </dl> <dl> <dt>帮助中心</dt> <dd> 品优购客户端 </dd> </dl> </div> css部分： .mod_help{ height: 185px; border-bottom: 1px solid #ccc; padding-top: 20px; padding-left: 50px; } .mod_help dl{ float: left; width: 200px; } .mod_help dl:last-child{ width: 90px; text-align: center; } .mod_help dl dt{ font-size: 16px; margin-bottom: 10px; }
版权信息模块（mod_copyright模块）
太简单了，直接贴代码。
html部分： <div class="mod_copyright"> <div class="links"> <a href="#">关于我们</a>| <a href="#">联系我们</a>|联系客服| 合作招商|商家帮助|营销中心| 手机京东|友情链接|销售联盟|京东社区| 风险监测|隐私政策|京东公益| </div> <div class="copyright"> Copyright © 2004 - 2021 京东JD.com 版权所有| 消费者维权热线：4006067733|经营证照<br> |(京)网械平台备字(2018)第00003号|营业执照 </div> </div> css： .mod_copyright{ text-align: center; padding-top: 20px; } .links{ margin-bottom: 15px; } .links a{ margin: 0 3px; } .copyright{ line-height: 20px; }
2.main主体模块制作
main模块单独使用一个css文件，因此另作导入。
<link rel="stylesheet" href="css/index.css">主体分割成一个大盒子包着两个小盒子，分别是焦点图和快报页面。
左侧焦点图设置float：left ，右侧的快报页面设置成float：right。
焦点图比较简单，主要看快报制作。
新闻快报模块
分为news新闻模块、lifeservice生活服务模块、和bragin特价商品模块。
bargain模块：
放张图片就可以了。
news模块：
分成头部以及主体部分
头部内又将标题和链接分开，一个左浮动，一个右浮动
主题部分用ul>li>a 把括号内的小标题置于标签里面加粗加大。
如果想要主题文字过长时在边界处显示省略号，增加三个css样式：
overflow: hidden; 隐藏越界文字
white-space: nowrap; 确保文字不会换行显示
text-overflow: ellipsis; 显示省略号
lifeservice模块：
ul>li*12
li标签加浮动
由于宽度不够，每行第四个li会由于浮动挤到下一行；
所以选择修改li的父标签ul的宽度，以装下四个li；
ul修改后出现了右边框溢出，所以在ul的父盒子里添加overflow:hidden，将溢出部分剪切。
html: <div class="w"> <div class="main"> <div class="focus"> <ul> <li> <img src="upload/foucs1.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 class="material-icons md-36">settings_cell</i> <p>话费</p> </li> 一模一样的li再复制12次就可以了 </div> <div class="bargain"> <img src="upload/bargain.jpg" alt=""> </div> </div> </div> </div> css: .main{ width: 980px; height: 455px; margin-left: 220px; margin-top: 10px; } .focus{ float: left; background-color: skyblue; width: 721px; height: 455px; } .newsflash{ float: right; width: 250px; height: 455px; background-color: palegreen; } .focus ul li img{ width: 721px; 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{ font-size: 14px; float: left; } .news-hd .more{ float: right; } .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; } .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; color: tomato; margin-top: 12px; } .bargain{ margin-top: 5px; } .bargain img{ width: 250px; height: 81px; }
推荐模块制作
用ul>li的框架，对
- 标签设置浮动使盒子同行显示
-
盒子间的灰色竖线可以使用伪类制作。
：after，content为空，设置长度和宽度。
由于最后一个盒子不需要在盒子右方设置灰色竖线，所以伪类前再加一个选择：
nth-child(-n+3)，选中第三个盒子及其之前的盒子。
html部分： <div class="w recom"> <div class="recom_hd"> <img src="upload/recom.png" alt=""> </div> <div class="recom_bd"> <ul> <li><img src="upload/recom_03.jpg" alt=""></li> <li><img src="upload/recom_03.jpg" alt=""></li> <li><img src="upload/recom_03.jpg" alt=""></li> <li><img src="upload/recom_03.jpg" alt=""></li> </ul> </div> </div> css部分： .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_bd{ float: left; } .recom_bd ul li{ position: relative; float: left; } .recom_bd ul li:nth-child(-n+3)::after{ content: ''; position: absolute; right: 0; top: 10px; width: 1px; height: 145px; background-color: #ccc; }
楼层区域制作
头部
<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> </ul> </div> </div> css： .box_hd { height: 30px; border-bottom: 2px solid #c81623; } .box_hd h3{ float:left; font-size:18px; color: #c81623; font-weight: 400; } .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; }主体
先将大盒子分成五个盒子，分别设置大小，再将图片放入。
图片间的灰色框架用border值设置，由于a包含有宽度盒子，一般要转为块元素，所以要加一句display:block。
html: <div class="w jiadian"> <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> </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="#">节能补贴</a></li> <li><a href="#">节能补贴</a></li> <li><a href="#">节能补贴</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="col_221"> <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="col_221"> <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> css: .box_bd { height: 361px; } .tab_list_item>div{ float: left; height: 361px; } .col_210 { width: 210px; background-color: #f9f9f9; } .col_210 ul { padding-left: 12px; } .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; } .col_221 { width: 221px; border-right: 1px solid #ccc; } .col_219 { width: 219px; } .bb { /* a包含有宽度盒子，一般要转为块元素 */ display: block; border-bottom: 1px solid #ccc; }
其他楼层经过复制修改图片即可。
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
