div+css怎么设置网页固定宽度且居中？

html-css06

div+css怎么设置网页固定宽度且居中？,第1张

div+css设置网页固定宽度且居中，首先需要确切的知道你要的网页固定宽度是多少，网页固定宽度，其实也就是对于body的宽度的限制，通过css去给宽度就行，然后在给一个margin就能实现居中，margin的用法如图:

具体的看下代码：

<html>

<head>

<style>

body{

width:960px       //限定网页的宽度

margin:0 auto 

boreder:1px solid #f00     //加个边框利于观察

}

</style>

</head>

<body>

<P>我是测试文字</p>

</body>

</html>

<P>我是测试文字</p>

</body>

</html>

你设置的总宽度是470

side

宽度是120

文字是从左向右

main行

宽度350

margin-left的意思是

从盒子左侧空出120px

再从左向右排列

把margin-left和参数值去掉

两行width参数相同即可

如果width参数不相同会导致脑袋大身子小

或者都加上margin-left

参数相同

也可显示居中

两列布局：左边固定宽度，右边自适应宽度

这样的布局，其实不是难点，我想很多同学都有实现过，示例：

方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

HTML Markup

<div id="left">Left sidebar</div>

<div id="content">Main Content</div>

CSS Code

<style type="text/css">

*{

margin: 0

padding: 0

}

#left {

float: left

width: 220px

background-color: green

}

#content {

background-color: orange

margin-left: 220px/*==等于左边栏宽度==*/

}

</style>

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值，大家可以点击查看上面代码的DEMO