DIV+CSS 页面布局--左中右版式

最新推荐文章于 2021-06-18 14:40:27 发布

weixin_34387468

最新推荐文章于 2021-06-18 14:40:27 发布

阅读量509

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1014520/blog/222151

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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>

转载于:https://my.oschina.net/u/1014520/blog/222151