CSS通过背景图片实现两列"等高"的CSS网页布局
css教程通过背景图片实现两列"等高"的css网页布局
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>css通过背景图片实现两列"等高"的css网页布局 - 111cn.net</title>
<style type="text/css">
body {
margin : 0;
padding : 0;
}
#header, #wrap, #footer {
width : 884px;
margin : 0 auto;
}
#header a img {
border : 0;
}
#wrap {
background : #333 url(52css.gif) repeat-y -900px 0;
}
#main {
float : right;
width : 640px;
padding : 5px;
background : url(52css.gif) no-repeat -234px -10px;
}
#sider {
float : left;
width : 218px;
height : 360px;
padding : 5px;
background : url(52css.gif) no-repeat 0 -10px;
}
#wrapclear {
clear : both;
width : 884px;
height : 5px;
line-height : 5px;
margin : 0 auto;
background : url(52css.gif) no-repeat 0 0;
overflow : hidden;
}
#footer {
margin-top : 6px;
height : 35px;
line-height : 35px;
text-align : center;
background : #ddd;
}
#footer a {
font-size : 13px;
color : #03c;
}
</style>
</head>
<body>
<div id="header"><a href="http://www.111cn.net/"><img src="banner.jpg" alt="divcss实例：通过背景图片实现两列"等高"的css网页布局 - 111cn.net" /></a></div>
<div id="wrap">
<div id="main">main<br/><br/><p style="text-align:center;">本文作者：<a href="http://www.111cn.net/">111cn.net</a> 如需转载请建立本站链接（<a href="http://www.111cn.net/">http://www.111cn.net/</a>），并且不得随意改动文章内容、保留此版权声明文本！</p></div>
<div id="sider">sider</div>
<div id="wrapclear"></div>
</div>
<div id="footer"><a href="http://www.111cn.net/">divcss实例：通过背景图片实现两列"等高"的css网页布局 - 111cn.net</a></div>
</body>
</html>
