CSS+Js快速实现仿CSDN和博客园页面布局

作者：陆金龙发表时间：2014-11-23 19:17

一、Css+Js实现2列CSDN页面布局

1.功能说明

页面分左右两列宽度固定的内容区域，页面左右两侧留有相等宽度的边距。

当改变浏览器窗体大小时，页面随着窗体宽度的变化自动调整左右边距的宽度，同时保持2列内容区域占据的宽度固定不变。

2. 关键代码

主要用到css样式的float属性和margin属性。通过float:left属性使第1列内容区域向左浮动，float:right属性使第2列内容区域向右浮动。

使用margin-left和margin-right属性分别设置2个div的左右边距。左右边距的设置通过Js在页面加载设置一次，窗体变化时实时动态修改。

<style>

//2列：固定2列内容区域宽度,调整边距,限制最小宽度

.center

{

float: left;

width: 760px;

}

.east

{

float: right;

width: 220px;

}

body

{

min-width:1020px;

}

</style>

$(function () {

reset();

$(window).resize(reset);

});

function reset() {

var w = $(".middle").width();

if (w > 1020) {

var padding = (w - 1020)/2;

$(".center").css("margin-left", padding + "px");

$(".east").css("margin-right", padding + "px");

}

</script>

3.页面效果

页面宽度最大时，两侧有宽度较大且宽度相等的边距（可利用起来放广告方面的内容）。

浏览器窗体宽度变小时，左右两侧边距的宽度也实时调整变小，但始终保持2列内容区域的宽度不变。

当浏览器窗体进一步减小，直到不足以显示2列固定宽度的内容时，浏览器窗体底部出现横向滚动条，通过左右拖动滚动条可以将页面可视区域之外的内容移入到视区域内。

4.完整页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<head>

<style>

body, html

{

margin: 0;

padding: 0;

}

.west,.center ,.east

{

border:1px solid gray;

height: 505px;

}

.north

{

background-color: #efefef;

height: 60px;

text-align:center;

padding-top:15px;

}

.middle

{

background-color: #fff;

border: 1px solid gray;

height: 505px;

}

.south

{

background-color: #efefef;

height: 35px;

text-align:center;

padding-top:15px;

}

//2列：固定2列内容区域宽度,调整边距,限制最小宽度

.center

{

float: left;

width: 760px;

}

.east

{

float: right;

width: 220px;

}

body

{

min-width:1020px;

}

</style>

$(function () {

reset();

$(window).resize(reset);

});

function reset() {

var w = $(".middle").width();

if (w > 1020) {

var padding = (w - 1020)/2;

$(".center").css("margin-left", padding + "px");

$(".east").css("margin-right", padding + "px");

}

</script>

</head>

<body>

 Logo区域

</div>

 主内容区

</div>

 右侧内容区

</div>

版权区域

</div>

</body>

</html>

二、Css+Js实现3列博客园页面布局

1.功能说明

页面分左中右3列。左右列宽度固定，中间列内容区域的div宽度随浏览器窗体大小自动调整。

2.关键代码

主要用到css样式中的float:left属性和position: absolute属性。

左侧两列使用float:left向左浮动，右边热点区域div使用position: absolute进行绝对定位。

这样3列的位置就固定下来，不管浏览器窗体大小如何变化，左边2列始终靠左，最右边一列则始终靠在窗体右侧。

通过Js在页面加载后和窗体变化时动态修改中间主内容区域的宽度，使3列宽度之和刚好等于窗体宽度即可。

<style>

//固定左右2列区域宽度，自动调整中间主内容区域宽度

.west

{

float: left;

width: 160px;

}

.center

{

float: left;

margin:0 1px;

}

.east

{

position: absolute;

right: 0px;

width: 230px;

}

</style>

$(function () {

reset();

$(window).resize(reset);

});

function reset() {

var w = $("body").width();

var staticWidth = $(".east").width() + $(".west").width();

$(".center").width(w - staticWidth-8);//8:留出4条边框宽度及该层左右间隔

}

</script>

3.页面效果

如下图所示，浏览器宽度变化时，始终只有中间内容区域的宽度动态变化。

4.页面完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<head>

<style>

body, html

{

margin: 0;

padding: 0;

}

.west, .center, .east

{

border: 1px solid gray;

height: 505px;

}

.north

{

background-color: #efefef;

height: 75px;

text-align:center;

}

.middle

{

background-color: #fff;

border: 1px solid gray;

height: 505px;

}

.south

{

background-color: #efefef;

height: 50px;

text-align:center;

}

//固定左右2列区域宽度，自动调整中间主内容区域宽度

.west

{

float: left;

width: 160px;

}

.center

{

float: left;

margin:0 1px;

}

.east

{

position: absolute;

right: 0px;

width: 230px;

}

</style>

$(function () {

reset();

$(window).resize(reset);

});

function reset() {

var w = $("body").width();

var staticWidth = $(".east").width() + $(".west").width();

$(".center").width(w - staticWidth-8);//8:留出4条边框宽度及该层左右间隔

}

</script>

</head>

<body>

 Logo信息

</div>

 左侧导航区域

</div>

 主内容区域

</div>

 右侧热点链接区域

</div>

 版权信息

</div>

</body>

</html>

（转载本文请注明原文链接、作者和出处 i 编程网-iprogram.com.cn ，请勿用于任何商业用途）