标准下隔行换色的思考

我们以前在DW中用表格布局着我们的网页的时候常常用到一种设计手法--隔行换色。也就是新闻列表或是列表类的每隔一行就换另一个色彩这样显得很漂亮也很合适阅读。所以这种手法被广大的设计师们收入囊中作为自己的又一把工具刀。但是随着网页标准浪潮的来袭,这种设计效果慢慢变得没有了,原因主要是来自于标准化后的这种效果的实现上。 数据挖掘研究院

由于标准后我们都用UL来代替了表格,代码虽然少了很多,但是好像效果也随之少了。隔行换色也遇到了瓶颈。我采用过CLASS方式来进行隔行换色: 数据挖掘研究院

<ul>
  <li class="one"></li>
  <li class="two"></li>
  <li class="one"></li> 
  <li class="two"></li>
</ul>

我们看到上面的代码所表现出来的是每行的CLASS都不一样,通过这样的方式的确可以解决隔行换色的问题,但是一直来我都被程序员告知这样写法程序没办法写。我一直很郁闷:用表格时他们是怎么写的? 数据挖掘研究院

当然抱怨归抱怨,问题总是需要解决的,之后有朋友想过用JS来实现隔行换色,这种设想在网页标准研究联盟中得到了反驳,认为样式的事没必要用行为去实理,并且用JS来实现的效果并不一定有CSS来解决的好。我同意这样的见解,并且我主张的是大背景实现。什么叫大背景实现呢,意思就是说通过在父级设定背景从而使得当前级得到隔行换色或是隔N行换N色。 数据挖掘论坛

数据挖掘研究院

<div class="list"> 
 <h3><span>领导讲话</span><em><a href="" title="">点击这里</a></em></h3> 
 <ul> 
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li> 
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li> 
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li>
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li> 
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li> 
 </ul> 
</div>

上图是我前几天刚完成的一个项目中的一个实例应用,大家可以看到我采用的是两行背景重复。而这个背景图是定义在UL上的而不定义在LI上。这样又使得我们少写一点代码,让代码显得更加的干净。同时这样技巧通过举一反三的思考就能做出更多很好玩的样式来,比如我们让每一行都不一样,或是让每一行都像是纸页脚卷起来一样,或是其它的什么花样,那就要看你能想出什么样的花招来了! 数据挖掘实验室

[数据挖掘专家] [数据挖掘研究院] [数据挖掘论坛] [数据挖掘实验室]
上一篇:十六则DW使用快技法
下一篇:《網頁設計技巧》系列之二 淺談布局
最新评论共有 0 位网友发表了评论 , 查看所有评论
发表评论( 不能超过250字,需审核,请自觉遵守互联网相关政策法规。 )
匿名?
数据挖掘网站导航 数据挖掘论坛导航
  • 数据挖掘工具
  • 数据挖掘论坛
  • DataCruncher - Cognos
  • MineSet - MathSoft
  • Intelligent Miner - GainSmarts
  • Sqlserver - SAS - Clementine
  • CART - Weka - WizSoft
  • NeuroShell - ModelQuest
  • data mining tools - Darwin
  • 数据挖掘交友
  • 数据挖掘博客
  • 数据挖掘工具
  • 数据挖掘资源
  • 数据挖掘技术算法
  • 数据挖掘相关期刊、会议
  • 研究院联盟合作专区
  • 数据挖掘基础与相关技术
  • 数据挖掘厂商与就业
  • 数据挖掘研究者乐园
  • 知名厂商数据挖掘工具资料
  • 国内数据挖掘实验室
  • Foreign Data Mining Lab
  • 热点关注
  • 新年矢量素材下载大集合
  • frame高度宽度固定
  • JavaScript语言参考手册_目录
  • 用XMLHTTP Post Form时的表单乱码解决方案
  • 使用Filter实现动态页面的静态HTML缓冲
  • javascript 通用库(二)
  • 用CSS制作鼠标经过图像
  • javascript 差错功能函数
  • 急死了~~checkbox传值的问题
  • javaScript基础
  • 论坛最新话题
  • Foundations of Statistical Natural Langu
  • Game Theory meet Data Mining: A Recent P
  • System Building: How does it help or hin
  • 数据挖掘与Clementine培训
  • 新手报到
  • 求 SASEM 客户流失预测分析
  • 数据挖掘工程师/搜索研究院—北京——无线
  • 数据挖掘入门介绍(如何着手数据挖掘)
  • Information Overload Survey Results
  • The INEX 2005 Workshop on Element Retrie
  • 相关资讯
  • javascript lanscape打印
  • javascript 差错功能函数
  • javascript 通用库(二)
  • javascript 通用库(一)
  • javascript 正则表达式
  • 脚本攻击防范策略完全篇
  • javaScript基础
  • 用XMLHTTP Post Form时的表单乱码解决方案
  • 中文排版CSS心得
  • 使用Filter实现动态页面的静态HTML缓冲
  • 数据挖掘实验室资料
  • 数据挖掘博客地址
  • 数据挖掘实验室网站地址
  • Prepare for Medicare audits by using dat
  • 注册成为SAS用户与爱好者俱乐部会员
  • 水南梅
  • 明日烟
  • 新人报道
  • 下载
  • 厦门服务器托管,450元/月—0592-5177319 高
  • 买空间送域名--0592-5177319 高静