最近制作一个网站,由于网站的设计稿是客户自行设计的。由于设计人员是平面设计师,对网页设计中与程序搭配的部分不是很了解,因此设计难免天马行空。
其中一点便是新闻列表使用了隔行变色。
注意,这里不是说背景隔行变色,而是列表链接隔行变色。效果如下图:
其中的文字链接是一行白色,一行粉红色。(背景部分使用双行图片背景在UL中平铺即可,本教程不做讲解。)
怎么解决这个问题呢?还好,科讯的自定义标签中有一个特别灵活的参数:{@autoid},也就是行号。
于是编写代码如下:
- <ul>[loop={@num}]
- <li class="news_page_{@autoid}"><span>{@adddate}</span><a href="{@linkurl}" target="_blank">{@fulltitle}</a></li>[/loop]</ul>
配合CSS很好的解决了这个问题,CSS如下:
以下内容只有回复后才可以浏览,请先登录! 原理非常简单,那就是用行号给别一行都加上一个单独的class样式,然后在CSS中分别控制即可。
本来问题到此就算是结束了。但是做到后面发现搜索页面也是使用的这样的格式。。。
而科讯的全站搜索中是没有“行号”这个参数的。问题似乎遇到了瓶颈。尔后我尝试修改科讯的程序来解决这个问题。。。无奈,我对ASP语言一窍不通。。。不了了之。。。
但是问题还是必须解决。我突然想起了一个非常牛B的CSS选择器。然后用这个选择器解决了这个问题。唯一的缺憾是,不支持IE6浏览器。。
搜索部分代码如下:
<ul>{@loop.begin}
- <li class="news_page_{@item.autoid}"><u><a href="{@item.classurl}" target="_blank">[{@item.classname}]</a></u><i><a href="{@item.linkurl}" target="_blank">{@item.title}</a></i></li>
- {@loop.end}
- </ul>
- {@search.showpage}
CSS如下:
#soso_page ul { background:url(/image/news_fenye.png) repeat-y 0 0;width:471px; overflow:hidden;}
- #soso_page ul li { height:34px; line-height:24px; width:471px; float:left}
- #soso_page ul li u { width:110px; display:block; height:24px; text-align:center; float:left;}
- #soso_page ul li u a { font-family:"宋体"}
- #soso_page ul li i { width:345px; float:right; display:block; height:24px; overflow:hidden;}
- #soso_page li a { color:#fff;_color:#000}
- #soso_page li + li a { color:#f39}
- #soso_page li + li + li a { color:#fff}
- #soso_page li + li + li + li a { color:#f39}
- #soso_page li + li + li + li + li a { color:#fff}
- #soso_page li + li + li + li + li + li a { color:#f39}
- #soso_page li + li + li + li + li + li + li a { color:#fff}
- #soso_page li + li + li + li + li + li + li + li a { color:#f39}
- #soso_page li + li + li + li + li + li + li + li + li a { color:#fff}
- #soso_page li + li + li + li + li + li + li + li + li + li a { color:#f39}
你没看错,使用的就是“ + 号选择器”,在一般的教程中称之为“临近选择器”。
他的意思是说:
第一个li中的链接使用白色
在第一个li后面的一个li中的链接使用粉红色
在第一个li后面的一个li的后面的一个li中的链接使用白色
以此类推
- </P> <P>#soso_page li a { color:#fff;_color:#000}</P> <P>
上面的CSS中的这一个,后面有一个下划线的颜色为黑色,是使用了一个hack用来解决IE6浏览器的不兼容问题的。在IE6中,所有的链接使用黑色,以避免白色看不见的问题。
到此,这个问题算是解决了。虽然有一点缺憾,但是复习了一下这么牛B的选择器。。。还是很好的。。
就是这样的写法非常啰嗦。。。。希望科讯官方可以在为标签增加更多的自定义选项,解决诸如此类的问题。那便是善莫大焉了。