《芜湖日报报业集团》网站制作实例
集团类的网站设计要突出集团的大气的气概，可以使用如天空，海洋等等有气势和开阔性的素材。色彩要干净整洁，并且要稳重。如图12-1是我们本章练习的最终效果。
所用到的知识点也是我们之前学过的导航列表、新闻列表、浮动布局等。
如图12-2-1所示是本例的最终效果，主要包括“图片新闻”、“新闻速递”、“通知公告”等栏目。
图12-2-1
页面分为头部、导航、广告、主体、友情链接及底部几个部分。其中，头部和导航的背景图片会自动延伸。中间主体部分分为左中右三列。分别是“图片新闻”“新闻速递”和“通知公告”三个栏目。为了获得较好的用户体验，我们在导航做了悬停效果。
整体布局
整个页面大体框架不算复杂，主要包括头部、导航条、广告、主体的左、中、右、友情链接以及最下端的版权部分，如图12-2-2所示：
图12-2-2
<div id="header"></div>
<div id="nav"></div>
<div id="banner"></div>
<div class="main clearfix">
<div></div>
<div></div>
<div></div>
</div>
<div id="friend"></div>
<div id="footer"></div>
本结构从上到下分别是header、nav、banner、main、friend、footer六个区块，他们都用id来表示，在main区块里创建了imgNews、news、sidebar三个区块，里面的这三个区块我们就用class来表示。
在header、nav、banner、main、friend、footer这几个外层区块中，除了nav导航区块不设宽以外，其他几个均设置为1000px的宽。分别给他们设置margin:0 auto;让这些区块居中显示。
具体布局样式如下：
*{ margin:0; padding:0;}
.clearfix:after{ content:""; clear:both; display:block; }
.clearfix{ *zoom:1;}
#header{width:1000px; border:#000 solid 1px; height:85px; margin:0 auto;}
#nav{ height:40px; border:#000 solid 1px;}
#banner{width:1000px; height:314px; margin:0 auto; border:#000 solid 1px;}
.main{width:1000px; margin:0 auto; border:#000 solid 1px;}
.imgNews{ width:343px; height:400px; border:#000 solid 1px; float:left; margin-right:20px; }
.news{width:383px; height:400px; border:#000 solid 1px; float:left; }
.sidebar{width:230px;height:400px; border:#000 solid 1px; float:right; }
#friend{width:1000px; height:40px; margin:0 auto; border:#000 solid 1px;}
#footer{ height:80px; margin:0 auto; width:1000px; border:#000 solid 1px;}
得到如下图12-2-3所示效果：
图12-2-3
部署头部部分
本页面的标题部分，是本页面的主题，我们当然要采用h1来表示：
<div id="header">
<h1>芜湖日报报业集团</h1>
</div>
具体样式如下：
#header{
background:url(../images/headerBg.gif) repeat-x;
}
#header h1{
width:1000px;
height:85px;
margin:0 auto;
background:url(../images/logo.gif) no-repeat left;
text-indent:-9999px;
}
【代码解析】首先，我们要先为header定义灰色渐变的背景图，然后我们为h1设置宽高并设置居中，采用图片替换的方法，将h1部分的文字移出画面，然后给其定义背景，
本区块比较简单，设置完成之后预览效果如下图12-2-4所示：
图12-2-4
接下来的导航部分，我们在第六章已经做过本项目的导航练习，在此不在赘述。
图片新闻区块
图片新闻区块部分，主要由一个标题hd和一个列表组成。
<div>
<div><h2>图片新闻<span>picture</span></h2></div>
<ul>
<li>
<a href="#"><img src="images/tp1.jpg" /></a>
<h3>走进身边的榜样</h3>
<p>眼下正值三月学雷锋月，我市中小学广泛组织学生开展学雷锋活动。市聋哑职业学校学生近日走进镜湖区<a href="#">更多</a></p>
</li>
<li>
<a href="#"><img src="images/tp2.jpg" /></a>
<h3>工地是否文明施工 "业绩档案"</h3>
<p>城市大建设提速，建设工地遍地开花，却往往随之带来市容环境的无序和一定程度的污染。记者近日从鸠<a href="#">更多</a></p>
</li>
</ul>
</div>
由于我们把h1分配给了页面中最重要的logo部分。那么剩下的，图片新闻、新闻速递、通知公告这三个标题部分我们自然用h2来表示，在h2里的灰色部分的英文单词，我们用span框起来，以便于我们对其设置样式。
图12-2-5
长细线部分，是给.hd定义一个一像素的下边框实现的效果，而短灰线部分是通过给h2一个宽度，显示下边框实现。这样就完美的实现了长短灰线的结合效果。然后在设置一下h2以及h2里的span的样式就很容易的得到了图12-2-5中的效果。
具体样式如下，这里要注意h2外部的.hd区块前面不能加上父元素名，否则后两个区块不能复用。
.hd{border-bottom:#CCC solid 1px; margin-bottom:10px;}
.hd h2{font-size:16px; color:#C00; border-bottom:#ccc solid 1px; width:130px; line-height:30px;}
.hd h2 span{color:#999; font-family:Arial; font-weight:normal; margin-left:5px;}
接下来便是列表内容部分，此部分也是列表，只是稍微复杂了一点，在每一个li里首先由有一个图片，然后是标题h3，最后是段落p。
此区块完整样式如下：
.imgNews{
width:343px;
/*border:#F00 solid 1px;*/
float:left;
}
.news{
width:383px;
/*border:#F00 solid 1px;*/
float:left;
margin-left:20px;
}
.imgNews img{
border:#CCC solid 1px;
padding:4px;
float:left;
margin-right:10px;
}
.imgNews h3{
font-size:12px;
}
.imgNews p{
font-size:12px;
color:#666;
line-height:23px;
text-indent:2em;
}
.imgNews ul li{
margin-bottom:10px;
/*display:inline-block;*/
}
.imgNews p a{
color:#F00;
}
利用给图片添加左浮动，来使h3和p段落靠到图片的右侧。同时我们又为图片添加了margin-right:10px;来实现图片与文字直接流出空隙的效果。
部署新闻速递
新闻速度[A1] 部分也是我们第六章练习过的新闻列表，和我们之前所做的练习稍微有一点不同的是，每条新闻后面有一个灰色的日期，如图12-2-6
图12-2-6
<div>
<div>
<h2>新闻速递<span>news</span></h2>
</div>
<ul>
<li><span>2013/09/16</span><a href="#">全方位"留人"为人才建设优化软环境 </a></li>
<li><span>2013/09/16</span><a href="#">镜头中的"中国电缆之乡"</a></li>
<li><span>2013/09/16</span><a href="#">全方位"留人"为人才建设优化软环境 </a></li>
<li><span>2013/09/16</span><a href="#">镜头中的"中国电缆之乡"</a></li>
<li><span>2013/09/16</span><a href="#">全方位"留人"为人才建设优化软环境 </a></li>
<li><span>2013/09/16</span><a href="#">镜头中的"中国电缆之乡"</a></li>
<li><span>2013/09/16</span><a href="#">全方位"留人"为人才建设优化软环境 </a></li>
<li><span>2013/09/16</span><a href="#">镜头中的"中国电缆之乡"</a></li>
</ul>
</div>
我们在结构中将时间利用span来表示，并且放到了每条新闻之前。这样做的目的是为了防止时间因右浮动后出现换行错位。具体css代码如下：
.news li{
line-height:28px;
border-bottom:#CCC dashed 1px;
padding-left:13px;
background:url(../images/sj_tb.gif) no-repeat left;
}
.news li a{
font-size:12px;
color:#000;
}
.news li a:hover{ color:#C00;}
.news li span{
float:right;
color:#999;
font-size:12px;
}
部署通知公告部分
此部分主要是一个新闻列表加几个图片，如图12-2-7
图12-2-7
<div>
<div>
<h2>通知公告<span>notice</span></h2>
</div>
<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>
</ul>
<div>
<a href="#"><img src="images/tb1.gif" /></a>
<a href="#"><img src="images/tb2.gif" /></a>
<a href="#"><img src="images/tb3.gif" /></a>
<a href="#"><img src="images/tb4.gif" /></a>
</div>
</div>
本区块里上部也是一个新闻列表，和前面的“新闻速递”相比，只是前面的背景图标不同。为了便于样式控制，我们将服务部分的四个图片链接放到了一个sever的div里。具体CSS代码如下：
.sidebar ul{
margin-bottom:10px;
}
.sidebar li{
border-bottom:#CCC dotted 1px;
background:url(../images/dot2.gif) no-repeat left;
padding-left:15px;
}
.sidebar a{
font-size:12px;
line-height:28px;
color:#000;
}
.sidebar img{
border:0;
display:inline;
}
下面的友情链接以及底部版权区块，样式设置非常简单，在此不在赘述。你可以先不要看源码，先自己做一遍试试看。
