简单网页布局的html代码网站,一个简单的网页布局代码
先来看看效果图:再来看源代码(下面的源代码其实是一个标准的XHTML模板)This is titleheaderlistuserpicsfooter再来看CSS文件。@CHARSET "UTF-8";*{padding:0;margin:0;}body{width:960px;margin:0 auto;background:#FFF}#header{width:auto;height:150px
先来看看效果图:
再来看源代码(下面的源代码其实是一个标准的XHTML模板)
This is titleheader
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
尊重版权,转载时务必以链接形式注明作者和原始出处及本声明。
更多推荐
所有评论(0)