053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

固定宽度且居中的css排名方法详解

时间:2017-08-16

这种css排版最常用的一种。先看看演示代码:

 

<html>
<head>
<title>个人主页</title>
<style>
<!--
body, html{
margin:0px; padding:0px;
text-align:center;
background:#e9fbff;
}
#container{
position: relative;
margin: 0 auto;
padding:0px;
width:700px;
text-align: left;
background:url(container_bg.jpg) repeat-y;
}
#banner{
margin:0px; padding:0px;
}
#links{
font-size:12px;
margin:-18px 0px 0px 0px;
padding:0px;
position:relative;
}
#links ul{
list-style-type:none;
padding:0px; margin:0px;
width:700px;
}
#links ul li{
text-align:center;
width:100px;
display:block;
float:left;
}
#links br{
display:none;
}
#leftbar{
background-color:#d2e7ff;
text-align:center;
font-size:12px;
width:150px; float:left;
padding-top:20px;
padding-bottom:30px;
margin:0px;
}
#leftbar p{
padding-left:12px; padding-right:12px;
}
#content{
font-size:12px; 
float:left; width:550px;
padding:5px 0px 30px 0px;
margin:0px;
background:url(bg1.jpg) no-repeat bottom right;
}
#content p, #content h4{
padding-left:20px; padding-right:15px;
}
#footer{
clear:both; font-size:12px;
width:100%;
padding:3px 0px 3px 0px;
text-align:center;
margin:0px;
background-color:#b0cfff;
}
.pic1{
border:1px solid #00406c;
}
p.leftcontent{
text-align:left;
color:#001671;
}
h4{
text-decoration:underline;
color:#0078aa;
padding-top:15px;
font-size:16px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="banner">
<img class="lazy" data-original="banner1.jpg" _fcksavedurl="banner1.jpg" border="0">
</div>
<div id="links">
<ul>
<li>首页</li>
<li>心情日记</li>
<li>Free</li>
<li>一起走到</li>
<li>从明天起</li>
<li>纸飞机</li>
<li>下一站</li>
</ul>
<br>
</div>
<div id="leftbar">
<p><img class="lazy" data-original="selfpic1.jpg" _fcksavedurl="selfpic1.jpg" class="pic1">
<br>我的日记本</p>
<p class="leftcontent">秋天过半的时候,我搭上了一列火车。我不知道它将要去往的方向,那铁路看上去无休无止地延伸着。</p>
<p><img class="lazy" data-original="selfpic2.jpg" _fcksavedurl="selfpic2.jpg" class="pic1">
<br>心情轨迹</p>
<p class="leftcontent">无意间发见,白云的上面,长着许许多多的蒲公英。它在我面前迅速的长大,风吹过的时候,纷纷升起,飞向无数的远方。</p>
</div>
<div id="content">
<h4>介绍</h4>
<p>火车经过一个又一个站台,窗外漫卷的蒲公英向我微笑着。我逐渐记起了自己旅行的目的,一直都在下一站的前方。火车缓缓地驶入站台,汽笛声响的那一瞬间,车厢变得透明,我看见,自己和这长长的列车一起,正在漫天飘舞着的蒲公英中飞行。</p>
<h4>转播设备</h4>
<p>我现在是在万泉河附近,我们的转播车就在旁边不远的地方,师傅马上将会把车开过来。我们的转播设备非常的先进,具体怎么先进我也说不清,师傅比我清楚,总之就是特别特别先进。好,现在师傅已经把转播车开过来了。……
</p>
<h4>旅程</h4>
<p>夕阳 染红蓝天<br>
带走 美好的一天<br>
风 吹过大地<br>
炫美的世界<br>
<br>
霞光 点亮星辰<br>
燃起 辽远的梦幻<br>
流星 划过夜空<br>
忆起 逝夜的歌声<br>
<br>
是谁昨夜背上行囊<br>
唱一首满载风尘的歌<br>
今夜才又想起拥抱的时刻<br>
<br>
独自走的一段旅程<br>
是否还装满苦涩<br>
一路风雨飘摇 那坎坷对谁说<br>
<br>
来吧看这远处亮起的点点星火<br>
伸手触摸那写在匆匆旅程的歌<br>
谁在转过的街口从容挥手<br>
谁用欢笑和拥抱<br>
记住这一刻
</p>
</div>
<div id="footer">版权所有 2006.12.7 Next Station</div>
</div>
</body>
</html>

其中的css代码如下:

 

以下为引用的内容:

<style>
<!--
body, html{
 margin:0px; padding:0px;
 text-align:center;
 background:#e9fbff;
}
#container{
 position: relative;
 margin: 0 auto;
 padding:0px;
 width:700px;
 text-align: left;
 background:url(container_bg.jpg) repeat-y;
}
#banner{
 margin:0px; padding:0px;
}
#links{
 font-size:12px;
 margin:-18px 0px 0px 0px;
 padding:0px;
 position:relative;
}
#links ul{
 list-style-type:none;
 padding:0px; margin:0px;
 width:700px;
}
#links ul li{
 text-align:center;
 width:100px;
 display:block;
 float:left;
}
#links br{
 display:none;
}
#leftbar{
 background-color:#d2e7ff;
 text-align:center;
 font-size:12px;
 width:150px; float:left;
 padding-top:20px;
 padding-bottom:30px;
 margin:0px;
}
#leftbar p{
 padding-left:12px; padding-right:12px;
}
#content{
 font-size:12px; 
 float:left; width:550px;
 padding:5px 0px 30px 0px;
 margin:0px;
 background:url(bg1.jpg) no-repeat bottom right;
}
#content p, #content h4{
 padding-left:20px; padding-right:15px;
}
#footer{
 clear:both; font-size:12px;
 width:100%;
 padding:3px 0px 3px 0px;
 text-align:center;
 margin:0px;
 background-color:#b0cfff;
}
.pic1{
 border:1px solid #00406c;
}
p.leftcontent{
 text-align:left;
 color:#001671;
}
h4{
 text-decoration:underline;
 color:#0078aa;
 padding-top:15px;
 font-size:16px;
}
-->
</style>
 

 

要实现固定宽度且居中的方法就是设定body的 text-align:center;属性。然后设定

#container的 

position: relative;    定位为相对定位
 margin: 0 auto;    上下的页边距是0,左右的页边距为自动。在加上body的 text-align:center,就形成居中的排版
 padding:0px;    
 width:700px;      实现固定宽度。
 text-align: left;   主要目的是使文字对齐方式为左对齐,如果没有这个 ,那就会继承body的 text-align:center的css属性。

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP