页面布局练习：桓台二中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px;
padding:0px}
.container{width:100%;
}
body{
background-image:url(%E4%BA%8C%E4%B8%AD%E5%A4%A7%E8%83%8C%E6%99%AF.jpg);
background-size:1350px;
}
.content{width:940px;
height:1500px;
margin:0px auto;}
.top-img{width:100%;
height:167px;
position:relative}
.top-text{width:150px;
height:20px;
position:absolute;
bottom:0px;}
.nav{float:left;
width:1000px;
height:30px;
position:relative;
visibility:hidden;
}
.nav div{float:left;
width:98px;
height:30px;
text-align:center;
vertical-align:middle;
line-height:30px;
background-image:url(nav1-line.gif);
color:#FFFFFF;
font-family:微软雅黑;}
.banner{width:100%;
height:312px;
position:relative;}
.news{width:940px;
height:186px;}
.news div{height:186px;
float:left;}
.news-left{width:270px;}
.mews-center{width:466px;}
.mews-center div{width:466px;}
.liebiao{padding:0px 0px 0px 20px;}
.liebiaowenzi{font-size:12px;
margin-top:5px;
margin-bottom:7px;
color:#666666;}
.riqi{float:right;
margin-right:25px;}
.news-right{width:198px;}
.fengcai{width:100%;
height:166px;
}
.fengcai div{
height:166px;
float:left;}
.jiaoshi{width:270px;}
.jiaoshi div{margin-top:15px;}
.xuezi{width:466px;}
.xizuo{width:198px;}
.title{width:100%;
height:74px;}
.news-bottom{width:100%;
height:166px;
border:1px solid black;}
.news-bottom div{border:1px solid black;
height:166px;
float:left;}
.bottom-left{width:270px;}
.bottom-center{width:466px;}
.bottom-right{width:198px;}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="top-img"></div>
<div class="nav">
<div>学校首页</div>
<div>走进二中</div>
<div>新闻频道</div>
<div>教师考研</div>
<div>教师园地</div>
<div>德育之窗</div>
<div>校庆专栏</div>
<div>招生信息</div>
<div>二中反邪教</div>
<div>两学一做</div>
</div>
<div class="banner"><img src="二中banber.png" width="940" /></div>
<!--新闻-->
<div class="news">
<div class="news-left"><img src="二中新闻图.png" width="270"/></div>
<div class="mews-center">
<img src="二中要闻.png" />
<div style="text-align: left;
line-height: 24px;
width: 445px;
color: #666666;
font-size: 12px;
padding-top: 1px;
width:445px;
height:49px;
margin:0px 0px 0px 10px;
border-bottom:dotted #D4BFFF;">
山东省桓台第二中学始建于1958年，是一所有着50年办学历史的老校，长期以来地处农村。
2001年3月建成省级规范化学校，2007年12月建成省级文明单位。
</div>
<div class="liebiao">
<ul type="square">
<li class="liebiaowenzi">桓台二中2017级新生录取名单公示<span class="riqi">2017-07-02</span></li>
<li class="liebiaowenzi">桓台二中2017年体育特长生录取名单 ...<span class="riqi">2017-06-26</span></li>
<li class="liebiaowenzi">桓台二中2017年体育特长生录取分数线<span class="riqi">2017-06-23</span></li>
<li class="liebiaowenzi">桓台二中2017年体育特长生田径专项合格...<span class="riqi">2017-06-17</span></li>
</ul>
</div>
</div>
<div class="news-right"><img src="教学资源.png" width="200" /></div>
</div>
<div class="title"><img src="二中中间图片.png" width="940" /></div>
<div class="fengcai">
<div class="jiaoshi">
<img width="270px"; src="教师风采.png" style="margin-top:10px;" />
<div class="liebiao" style="padding-right:-15px; height:120px;">
<ul type="square">
<li class="liebiaowenzi">2013-2014年...<span class="riqi">2014-02-25</span></li>
<li class="liebiaowenzi">2013年淄博市优质...<span class="riqi">2014-02-25</span></li>
<li class="liebiaowenzi">2013-2014第...<span class="riqi">2014-02-25</span></li>
<li class="liebiaowenzi">桓台二中召开青年教师...<span class="riqi">2013-11-18</span></li>
<li class="liebiaowenzi">青年教师演讲比赛<span class="riqi">2013-04-11</span></li>
</ul>
</div>
</div>
<div class="xuezi">
<img src="学子风采.png" width="466px;" style="margin-top:7px;" height="23px"/>
<div class="liebiao" style="padding-right:-15px; height:120px; width:445px; margin-top:15px;">
<ul type="square">
<li class="liebiaowenzi">读书节系列活动之中国古代文化知识大赛隆重...<span class="riqi">2017-06-15</span></li>
<li class="liebiaowenzi">“追寻古典踪迹 展现青春风采” 读书...<span class="riqi">2017-05-22</span></li>
<li class="liebiaowenzi">朗诵“钢铁是怎样练成的”获淄博市百灵艺术...<span class="riqi">2016-03-16</span></li>
<li class="liebiaowenzi">2013级举行经典美文国学诵读大型晚会<span class="riqi">2014-12-02</span></li>
<li class="liebiaowenzi">17岁男生黄宁的故事：桓台二中，让我变得...<span class="riqi">2014-03-27</span></li>
</ul>
</div>
</div>
<div class="xizuo">
<img src="习作园地.png" width="198px" style="margin-top:5px;" height=25;" />
<div class="liebiao" style="padding-right:-15px; height:120px; width:177px; margin-top:15px;">
<ul type="square">
<li class="liebiaowenzi">弗兰肯斯坦<span class="riqi" style="margin-right:15px;">14.2.25</span></li>
<li class="liebiaowenzi">让踏实成为一种习...<span class="riqi" style="margin-right:15px;">14.1.20</span></li>
<li class="liebiaowenzi">教你做智慧的班主...<span class="riqi" style="margin-right:15px;">14.1.17</span></li>
<li class="liebiaowenzi">教你做智慧的班主...<span class="riqi" style="margin-right:15px;">14.1.9</span></li>
<li class="liebiaowenzi">为学生的成长打造...<span class="riqi" style="margin-right:15px;">13.11.26</span> </li>
</ul>
</div>
</div>
</div>
<div class="gundongtu"><img src="教师图片.png" width=100% /></div>
<div class="news-bottom">
<div class="bottom-left"></div>
<div class="bottom-center"></div>
<div class="bottom-right"></div>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
