应用DIVCSS进行网页布局以后，这样的特点被打破了。左列和右列通过浮动float实现。而左列与右列的高度只能通过定义或由内容的多少来决定。这样的情况下，我们想要实现视觉效果上左列和右列等高，就遇到了一些困难。然而这个问题可以很方便的得到解决，如果左右两列的内容是固定的，我们可以简单的设置同样的高度即可现实，如果左列和右列的高度无法确定，如左列固定内容，而右列是文章文本段落，内容多少不可控制。我们可以用变通的办法来实现。今天52CSS.com和大家共同讨论，通过背景图片实现两列“等高”的CSS网页布局。
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
首先我们看一下最终效果图：（可点击放大查看）
我们撇开外观形式，以合适的标签来编写具有语义的HTML文档。
Example Source Code [www.52css.com]
main
sider
这是一个典型的三行两列式的布局。头部header，内容区wrap，页脚footer。在内容区wrap中，包括着主列main和侧边栏sider。而wrapclear作为辅助层用于清除浮动，避免布局在FF下出错，而此层在本案例中也将发挥双重作用。接着往下看。
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
我们开始为页面制作图片，banner图片我们撇开不谈，我们需要制作背景图片，严格来说，形成这样的布局，需要至少四张图片：wrap背景实现垂直方向的线条；main背景实现标题和上圆角；sider背景实现标题和上圆角；wrapclear背景实现底部四个圆角，形成闭合的两块区域。我们可以将这些图片整合在一个图片文件上。图片及原理说明如下：（可点击放大查看）
其实上面的图片整合是应用了CSS Sprites工作原理。关于此知识您可以参考：
CSS Sprites工作原理及其对CSS布局的意义、优点和缺点介绍
http://www.52css.com/article.asp?id=735
CSS Sprite减少图片 限制图片 加速显示
http://www.52css.com/article.asp?id=778
下面我们给页面设置基本的CSS样式。
Example Source Code [www.52css.com]
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;
}
wrap层设置的是线条区域的垂直方向平铺，得到了如下效果的页面：（可点击放大查看）
▲▲▲ >>>点击这里查看效果<<<
接着我们给main和sider层设置CSS样式。
Example Source Code [www.52css.com]
#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;
}
请注意背景图片的应用及坐标的变化。我们给sider设置了一个临时高度360px，得到了如下效果的页面：（可点击放大查看）
▲▲▲ >>>点击这里查看效果<<<
我们最终进行闭合操作，设置wrapclear的CSS样式，以及善后工作的footer样式设置。实现最终的效果。
Example Source Code [www.52css.com]
#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;
}
我们得到了最终想要的效果。如图所示。
没有评论:
发表评论