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

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

VIP文章下雨了

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

1356

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

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

版权

先看一下效果图：

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

<!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:#6c