css 布局居中显示 absolute + relative

最新推荐文章于 2021-11-16 17:50:06 发布

chen106106

最新推荐文章于 2021-11-16 17:50:06 发布

阅读量184

点赞数

分类专栏： CSS学习笔记文章标签：居中显示 absolute relative 布局定位

本文链接：https://blog.csdn.net/chen106106/article/details/84266110

版权

CSS学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

常用的页面的布局方式一般是固定页面的宽度居中显示，高度自适应，下面的代码就是一个居中显示的例子。

固定宽度居中显示 1 通过设置margin : 0 auto ；width:998px；还一种方式是 position:absolute;left:50%;

margin-left: -494px; 这里设置的宽度应该是你页面设置的宽度的一半，这样也可以实现居中显示的效果。

下面是一个盒子模型的布局的部分代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
		
html{
	margin : 0px;
	padding: 0px;	
}
ul{
	list-style : none;	
}
p { 
	font: 9pt/17pt georgia; 
	margin-top: 0px; 
	text-align: justify;
	}
h3 { 
	font: italic normal 12pt georgia; 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #7D775C;
	}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #B7A5DF;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #D4CDDC;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color: #9685BA;
	}
/*setting the whole page style*/
body{
	color: #555753; 
	/*background: #fff url(zen-bg.jpg) no-repeat top left; */
	/*background: #fff url(blossoms.jpg) no-repeat right bottom; */
	margin: 0px; 
	padding: 0px;
	width:988px;
	min-height: 100%;	
	
}

/*dispaly center 988px*/
#container { 
	/*background: url(zen-bg.jpg) no-repeat left top; */
	background: #fff;
	padding: 0px 2px 0px 2px;  
	margin: 0px auto; 
	position: absolute;
	top: 0px;
	
	left:50%; 
	margin-left:-494px; /*让页面居中显示，兼容IE,FF 它的宽度是width/2的值*/
	
	width:984px;
	border:1px solid #dddfff;
	min-height: 700px;
	}
	
#logo{
	margin-bottom: 2px;
	border:1px solid #dddfff;
	height:50px;
	width:100%;
}

#banner{
	margin-bottom: 2px;
	border:1px solid #dddfff;
	height:50px;
	width:100%;
}

#navigate{
	clear:both; 
	margin: 2px 2px 2px 0px; 
	width: 160px; 
	float: left;
	border:1px solid #dddfff;
	height:50px;
	width:100%;
}
#linkList ul {
	background: transparent url(cr1.gif) repeat top center; 
	margin: 0px;
	margin-right:150px;
	padding: 10px ;
	}
#linkList li {
	line-height: 2.5ex; 
	
	display: inline; 
	padding-top: 5px; 
	margin-bottom: 5px;
	padding:4px 4px;
	list-style-type: none;
	}
#linkList li a:link {
	color: #988F5E;
	}
#linkList li a:visited {
	color: #B3AE94;
	}
	
	
#sidebar{
	margin-left: 600px; 
	position: absolute; 
	top: 0px; 
	right: 0px;
	border:1px solid #dddfff;
	height:400px;
	width:150px;
}

#content{
	clear:both; 
	margin: 20px 20px 20px 0px; 
	width: 160px; 
	float: left;
	border:1px solid #dddfff;
	height:600px;
	width:100%;
}

#footer{
	text-align: center; 
	border:1px solid #dddfff;
	width:100%;
	clear:both;
}

#footer a:link, #footer a:visited { 
	margin-right: 4px; 
	}

</style>
 <link rel="Shortcut Icon" type="image/x-icon" href="http://www.csszengarden.com/favicon.ico" />	   
<title>css zender garden study</title>
</head>
	
<body>
	<div id="container"> 
    	<div id="logo">
        	logo
        </div>
        <div id="banner">
        	banner
        </div>
        
        <div id="navigate">
        	
            <div id="linkList">
				<ul>
					<li><a href="#">index</a></li>
                    <li><a href="#">document</a></li>
                    <li><a href="#">download</a></li>
                    <li><a href="#">news</a></li>
                    <li><a href="#">suggestion</a></li>
                    <li><a href="#">about us</a></li>
				</ul>
			</div>
        </div>
        
        <div id="sidebar">
        	sidebar
        </div>
        
        <div id="content">
        	content
        </div>
        
        <div id="footer">
        	<a href="#" title="Check the validity of this site&#8217;s XHTML">xhtml</a>
            <a href="#" title="Check the validity of this site&#8217;s XHTML">css</a> 
            <a href="#" title="Check the validity of this site&#8217;s XHTML">html5</a> 
            <a href="#" title="Check the validity of this site&#8217;s XHTML">JavaScript</a>  
  
        </div>
    </div>
</body>
</html>