CSS实现固定宽度且居中的页面排版

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

下雨了

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

阅读量1.4k

点赞数

分类专栏： css 文章标签： css xhtml float html c

本文链接：https://blog.csdn.net/rainedman/article/details/6651180

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先看一下效果图：

这样的排版即固定宽度且居中。它的实现代码如下：

<!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>
		<title>CSS实现固定宽度且居中页面版式</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type="text/css">
			body{margin:0;}
			#container{width:900px;margin:0 auto;}
			.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
			#header{height:100px;background-color:yellow;}
			#logo{height:70px;background-color:green;}
			#menubar{height:30px;background-color:blue;}
			#mainbody{}
			#left{width:30%;float:left;height:500px;background-color:#6cf}
			#right{width:70%;float:right;height:500px;background-color:orange;}
			#footer{height:30px;clear:both;background-color:#09c}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="logo">logo</div>
				<div id="menubar">menubar</div>
			</div><!--head end-->
			<div id="mainbody">
				<div id="left">
					left
				</div>
				
				<div id="right">
					right
				</div>
			</div><!--mainbody end-->
			<div id="footer">
				footer
			</div>
		</div>
	</body>
</html>