Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 CSS通过背景图片实现两列

CSS通过背景图片实现两列

发布时间:2020-05-21   编辑:www.jquerycn.cn
jquery中文网为您提供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>

您可能感兴趣的文章:
基于jquery实现的鼠标滑过按钮改变背景图片
Javascript图片放大镜的实例分析
jquery动态更换设置背景图的方法
css设置背景固定不滚动效果的示例
JQuery结合CSS操作打印样式的方法
CSS+Jquery实现页面圆角框方法大全
利用jQuery实现可输入搜索文字的下拉框
jQuery 打造动态渐变按钮 详细图文教程
jQuery 文本框模拟下拉列表效果
jQuery的图片画廊插件 jbgallery

[关闭]