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

最新推荐文章于 2021-06-23 01:11:15 发布

转载最新推荐文章于 2021-06-23 01:11:15 发布 · 385 阅读

1 ·

CC 4.0 BY-SA版权

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

文章标签：

#python

本文详细介绍了一种常用的网页布局方法——固定宽度且居中的版式设计。通过具体的代码实例，展示了如何使用CSS实现这一布局效果，并解释了每段代码的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

#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;

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

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