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>
你设置的总宽度是470side
宽度是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