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>