这次就结合上两次的学习写个小例子
一个新闻页面
这次写个新闻页面，是新华社的一份有关记者问答的新闻
结构分析
打开页面，是一个单列定宽单列自适应的两列页面结构，左侧为新闻内容区域，右侧为侧边栏。在左侧的新闻内容区域从上至下又依次可分为新闻标题，新闻日期，新闻图片，图片说明，新闻内容，相关新闻链接和作者信息。在右侧侧边栏，又可分为图片新闻，广告，视频新闻。
HTML页面框架
结构分析清楚了，页面结构就很容易写出来了
<!DOCTYPE html>
<html>
<head>
<title>新闻</title>
</head>
<body>
<div id="header">这里是头部</div>
<div id="container">
<div class="mainBox">
<div class="content">
<div class="article">
<h1>国防部新闻局就美方质疑我用军机赴永暑礁运送重病工人答记者问</h1>
<div class="artContent">
<div class="info"> <!-- 原网页在来源处没有超链接 -->
<span>2016年04月19日 19:12:46</span><span> 来源： 国防部网</span>
</div>
<div class="newsImg">
<p><img src="images/news1.jpg"></p>
<p>4月17日，海军巡逻机转运重病工人抵达三亚凤凰机场。当日，一架正在南海执行空中巡逻任务的海军巡逻机紧急飞赴南沙，降落在永暑礁机场，将李万美等3名重病工人转运至海南三亚425医院接受救治。新华社发（高宏伟 摄）</p>
</div>
<div class="newsContent">
<p class="spec">问：据美国有线新闻网（CNN）报道，针对中方派军机赴南沙永暑礁运送三名重病工人，美国国防部发言人在回应媒体问询时表示，注意到此次中方称之为人道主义救援的行动，但不清楚中方为何使用军机而不是民用飞机。同时，美方还表示会进一步要求中国不在永暑礁部署军机。请问对此有何评论？</p>
<p class="spec">答：全心全意为人民服务是中国人民解放军的根本宗旨。在危急时刻，全力救助人民群众是我军的优良传统和一贯做法。</p>
<p>与此形成鲜明对比的是，在人的生命危急之时，美方却还在质疑什么军机民机。我们不禁要问，如果美国民众在美国领土上突发疾病，美军是不是会袖手旁观？</p>
<p>需要强调的是，中国对南沙群岛及其附近海域拥有无可争辩的主权。相关岛礁建设和防卫设施部署都是中国主权范围内的事，美国无权指手画脚。</p>
</div>
</div>
</div>
<div class="newsRec">
<p><img src="images/news2.jpg"></p>
<p><a href="">海军派巡逻机赴南沙永暑礁转运重病工人</a></p>
<p><a href="">我国南沙永暑礁新建机场试飞成功</a></p>
</div>
<div class="author">
<p><a href="">【纠错】</a> [责任编辑: 雷东瑞 ] </p>
</div>
</div>
</div>
<div class="sideBox">
<div class="imgRec">
<div class="title">
<h2>炫图推荐</h2>
<a href="#">进入频道</a>
</div>
<div class="listPic">
<ul>
<li>
<div class="imgWrapper">
<img src="images/news3.jpg" /><span class="text">走进震后的日本熊本</span>
</div>
</li>
<li>
<div class="imgWrapper">
<img src="images/news4.jpg" /><span class="text">用玻璃渣改装玛莎拉蒂</span>
</div>
</li>
<li>
<div class="imgWrapper">
<img src="images/news5.jpg" /><span class="text">全球惊为天人的大胆儿童</span>
</div>
</li>
<li>
<div class="imgWrapper">
<img src="images/news6.jpg" /><span class="text">揭全球最神秘女人</span>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="ad">
<img src="images/news7.jpg">
</div>
<div class="listVideo">
<div class="title">
<h2>视频推荐</h2>
<a href="#">进入频道</a>
<ul>
<li>
<div class="videoWrap">
<a href="">浙江多地现“日晕”奇观</a><img src="images/news8.jpg">
</div>
</li>
<li>
<div class="videoWrap">
<a href="">泰国现罕见生物</a>
</div>
</li>
<li>
<div class="videoWrap">
<a href="">暴风雨袭击美国休斯敦</a>
</div>
</li>
<li>
<div class="videoWrap">
<a href="">虚拟现实技术直播手术</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="footer">这里是底部</div>
</body>
</html>
未添加任何CSS样式的部分效果如下：
为页面添加CSS样式
HTML已经写好，下面就开始装饰它。
先把整体布局添加好。
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#header,#footer{
width: 100%;
height: 30px;
background-color: #999;
color: #FFF;
text-align: center;
}
#container{
width: 80%;
margin: auto;
}
.mainBox{
float: left;
width: 100%;
}
.mainBox .content{
margin-right: 330px;
}
.sideBox{
float: left;
width: 300px;
margin-left: -300px;
}
#footer{
clear: both;
}
</style>
这时的效果如下：
下一步就是修饰每一个细节部分
首先是左侧新闻内容区域
.artContent{
padding: 10px;
}
h1{
font:26px/1.5 "微软雅黑";
font-weight: normal;
text-align: left;
padding:2px 0;
}
.info{
margin-bottom: 15px;
}
.info span{
font-size: 14px;
color: #8d8d8d;
}
.newsImg img{
display: block;
width: 100%;
}
.newsImg p{
font: 16px/1.5 "楷体";
color: rgb(0,0,128);
margin: 10px 0;
text-indent: 2em;
}
.newsContent p{
font: 16px/2 "宋体";
color: #393939;
margin-bottom: 10px;
text-indent: 2em;
}
.spec:first-letter{
font-weight: bold;
}
.newsRec img{
display: block;
margin-bottom: 40px;
}
.newsRec p{
margin-bottom: 20px;
}
.newsRec p a{
font-size: 16px;
font-weight: bold;
color: rgb(0,0,128);
text-decoration: none;
}
.newsRec p a:hover{
text-decoration: underline;
}
.author{
font-size: 14px/1 "宋体";
text-align: right;
color: #999;
margin-bottom: 20px;
}
.author a{
color: #8a0000;
text-decoration: none;
}
.author a:hover{
text-decoration: underline;
}
效果如下：
下面开始给右侧侧边栏添加样式
.imgRec{
padding: 10px 0;
}
.title{
height: 40px;
line-height: 40px;
position: relative;
text-align: right;
border-bottom: 1px solid #2d2d2d;
margin-bottom: 10px;
vertical-align: middle;
}
.imgRec .title h2{
position: absolute;
top: 0;
left: 0;
font:16px "微软雅黑";
color: #383838;
line-height: 40px;
}
.imgRec .title a{
font: 12px "宋体";
color: #a6a6a6;
text-decoration: none;
}
.listPic ul{
width: 306px;
list-style: none;
}
.listPic li{
float: left;
position: relative;
width: 145px;
height: 109px;
margin: 0 6px 6px 0;
border: 1px solid #e5e5e5;
}
.listPic li img{
display: block;
width: 145px;
height: 109px;
}
.listPic li span {
position: absolute;
left: 0;
bottom: 0;
zoom: 1;
filter:alpha(opacity=60);
opacity:0.6;
width:100%;
background: #000;
color:#fff;
font:13px/1.8 "宋体";
text-align: center;
}
.clear{
clear: both;
}
.ad{
margin-top: 15px;
}
.listVideo li{
list-style: none;
text-align: left;
}
.listVideo .title li a{
font:14px "宋体";
text-decoration: none;
color: #333;
padding-left: 25px;
background: url(images/news9.jpg) no-repeat left center;
}
.videoWrap img{
width: 300px;
height: 170px;
}
效果如下图：
OK！搞定 小demo可以在这里找到 JavaScript的相关代码和操作会在JavaScript的文章中补上