传统企业站开发 - 模块开发（二）
上周我们讲解了页面模块的制作，详情可见：传统企业站开发 - 模块开发，我们到底如何更好的实现模块的制作，小编这边继续给大家举一个例子来进行讲解。那今天我们为大家讲解下页面中的信息列表模块又是如何制作的。
本文内容概要：
1 模块分析&标签选择
2 列表模块结构搭建
3 实现列表模块制作
4 模块开发视频讲解
5 课后作业
一、模块分析&标签选择
如上图，是我们之前那个页面中的信息列表模块，我们发现制作这个模块并不难，只是对于底部的那条虚线是如何消失的有点疑惑。
在页面制作开发中，我们可能会有很多种方法来进行实现，例如：单独给最后一条列表信息设置一个类名。这个方法应该是大家会想到的最简单的办法，那不禁要问了，难道我们真的是这样去做的吗？答案当然是否定。
既然不是用添加类名处理，那到底要怎么做呢？先给大家普及一个知识点吧，我们知道类似于这种新闻标题在页面中的展示是会经常发生变化的，那这个变化正是我们后台数据的一个体现（实时性数据交互）。倘若这时候我们后台人员不知道我们页面可以展示几条消息（当前页面展示的是6条），而后台数据传了7条过来，我们就会很尴尬的发现，如果是用类名去处理这条边框的话，我们的第6条底部边框是消失了，但是第7条仍然会有一条边框存在，所以这时候这样的操作对于页面的扩展性就显得非常的不好。
那为了很好的处理这块内容，小编今天为大家介绍了另外一种方法，一起来看看吧！
二、列表模块结构搭建
首先第一件事仍然是结构的搭建，这点我们直接选用ul~li来制作即可，结构搭建代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>H5course</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="wrap">
<div class="header">
</div>
<div class="nav">
</div>
<div class="main">
<div class="bigpic">
</div>
<div class="manage">
</div>
<div class="message"></div>
<div class="about indexcom">
</div>
<div class="ensure indexcom">
</div>
<div class="boater indexcom">
</div>
<div class="goods indexcom">
</div>
<div class="news">
<div class="com-black">
<h2>最新动态</h2>
<a href="">More</a>
</div>
<ul>
<li>
<a href="">
<strong>HTML5学堂是一个便于大家学习的网站</strong>
<span></span>
<em>2016-06-24</em>
</a>
</li>
<li>
<a href="">
<strong>HTML5学堂是一个便于大家学习的网站</strong>
<span></span>
<em>2016-06-24</em>
</a>
</li>
<li>
<a href="">
<strong>HTML5学堂是一个便于大家学习的网站</strong>
<em>2016-06-24</em>
</a>
</li>
<li>
<a href="">
<strong>HTML5学堂是一个便于大家学习的网站</strong>
<em>2016-06-24</em>
</a>
</li>
<li>
<a href="">
<strong>HTML5学堂是一个便于大家学习的网站</strong>
<em>2016-06-24</em>
</a>
</li>
<li>
<a href="">
<strong>HTML5学堂是一个便于大家学习的网站</strong>
<em>2016-06-24</em>
</a>
</li>
</ul>
</div>
<div class="contact">
</div>
</div>
<div class="copyright">
</div>
</div>
</body>
</html>三、实现列表模块制作
结构实现了之后，我们要开始书写相应的样式了，这时候我们会发现还是跟以前一样书写，唯一要注意的是对于列表项信息的处理，这时候我们需要对父级设置overflow:hidden，然后利用margin负值进行实现，具体的代码实现如下：
<style type="text/css">
.wrap {
width: 980px;
height:1046px;
margin: 0 auto;
background: url("images/index_bac.jpg") 0 0 repeat;
}
.header {
height: 65px;
border-top: 7px solid #000;
background: #fff;
}
.nav {
width: 892px;
height: 34px;
margin: 0 auto;
padding: 4px 0 0 88px;
background: url("images/nav_bac.jpg") 0 0 repeat-x;
}
.main {
width: 960px;
height: 817px;
padding: 10px;
}
/*尾部*/
.copyright {
width: 960px;
height: 60px;
margin: 0 auto;
padding-top: 28px;
background-color: #044b55;
}
.news {
float: left;
width: 722px;
height: 214px;
padding: 5px;
}
.bigpic,
.manage,
.message,
.about,
.ensure,
.boater,
.goods,
.news,
.contact {
background-color: #fff;
}
/*学堂展示模块上部分制作*/
.com-black {
height: 28px;
padding: 0 10px 0 25px;
background: #303338 url("images/icon.png") 0 center no-repeat;
line-height: 28px;
color: #fff;
border-radius: 3px;
}
.com-white {
height: 28px;
padding: 0 10px 0 25px;
background: url("images/icon.png") 0 center no-repeat;
line-height: 28px;
border-radius: 3px;
}
.com-black h2 {
float: left;
height: 28px;
font-weight: bold;
}
.com-black a {
float: right;
height: 28px;
color: #fff;
}
/*最新动态*/
.news ul {
overflow: hidden;
margin: 6px 0 -1px 0;
padding: 0 8px;
height: 173px;
}
.news li {
float: left;
width: 100%;
height: 28px;
border-bottom: 1px dotted #333;
line-height: 28px;
background: url("images/icon.png") -11px 0 no-repeat;
}
.news li a {
display: block;
padding-left: 17px;
height: 28px;
}
.news li em {
float: right;
padding-right: 4px;
}
.news li strong {
float: left;
overflow: hidden;
height: 28px;
font-weight: normal;
/*max-width: 585px;*/
/*_width: 585px;*/
}
.news li span {
float: left;
width: 24px;
height: 16px;
background: url("images/hot.png") 0 4px no-repeat;
}
</style>对应的代码效果图如下：
四、模块开发视频讲解
为了让大家能够更好的掌握页面的开发，小编在这边给大家提供了一个HTML5学堂 - 利利录制的视频，由于受到各种因素的影响，视频的声音可能有时候不是很清晰，请大家谅解。
模块开发（下）
五、课后作业
参照原始图，完成整个页面的构建，制作的参考效果如下：
HTML5学堂小编：祥辉（耗时6.5h），欢迎大家沟通交流~~~
下周我们将继续于周一为大家分享基础知识方面的HTML+CSS，下期的主要内容为：SEO与后台考虑。