更多的CSS简单页面布局可以去css布局下载啊，资源来自CSS彻底设计与研究。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>单列布局</title>
<style>
body{
background: #fff;
font: 13px/1.5 arial;
margin: 0;
padding: 0;
}
.rounded{
background: url(pages/layout/images/left-top.gif) top left no-repeat;
width: 100%; /*IE6下重新计算宽度*/
}
.rounded h2{
background: url(pages/layout/images/right-top.gif) top right no-repeat;
padding: 20px 20px 10px;
margin: 0;
}
.rounded .main{
background: url(pages/layout/images/right.gif) top right repeat-y;
padding: 10px 20px;
margin: -2em 0 0 0;
}
.rounded .footer{
background: url(pages/layout/images/left-bottom.gif) left bottom no-repeat;
}
.rounded .footer p{
color: #888;
text-align: right;
display: block;
padding: 10px 20px 20px;
margin: -2em 0 0 0;
background: url(pages/layout/images/right-bottom.gif) right bottom no-repeat;
}
#header, #content, #pagefooter{
width: 760px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="rounded">
<h2>Page Header</h2>
<div class="main">
<p>
这是一行文本，这里作为样例，显示在布局框中。<br/>
这是一行文本，这里作为样例，显示在布局框中。 </p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="content">
<div class="rounded">
<h2>Page Content</h2>
<div class="main">
<p>
这是一行文本，这里作为样例，显示在布局框中。<br />
这是一行文本，这里作为样例，显示在布局框中。
</p>
<p>
这是一行文本，这里作为样例，显示在布局框中。<br />
这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="pagefooter">
<div class="rounded">
<h2>Page Footer</h2>
<div class="main">
<p>
这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
