简单网页布局的html代码网站,一个简单的网页布局代码

先来看看效果图：

再来看源代码(下面的源代码其实是一个标准的XHTML模板)

This is title

header

list

user

pics

footer

再来看CSS文件。

@CHARSET "UTF-8";

*{

padding:0;

margin:0;

}

body{

width:960px;

margin:0 auto;

background:#FFF

}

#header{

width:auto;

height:150px;

border:2px solid #ccc;

margin:10px 0;

}

#list{

width:600px;

height:514px;

border:2px solid #ccc;

float:right;

}

#user{

width:340px;

height:250px;

border:2px solid #ccc;

float:left;

}

#pics{

width:340px;

height:250px;

border:2px solid #ccc;

float:left;

margin:10px 0 0 0;

}

#footer{

width:auto;

height:150px;

text-align:center;

}

如果要在底部显示边框，则需要加入以下代码：

border:2px solid #ccc;

margin:534px 0 0 0;

原载：蜗牛博客

网址：http://www.snailtoday.com

尊重版权，转载时务必以链接形式注明作者和原始出处及本声明。