关于宽度自适应,已经是前段开发人员必备的css技能之一,而背景图的合并则属于更高级别的要求。
我们为什么要宽度自适应,原因大体有以下几点:
第一:很多情况下有这样的需求,比如做B/S前端,90%以上要求整体宽度自适应。这种情况下大多数都采用了js框架,比喻Ext,Dojo等。而我们用CSS按自己的需求写一个自适应的页面,也是完全可以实现的,速度也会快的多。
第二:便于后期的维护,如果遇到需求变更的情况,比较容易维护。比如要增加内容而宽度变化,或者排版改变引起的宽度变化等等。
第三:很多情况下,用宽度自适应本身就减少了页面的工作量。我下面会用一个具体的例子来说明。
第四:使用宽度自适应,可以很好的跟背景图合并结合在一起,大大的减少了页面的图片数目和图片大小。大大提高页面的loading速度。
第五:由于有些难度,特别是背景图的合并,这两个技术已经成为前端高手不可缺少的额标志性技能。
废话不多说,用实例来说明问题。
这里我取了网页的一部分,实在是因为这个博客的图片大小要求,我不想损失过多的像素,于是取下一块。
从这短短的一小块,可以看到很明显的共同点:各个块的头尾部分差别只在字不同和长度不同。这种情况下,我们只要做好一个宽度可以自适应的,就可以分别设置不同的宽度来实现各个块。也就是做好一个,其他的复制就可以了,大大的减少工作量。(图片合并会在下一节中继续介绍)
先说下宽度自适应的思想。
实现想法这个是这样的,类似于此处的头和脚
的效果,我们需要做三个标签的2层嵌套。最下面的额一层沿x轴平铺中间的背景,上面的两层分别设置左背景和右背景。 而对于中间的主体部分
,可以看到两边都有一个小的渐变,我们的想法是用两个标签嵌套来实现,一个标签中放一边的渐变,取一小段,沿y轴平铺。
根据这个思想我们分别截取小图:分别是头的中间背景、头的左圆角
、头的右圆角
。相应的脚的中间背景
、脚的左圆角
、脚的右圆角
。中间部分的左边渐变
、中间部分的右边渐变
。这八张小图暂时命名为bg_header.gif,bg_headerl.gif,bg_headerr.gif,bg_footer.gif,bg_footerl.gif,bg_footerr.gif,bg_l.gif,bg_r.gif。
细心的朋友可能发现我取的图有去的图右这么几个特点,第一:横排背景的宽度都相同,第二取脚上的小图时,把跟脚相连的亮边都截取出来,第三:我给他们命名的时候说暂时命名。这么做都是有原因的,也许看完整篇文章你就能明白。
做到这里,可以说是水到渠成了。
html:
<div class="part">
<!-- 这里是头部分 -->
<div class="header">
<div class="headerl">
<div class="headerr">
</div>
</div>
</div>
<!-- 这里是中间部分 -->
<div class="mainl">
<div class="mainr">
这里是中间部分的内容
</div>
</div>
<!-- 这里是脚部分 -->
<div class="footer">
<div class="footerl">
<div class="footerr">
</div>
</div>
</div>
</div>
对应的css设置:
/* set width in part */
.part {width:xxx;}
/* common css */
.header {background:url(../p_w_picpaths/bg_header.gif) 0 0 repeat-x;}
.headerl {background:url(../p_w_picpaths/bg_headerl.gif) 0 0 no-repeat;}
.headerr {background:url(../p_w_picpaths/bg_headerr.gif) right 0 no-repeat;height:44px;}
.footer {background:url(../p_w_picpaths/bg_footer.gif) 0 0 repeat-x;}
.footerl {background:url(../p_w_picpaths/bg_footerl.gif) 0 0 no-repeat;}
.footerr {background:url(../p_w_picpaths/bg_footerr.gif) right 0 no-repeat;height:28px;}
.mainl {background:url(../p_w_picpaths/bg_l.gif) 0 0 repeat-y;}
.mainr {background:url(../p_w_picpaths/bg_r.gif) right 0 repeat-y;}
看这段css大家能发现我这里的宽度设置只有一个,就是在.part里设置,内容部分的高度也没有设置,这时无论.part设置多宽,内容多高,效果都会自适应的。而html里完全可以复制代码的形式,实现不同的大小的相类似的块。
我在做可扩展的效果时,截取的头和脚部分的背景宽度都是5像素,就是为了做背景图的合并,一共有6张小图如下:
这六张图片分别对应了头部分平铺的背景,头左圆角,头右圆角。脚部分平铺的背景,脚左圆角,脚右圆角。 我们可以利用background-position的设置来实现把这六张小图合并成一张背景图。具体的步骤如下:
我们用Ps新建一个4px宽 216px高的背景图,把上面的六张小图从上到下依次排上。如下图:
我给它命名为bg_common.gif;有了这张图片,原来的六张小图就可以删掉了,这时候我们不需要对html文件做任何的修改,只需要修改css的响应部分就可以,具体修改如下:
被修改部分:
.header {background:url(../p_w_picpaths/bg_header.gif) 0 0 repeat-x;}
.headerl {background:url(../p_w_picpaths/bg_headerl.gif) 0 0 no-repeat;}
.headerr {background:url(../p_w_picpaths/bg_headerr.gif) right 0 no-repeat;height:44px;}
.footer {background:url(../p_w_picpaths/bg_footer.gif) 0 0 repeat-x;}
.footerl {background:url(../p_w_picpaths/bg_footerl.gif) 0 0 no-repeat;}
.footerr {background:url(../p_w_picpaths/bg_footerr.gif) right 0 no-repeat;height:28px;}
修改后的css:
.header {background:url(../p_w_picpaths/bg_common.gif) 0 0 repeat-x;}
.headerl {background:url(../p_w_picpaths/bg_common.gif) 0 -44px no-repeat;}
.headerr {background:url(../p_w_picpaths/bg_common.gif) right -88px no-repeat;height:44px;}
.footer {background:url(../p_w_picpaths/bg_common.gif) 0 -132px repeat-x;}
.footerl {background:url(../p_w_picpaths/bg_common.gif) 0 -160px no-repeat;}
.footerr {background:url(../p_w_picpaths/bg_common.gif) right -188px no-repeat;height:28px;}
也就是修改了background-position 的位置。
背景图合并之所以比较难于精通,是因为它是跟页面的制作思想紧密相连的,在页面实现之前就需要有一个成熟的想法是至关重要的。而这个走一步看三步甚至走一步看十步的本领,非经长时间的磨练是不会达到的,这里只是举了一个最简单最常用的例子。
比如:我们也可以把中间content部分两个repeat-y的背景合并,但是如果想要实现这种合并,我现在所用的标签嵌套布局方法是没法实现的。我至少需要给放置右边repeat-y的背景图设置一个专门有宽度的标签。
而我为什么放弃这种做法:
第一:如果专门设置一个标签放置这个背景,我必然要给这个标签设置高度来显示背景。但是我现在需要实现的效果时高度自适应的,也就是内容撑高高度,如果一定用这种方法必然需要用js来控制高度,实在是麻烦的很,并且因为少一个小图多了一段js也是得不偿失。
第二:用专门宽度的标签来放置repeat-y的标签,布局必然比我现在做的要麻烦。调试工作量自然多些。
第三:因为以上两种原因,沿y轴铺的背景图,很少做图片合并工作。当然排除极个别特例。所以在写html标签嵌套的时候基本上可以省略这步的思考。
这个是背景图合并的最基础的例子,也是基本功。好像是马步,可能你觉得没什么,不过练好了你才能使出更厉害的招数来
转载于:https://blog.51cto.com/zhanfeng/1017873