CSS学习笔记----页面居中实现

来源：互联网发布：图像融合的算法编辑：程序博客网时间：2024/05/05 21:24
<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">&copy;CopuRight 2014/10/27</div></div></body></html>
0 0