DIV+CSS 頁面佈局--左中右版式

<!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;
		font-family:arial;
		background-color:#f8e5a9;
	}
	/*整個容器*/
	#container{
		margin:0px;
		padding:0px;
		background:url("images/bg.jpg") repeat-y;
	}
	/*左側部分*/
	#left{
		position:absolute;
		top:0px;
		left:0px;
		margin:0px;
		background:#afdcff;
		width:190px;
	}
	/*中間部分*/
	#middle{
		position:absolute;
		padding:1px 15px 10px 15px;
		margin:-10px 190px 0px 190px;
		font-size:13px;
		background:#f8e5a9 url("images/bg.jpg") no-repeat bottom right;
	}
	/*右側部分*/
	#right{
		position:absolute;
		top:0px;
		right:0px;
		margin:0px;
		background:#afdcff;
		width:190px;
		padding:20px 0px 20px 0px;
		font-size:12px;
	}
	
	/*左側部分之標題1*/
	#left h1{
		font:150% Georgia, "Times New Roman", Times, serif;
		font-weight:bold;
		color:#2a4f6f;
		text-align:center;
		padding:0px 5px 0px 12px;
	}
	/*左側部分之項目列表*/
	#left ul{
		list-style:none;
		margin:1cm 20px 0px 0px;
		padding:0px 0px 15px 22px;
	}
	/*左側部分之項目列表項*/
	#left li{
		font-size:130%;
		border-bottom:1px dotted #b2bcc6;
		margin-bottom:0.1cm;
	}
	/*左側部分之超連接*/
	#left a:link, #nav a:visited{
		text-decoration:none;
		color:#2a4f6f;
		background-color:transparent;
	}
	#left a:hover{
		color:#778899;
	}
	#left h2{
		font:150% Georgia, "Times New Roman", Times, serif;
		font-weight:bold;
		color:#2a4f6f;
		padding:0px 5px 0px 12px;
		text-decoration:underline;
	}
	#middle h4{
		text-decoration:underline;
		color:#0078aa;
		padding-top:15px;
		font-size:16px;
	}
	/*中間部分之段落*/
	#middle p{
		font-size:150%;
	}
	/*頁腳部分*/
	#footer{
		font-size:12px;
		width:100%;
		padding:3px 0px 3px 0px;
		text-align:center;
		margin:0px;
		background-color:#b0cfff;
		position:relative;
	}
	/*右側部分之img*/
	#right img{
		border:1px solid #0073cc;
		margin-bottom:5px;
		width:150px;
		height:150px;
	}
	#right p{
		text-align:center;
		padding:0px 15px 0px 15px;
	}
  </style>
 </head>

 <body>
  <div id="container">
   <div id="mainbox">
    <div id="left">
	 <h1>@一別經年</h1>
	 <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>
	 </ul>
	<h2>經典推薦</h2>
	 <ul>
	  <li><a href="#">一塊兒走到</a></li>
	  <li><a href="#">從明天起</a></li>
	  <li><a href="#">紙飛機</a></li>
	  <li><a href="#">下一站</a></li>
	 </ul>
	 <p><img src="images/1.gif"></p>
	</div>
	<div id="middle">
	 <h4>依然愛你</h4>
	 <p>過完整個夏天,憂傷並無好一些。開車行駛在公路無際無邊。唱不完一首歌,疲倦還剩下黑眼圈,感情的世界的傷害在所不免。依然記得從你口中說出......
	 </p>
	 <h4>旅程</h4>
	 <p>夕陽 染紅藍天<br/>
	 帶走  美好的一天<br/>風  吹過大地<br/>炫美的世界<br/><br/>
	 霞光 點亮星辰<br/>燃起 遼遠的夢幻<br/>流星 劃過夜空<br/>憶起 逝夜的歌聲<br/>
	 </p>
	</div>
	<div id="right">
	 <p><img src="images/g1.jpg"><br/>永遠的記憶</p>
	 <p><img src="images/g2.jpg"><br/>匆匆的腳步</p>
	 <p><img src="images/g3.jpg"><br/>溫暖而忙碌</p>
	</div>
   </div>
   <div id="footer">版權全部 2014.04.14</div>
  </div>
 </body>
</html>
相關文章
相關標籤/搜索