div+css综合案例
实验一基于HTML+CSS的新闻网站首页实现
一、实验目的
1． 了解和掌握HTML基本标签的用法
2. 了解和掌握网页布局（包括盒模型和样式表CSS）
3. 了解和掌握基本控件标签的用法
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境，采用写字板和IE浏览器即可完成HTML+CSS的静态网页制作，也可选用FrontPage、DreamWeaver等静态网页开发工具进行实验。测试环境采用IE浏览器即可。关于HTML+CSS的静态网页制作的详细细节见课件或相关文献。
三、实验内容
在掌握课堂讲授的HTML+CSS静态网页制作的基础上，参考课件中的新闻网站网站的范例，要求实现该网站的首页，首页包含的内容包：
- 新闻网站首页头部（header）；
- 新闻网站首页底部（footer）；
- 新闻网站首页左侧导航栏（sidebar）；
- 新闻网站首页新闻导航；
- 新闻网站首页右侧图片新闻；
新闻网页首页的具体外观见下图。
MyHtml.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>新闻中国</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="my.css" type="text/css"></link>
</head>
<body>
<div class="top">
<div class="login">
登录名 <input type="text"/>
密 码<input type="password"/>
<span><input type="submit" value="登录"/></span>
</div>
<div class="google"></div>
</div>
<div class="title">
<div class="logo"></div>
<div class="picture"><img src="../images/a_b01.gif" width=800px></img></div>
</div>
<div class="news">
<div class="china">
<img src="../images/title_1.gif" width="157px"/><br>
<a href="#">重庆涉黑富豪黎强夫妇庭审</a><br>
<a href="#">答辩言辞相互矛盾</a><br>
<a href="#">发改委：4万亿投资计划不会挤占民间投资空间</a><br>
<a href="#">河南两个乡镇政绩报告内容一致引关注</a><br>
</div>
<div class="international">
<img src="../images/title_2.gif" width="157px"></img><br>
<a href="#">日本首相鸠山首次全面阐述新政府外交政策</a><br>
<a href="#">黎巴嫩以色列再次交火互射炮弹</a><br>
<a href="#">伊朗将于30日前就核燃料供应方案作出答复</a><br>
<a href="#">与基地有关组织宣称对巴格达连环爆炸负责</a><br>
</div>
<div class="entertainment">
<img src="../images/title_3.gif" width="157px"></img><br>
<a href="#">施瓦辛格启动影视业回迁计划 推动加州经济复苏</a><br>
<a href="#">《沧海》导演回应观众质疑 自信能超越《亮剑》</a><br>
<a href="#">《海角七号》新片开机 吴宇森等出席</a><br>
<a href="#">《四大名捕》敦煌热拍 八主演飚戏火花四溅</a><br>
</div>
</div>
<div class="classfiynews">
<div class="newstop"><img src="../images/class_type.gif" width="100px"></img></div>
<div class="newsbottom">
<div class="text">
<div class="texttop">
<a href="#">国内</a>
<a href="#">国际</a>
<a href="#">军事</a>
<a href="#">体育</a>
<a href="#">娱乐</a>
<a href="#">社会</a>
<a href="#">财经</a>
<a href="#">科技</a>
<a href="#">健康</a>
<a href="#">汽车</a>
<a href="#">教育</a>
<p><a href="#">房产</a>
<a href="#">家居</a>
<a href="#">旅游</a>
<a href="#">文化</a>
<a href="#">其他</a> </p>
</div>
<div class="textbottom">
<hr>
<ul>
<li><div><a href="#">彭丽媛出席纪念柴可夫斯基俄罗斯歌剧晚会(图)</a><div class="style">11-19 23:58</div></div></li>
<li><div><a href="#">习近平主席向第三届阿拉伯－非洲峰会致贺词</a><div class="style">11-19 23:43</div></div></li>
<li><div><a href="#">习近平同伊朗总统鲁哈尼通电话</a><div class="style">11-19 23:34</div><br/></div></li>
<li><div><a href="#">中科院院长白春礼：以批判性思维教育培养创新人才</a><div class="style">11-19 23:23</div><br/></div></li>
<li><div><a href="#">中国北方海区冬季将完成582座灯浮标更换或撤除</a><div class="style">11-19 23:11</div><br/></div></li>
</ul>
<ul>
<li><div><a href="#">彭丽媛出席纪念柴可夫斯基俄罗斯歌剧晚会(图)</a><div class="style">11-19 23:58</div><br/></div></li>
<li><div><a href="#">习近平主席向第三届阿拉伯－非洲峰会致贺词</a><div class="style">11-19 23:43</div><br/></div></li>
<li><div><a href="#">习近平同伊朗总统鲁哈尼通电话</a><div class="style">11-19 23:34</div><br/></div></li>
<li><div><a href="#">中科院院长白春礼：以批判性思维教育培养创新人才</a><div class="style">11-19 23:23</div><br/></div></li>
<li><div><a href="#">中国北方海区冬季将完成582座灯浮标更换或撤除</a><div class="style">11-19 23:11</div><br/></div></li>
</ul>
<ul>
<li><div><a href="#">彭丽媛出席纪念柴可夫斯基俄罗斯歌剧晚会(图)</a><div class="style">11-19 23:58</div><br/></div></li>
<li><div><a href="#">习近平主席向第三届阿拉伯－非洲峰会致贺词</a><div class="style">11-19 23:43</div><br/></div></li>
<li><div><a href="#">习近平同伊朗总统鲁哈尼通电话</a><div class="style">11-19 23:34</div><br/></div></li>
<li><div><a href="#">中科院院长白春礼：以批判性思维教育培养创新人才</a><div class="style">11-19 23:23</div><br/></div></li>
<li><div><a href="#">中国北方海区冬季将完成582座灯浮标更换或撤除</a><div class="style">11-19 23:11</div><br/></div></li>
</ul>
<ul>
<li><div><a href="#">彭丽媛出席纪念柴可夫斯基俄罗斯歌剧晚会(图)</a><div class="style">11-19 23:58</div><br/></div></li>
<li><div><a href="#">习近平主席向第三届阿拉伯－非洲峰会致贺词</a><div class="style">11-19 23:43</div><br/></div></li>
<li><div><a href="#">习近平同伊朗总统鲁哈尼通电话</a><div class="style">11-19 23:34</div><br/></div></li>
<li><div><a href="#">中科院院长白春礼：以批判性思维教育培养创新人才</a><div class="style">11-19 23:23</div><br/></div></li>
<li><div><a href="#">中国北方海区冬季将完成582座灯浮标更换或撤除</a><div class="style">11-19 23:11</div><br/></div></li>
</ul>
<ul>
<li><div><a href="#">彭丽媛出席纪念柴可夫斯基俄罗斯歌剧晚会(图)</a><div class="style">11-19 23:58</div><br/></div></li>
<li><div><a href="#">习近平主席向第三届阿拉伯－非洲峰会致贺词</a><div class="style">11-19 23:43</div><br/></div></li>
<li><div><a href="#">习近平同伊朗总统鲁哈尼通电话</a><div class="style">11-19 23:34</div><br/></div></li>
<li><div><a href="#">中科院院长白春礼：以批判性思维教育培养创新人才</a><div class="style">11-19 23:23</div><br/></div></li>
<li><div><a href="#">中国北方海区冬季将完成582座灯浮标更换或撤除</a><div class="style">11-19 23:11</div><br/></div></li>
</ul>
<ul>
<li><div><a href="#">彭丽媛出席纪念柴可夫斯基俄罗斯歌剧晚会(图)</a><div class="style">11-19 23:58</div><br/></div></li>
<li><div><a href="#">习近平主席向第三届阿拉伯－非洲峰会致贺词</a><div class="style">11-19 23:43</div><br/></div></li>
<li><div><a href="#">习近平同伊朗总统鲁哈尼通电话</a><div class="style">11-19 23:34</div><br/></div></li>
</ul>
<br/><br/>
<div style="text-align: center">当前页数:[1/2]<a href="#">下一页</a> <a href="#">末页</a></div>
</div>
</div>
<div class="pictures">
<img src="../images/Picture1.jpg"></img><br/>
<a href="#">幻想中穿越时空</a><br/><br/>
<img src="../images/Picture2.jpg"></img><br/>
<a href="#">国庆多变的发型</a><br/><br/>
<img src="../images/Picture3.jpg"></img><br/>
<a href="#">新技术照亮都市</a><br/><br/>
<img src="../images/Picture4.jpg"></img><br/>
<a href="#">群星闪耀红地毯</a><br/><br/>
</div>
</div>
</div>
<div class="bottom">
<div class="bottomtitle"><img src="../images/friend_ico.gif"/></div>
<div class="bottomcontent">
<a href="#">中国政府网</a>
<a href="#">中国政府网</a>
<a href="#">中国政府网</a>
<a href="#">中国政府网</a>
<a href="#">中国政府网</a>
<a href="#">中国政府网</a>
<a href="#">中国政府网</a>
</div>
</div>
<div class="last">
24小时客户服务热线：010-68988888 <a href="#">常见问题解答</a> 新闻热线：010-62748888<br/>
文明办网文明上网举报电话：010-62759999 举报邮箱：<a href="#">[email protected]</a><br/>
<br/>
<span>Copyright ©1999-2009 News China gov. All Right Resever</span>
</div>
</body>
</html>
my.css:
body{
width:972px;
margin: 0px 200px;
}
/*头部*/
.top{
width:972px;
height:30px;
margin-top: 10px;
border:1px solid #DFDFDF;
}
/*登录部分*/
.login{
width:490px;
height:30px;
margin-left:10px;
float: left;
}
.login input{
width:118px;
background-image: url("../images/login_input.gif");
background-repeat: no-repeat;
}
.login span input{
width:50px;
background-image: url("../images/login_sub.gif");
background-repeat: no-repeat;
}
/*图片logo*/
.google{
width:118px;
height:28px;
float:right;
background-image:url("../images/friend_logo.gif");
background-repeat: no-repeat;
}
/*title*/
.title{
width:972px;
height:90px;
border:1px solid #DFDFDF;
}
/*logo*/
.logo{
width:157px;
height:90px;
float:left;
background-image:url("../images/logo.jpg");
background-repeat: no-repeat;
}
/*picture*/
.picture{
width:810px;
height:90px;
float:left;
background-repeat: no-repeat;
}
/*新闻部分*/
.news{
width:157px;
height:800px;
float:left;
margin-top:5px;
}
.news a:LINK {
color:#335884;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}
.news a:HOVER {
color:#335884;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
.news a:ACTIVE {
color:blue;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/*国内新闻*/
.china{
width:157px;
height:270px;
background-image: url("../images/sidebarbg.gif");
background-repeat: no-repeat;
}
/*国际新闻*/
.international{
width:157px;
height:270px;
background-image: url("../images/sidebarbg.gif");
background-repeat: no-repeat;
}
/*娱乐新闻*/
.entertainment{
width:157px;
height:270px;
background-image: url("../images/sidebarbg.gif");
background-repeat: no-repeat;
}
/*分类新闻 */
.classfiynews{
width:805px;
height:800px;
margin-top:5px;
margin-left:10px;
float:left;
}
/*分类新闻 top*/
.newstop{
width:805px;
height:43px;
background-repeat: no-repeat;
background-image: url("../images/class_bg.gif");
}
/*分类新闻 bottom*/
.newsbottom{
width:805px;
height:680px;
}
/*分类文字新闻*/
.text{
width:520px;
height:680px;
float:left;
}
/*分类文字新闻top*/
.texttop{
width:520px;
height:45px;
}
.texttop a:LINK {
color:#335884;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}
.texttop a:HOVER {
color:#335884;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
.texttop a:ACTIVE {
color:blue;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/*分类文字新闻bottom*/
.textbottom{
width:520px;
height:680px;
margin-top:10px;
}
.textbottom a:LINK {
color:#5C7A9D;
text-decoration: none;
font-size: 12px;
}
.textbottom a:HOVER {
color:#335884;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
.textbottom a:ACTIVE {
color:blue;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/*时间部分*/
.style{
float:right;
font-size:10px;
color:#919191;
}
/*图片新闻*/
.pictures{
width:260px;
height:680px;
float:left;
text-align:center;
margin-left:15px;
}
.pictures a:LINK {
color:#335884;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}
.pictures a:HOVER {
color:#335884;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
.pictures a:ACTIVE {
color:blue;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/*页面bottom*/
.bottom{
width:972px;
height:149px;
float:left;
}
.bottomtitle{
width:955px;
height:30px;
background-color: #EBF0F3;
border:1px solid #CDD0D2;
}
.bottomcontent{
width:955px;
height:100px;
background-color: #E8F5FC;
border:1px solid #C4D4D9;
}
.bottomcontent a:LINK {
color:#5C7A9D;
text-decoration: none;
font-size: 12px;
}
.bottomcontent a:HOVER{
color:#000066;
font-size:14px;
}
.last{
color:#AF99AF;
font-size: 15px;
text-align:center;
}
.last a:LINK{
color:blue;
font-size: 18px;
text-decoration: none;
}
.last a:HOVER{
color:#000066;
}
.last span{
color:black;
font-size: 18px;
}