先来看看效果图:

130817e2de4d2a4d0d85f9efefcbeddd.png

ebe7ccd1b26c6d588cc91a281d1ec510.png

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

This is title

list

user

pics

再来看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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐