先来看看效果图:

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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐