DIV+CSS 页面布局--固定宽度且居中的版式

时间 2019-11-13

标签 div+css div css 页面布局固定宽度居中版式栏目 HTML 繁體版

原文原文链接

排版思路：固定宽度且居中的版式是网络中最多见的排版方式之一，首先将全部页面内容用一个大<div>包裹起来，指定该<div>的ID为container，这个ID在整个页面中是惟一的。部分代码以下：css

body{
    margin:0px;
    padding:0px;
    text-align:center;
    background:#e9fbff;
}

解释：margin:0px;指定页面四周的空隙都为0。text-align:center；这是整个排版的关键语句，将页面<body>中的全部元素都设置为居中。html

#container{
    position:relative;
    margin:0 auto;
    padding:0px;
    width:700px;
    text-align:left;
    background:url(container_bg.jpg)  repeat-y;
}

解释：position:relative,相对定位，设置块相对于原来的位置。因为<body>已经设置了居中，所以这里不须要在调整，只是考虑到浏览器的兼容性，加上这句代码。浏览器

margin:0 auto; 很是关键的一句，它使得该块与页面的上下边界距离为0，左右则自动调整。这一句代码的完整写法为margin：0 auto 0 auto; 这里采用了简写。网络

width:700px;设定固定宽度为700px;url

text-align:left;用来覆盖<body>中设置的对齐方式，使得#container中的全部内容恢复左对齐。spa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>固定宽度且居中的格式</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	body{
		margin:0px;
		padding:0px;
		text-align:center;
		background:#e9fbff;
	}
	#container{
		position:relative;
		margin:0 auto;
		padding:0px;
		width:900px;
		text-align:left;
		background:url(container_bg.jpg)  repeat-y;
	}
	#banner{
		margin:0px;
		padding:0px;
		width:900px;
	}
	#banner img{
		height:50px;
		width:900px;
	}
	#links{
		font-size:20px;
		margin:-15px 0px 0px 0px;
		padding:0px;
		position:relative;
		background-color:#afdcff;
	}
	#links li{
		list-style:none;/*无列表符号*/
		float:left;/*向右伸展*/
		margin:0px 60px 0px 0px;/*相邻列表之间的距离*/
	}
	/*左侧部分之超连接*/
	#links a:link, #nav a:visited{
		text-decoration:none;
		color:#2a4f6f;
		background-color:transparent;
	}
	#content{
		margin:50px 0px 0px 0px;
		width:900px;
	}
	#content_left{
		width:150px;
		position:absolute;
		top:80px;
		left:0px;
		background-color:#afdcff;
	}
	#content_left img{
		width:100px;
		height:100px;
		
		border:1px solid #0073cc;
		margin-bottom:5px;
		text-align:center;
	}
	#content_left h3{
		text-align:center;
		margin-top:0px;
	}
	#content_left p{
		text-align:justify;
		padding:0px 10px 0px 10px;
	}
	#content_right{
		position:absolute;
		top:80px;
		right:0px;
		width:750px;
		background-color:#afdcff;
	}
	#content_right h3{
		margin-top:10px;
		text-align:left;
	}
	#footer{

		width:900px;
		text-align:center;
	}
  </style>
 </head>

 <body>
  <div id="container">

	<div id="banner">
	 <img src="images/b.jpg" border="0">
	</div>

	<div id="links">
	 <ul>
	  <li><a href="#">首页</a></li>
	  <li><a href="#">心情日记</a></li>
	  <li><a href="#">放松</a></li>
	  <li><a href="#">一块儿走</a></li>
	  <li><a href="#">从明天起</a></li>
	  <li><a href="#">纸飞机</a></li>
	  <li><a href="#">下一站</a></li>
	 </ul>
	</div>
	
	<div id="content">
		<div id="content_left">
			<p><img src="images/g1.jpg"><br/><b>个人日记本</b></p>
			<p>过完整个夏天，忧伤并无好一些。开车行驶在公路无际无边。唱不完一首歌，疲倦还剩下黑眼圈，感情的世界的伤害在所不免...</P>
			<p><img src="images/g2.jpg"><br/><b>心情轨迹</b></p>
			<p>带走美好的一天,风吹过大地。炫美的世界，霞光点亮星辰，燃起辽远的梦幻，流星划过夜空，忆起逝夜的歌声。</p>
		</div>
		<div id="content_right">
			<h3>依然爱你</h3>
			<p>过完整个夏天，忧伤并无好一些。开车行驶在公路无际无边。唱不完一首歌，疲倦还剩下黑眼圈，感情的世界的伤害在所不免...过完整个夏天，忧伤并无好一些。开车行驶在公路无际无边。唱不完一首歌，疲倦还剩下黑眼圈，感情的世界的伤害在所不免...</p>
			<h3>旅程</h3>
			<p>带走  美好的一天<br/>风  吹过大地<br/>炫美的世界<br/><br/>
	 霞光 点亮星辰<br/>燃起 辽远的梦幻<br/>流星 划过夜空<br/>忆起 逝夜的歌声<br/></p>
			<h3>诗歌</h3>
			<p>带走  美好的一天<br/>风  吹过大地<br/>炫美的世界<br/><br/>
	 霞光 点亮星辰<br/>燃起 辽远的梦幻<br/>流星 划过夜空<br/>忆起 逝夜的歌声<br/></p>
		</div>	
	</div>
	<div id="footer">版权全部   @一别经年</div>
  </div>
 </body>
</html>