无表格的搜索结果

Question

我在php中实现搜索页面.我需要显示如下图像的结果

我怎样才能用css实现这种设计.我想要一个流畅的设计,使用百分比添加,即交替的行颜色改变.

另请告诉我如何限制列不超过50个单词.完整的细节将通过每行的超链接提供.

Answer 1

这是使用桌子的完美情况.

不要只是假设"无表格设计比使用表格设计更好",表格应与表格数据一起使用,并且您的设计非常适合.

关于偶数/奇数行着色,如果您定位现代浏览器,请使用以下规则:

table tr:nth-child(even) { background-color: #c0ffee; }
table tr:nth-child(odd) { background-color: #123456; }

如果你也是旧版浏览器的目标,你可以使用javascript,JQuery派上用场:

$('table tr:even').css('background-color: #123456');

或者在服务器端代码中手动添加类.

关于行中字符/单词数量的限制,通常在服务器端完成.如果你使用像Smarty这样的模板引擎,那么你可能会有一个功能,但这也不是你自己卷起来的大事.