html重构时碰到的一个恶心的问题

        原图如下:

 

      按理说,这样的页面应该花不了多长时间的,因为做好了一块,下面都是相同的。

      但是我在价格那里,做了很久,都没达到自己想要的效果。就是指“送价值xxx”那里,价格后面有一张背景图。

      那里的结构是<span>送价值<strong>xx</strong>元.....</span>,我所能想到的方法是给strong元素放这个背景图片,但是没得到我要的效果,原因是strong元素是内敛的,它不是块状元素。如果将它变成块状元素,那么整个结构都要改变,可能就是价格前面的要加标签,让它左浮动,然后都左浮动,来达到效果,但是那里的文字是居中对齐的,不是靠左对齐,如果真是靠左对齐的话,我可以利用外层的span,将其display属性变成block,然后用背景图,最后定位一下,就能解决了。

      为了解决这个问题,想了一个多小时,最后想出一个折中的方案,文字还是居中对齐,外层span加背景,考虑到有些定位会有偏差,所以多用了几个class。代码大致如下:

      

span{display:block;background:url(xx.jpg) 20% 0;width:...;height:...;}

        类似的代码写了将近四个,才算解决问题。真是没想法了,不知道大家碰到这样的问题,会如何解决?

posted on 2010-12-08 20:34  大空翼  阅读(496)  评论(4编辑  收藏  举报

导航