<html>
<head>
<title>页面居中</title>
</head>
<style type="text/css">
*{
padding:0px;
margin:0px;
font-size:12px;
}
/*IE浏览器设置此选项就会使页面居中
body{
text-align:center;
}
*/
#container{
width:1100px;
/*除IE外的浏览器需要设置此选项,才会使页面居中
margin:auto;*/
/*这才是推荐的居中设置方式*/
position:absolute;
left:50%;
margin-left:-550px;
}
#header{
background:#33f;
height:50px;
}
#nav{
border:1px solid #88a;
height:30px;
border-bottom:#88a 1px solid;
}
#nav ul{
list-style:none;
}
li.nav_li{
width:120px;
height:30px;
float:left;
font-size:12px;
border-right:1px solid #339;
text-align:center;
}
li.nav_last{
border:none;
}
/*当使用了包含标签之后,应为它的加载时间比class的加载时间要晚,所以再定义一个class之后,它的效果不会被class覆盖。*/
#nav ul li a{
position:relative;
top:8px;
}
a.nav_href:link,a.nav_href:visited{
text-decoration:none;
color:#125;
}
a.nav_href:hover{
text-decoration:underline;
color:#a43;
}
#content{
margin-top:4px;
/*如果上一个元素设置了float,下面的一个就要设置此选项来清除float,否则对于IE以外的浏览器而言
因为不占用空间,会飘上去。当然如果上一个设置了height将其隔开也没问题。*/
clear:both;
float:left;
}
#content_left{
width:250px;
float:left;
}
#content_right{
width:835px;
float:left;
}
/***********************以下为文章内容样式*****************************/
dl.article_list{
margin:4px;
border:1px #999 solid;
}
dl.index_l_list{
width:240px;
}
dl.index_r_list{
width:390px;
float:left;
margin-left:20px;
}
dl.article_list dt{
background:#238;
height:30px;
color:#fff;
font-weight:bold;
}
dl.article_list dt span{
position:relative;
font-size:14px;
top:8px;
left:10px;
}
dl.article_list dd{
height:30px;
background:url("3.jpg") no-repeat;
background-position:12px 12px;
border-bottom:1px dotted #aaa;
}
dl.article_list dd a{
position:relative;
top:8px;
left:25px;
}
a.article_href:link,a.article_href:visited{
text-decoration:none;
color:#555;
}
a.article_href:hover{
text-decoration:underline;
color:#a33;
}
#border{
clear:both;
margin-top:10px;
text-align:center;
height:30px;
border:#999 1px solid;
}
</style>
<body>
<div id="container">
<div id="header">导航图片</div>
<div id="nav">
<ul>
<li class="nav_li"><a href="#" class="nav_href">返回首页</a></li>
<li class="nav_li"><a href="#" class="nav_href">摇滚音乐</a></li>
<li class="nav_li"><a href="#" class="nav_href">另类电影</a></li>
<li class="nav_li"><a href="#" class="nav_href">联系我们</a></li>
<li class="nav_li"><a href="#" class="nav_href">网站导航</a></li>
<!--一个css可以加载多个类,用空格隔开,这样就会继承两个类的属性-->
<li class="nav_li nav_last"><a href="#" class="nav_href">网站帮助</a></li>
</ul>
</div>
<div id="content">
<div id="content_left">
<dl class="article_list index_l_list">
<dt><span>通知公告</span></dt>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
</dl>
<dl class="article_list index_l_list">
<dt><span>交流互动</span></dt>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
</dl>
<dl class="article_list index_l_list">
<dt><span>额外信息</span></dt>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
</dl>
</div>
<div id="content_right ">
<dl class="article_list index_r_list">
<dt><span>通知公告</span></dt>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
</dl>
<dl class="article_list index_r_list">
<dt><span>通知公告</span></dt>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
</dl>
<dl class="article_list index_r_list">
<dt><span>通知公告</span></dt>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
</dl>
<dl class="article_list index_r_list">
<dt><span>通知公告</span></dt>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
<dd><a href="#" class="article_href">关于西游记读后感的书写格式通知</a></dd>
</dl>
</div>
</div>
<div id="border">
©CopuRight 2014/10/27
</div>
</div>
</body>
</html>