CSS技巧总结 段正淳的css笔记 Ⅰ

• 试想过总结出这几年来写css与xhtml的经验 ，汇总成一片”旷世奇文”分享给大家。无奈寡人年世已高，真是有点力不从心了。于是转念一想，可以用笔记的形式展现，这样就不用担心写不出来了。

  现在就来说个淘宝首页上的一个小技巧。

  类目之间的横竖线

  

  从很久很久以前开始，类目间的竖线无非都只有三种。

  1. 背景图
     在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
     缺点：最后一个还是要用class来隐藏掉背景。
  2. 符号
     在每个a标签之间用””符号来填充。
     缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。
  3. a标签右侧的boder。
     同背景图一样，只不过使用border-right来代替。缺点也同上。

  看到这里，可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。

  其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。
  为什么之前都没有那么做的，寡人也不知道了。难道寡人是第一个发现这样的做法？
  不管是谁先此之前利用了这样的方法实现类目间竖线。
  不过在淘宝首页上线后不久就有同行的网站在首页改版中也用了这样的方法。
  那个网站不看也罢。class实在是写的有点多。加载html会变得多得多。
  反正一个首页需要加载1.17m的网页我的大脑会自动屏蔽。

  圆角的做法.

  为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑http连接数,又要考虑css与html的代码量与语义.
  贴出的是最近考虑替换现有圆角做法的方案,可能还有许多未考虑的状况.但是大体的编写方式便是如下.
  好处是便于维护,只有一个图片.还可以某种程度上的任意缩放.缺点是多了无意义的html代码.

  css：
  .c,.c i,.c i i,.c b,.c b b,.c p{
  background-image:url(http://pics.taobao.com/bao/album/promotion/uiblog/purple.png);/*背景图片*/
  background-repeat:no-repeat;
  }
  .c{
  width:200px;/*临时定的宽度*/
  background-position:0 -4px;
  }
  .c i{
  display:block;
  height:4px;
  }
  .c i i{
  margin:0 0 0 4px;
  background-position:right 0;
  }
  .c b{
  display:block;
  height:4px;
  background-position:0 bottom;
  }
  .c b b{
  margin:0 0 0 4px;
  background-position:right bottom;
  }
  .c p{
  margin:0 0 0 4px;
  padding:0 4px 0 0;
  background-position:right -4px;
  }

  html：
  < div class="c">
  < i>< i>< /i>< /i>
  < p>
  按钮按钮按钮按钮按钮按钮
  按按按按按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮
  

• [1] [2] [3] [4] 下一页 
• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• CSS技巧总结 段正淳的css笔记 Ⅰ 相关文章：
• ·XP提示“虚拟内存不足”原因总结
• ·学习CSS制作网页总结的一些经验技巧
• ·结束SQL注入隐患3招
• ·Coreldraw结合 R.A.V.E 制作动画
• ·cn域名收录实验小结
• ·CSS常见问题和技巧总结
• ·理解ASP.NET中的三层结构
• ·HTML基础:HTML的基本结构
• ·Web 的内容、结构与表现漫谈
• ·QQ宠物猪猪恋爱结婚之路及问答手册
• CSS技巧总结 段正淳的css笔记 Ⅰ 相关软件
• ·《冰封王座》地图：梦之旅团1.41—圣彼得的终结
• ·《结界师 鸟森妖奇谈》（日）模拟器
• ·《魔鬼终结者》模拟器 枪战类街机
• ·《仙剑奇侠传四》结局动画
• ·《魔兽》三国姜维传 结局电影
• ·《新结婚时代》
• ·《请给我结果》
• ·国民待遇启示录：二元结构下的中国
• ·第三课堂之户外结绳
• ·二00四年总结

上一篇:设计理论：设计师决胜商界的十大规则

下一篇:社区类网站：社区关系链存在的两种模式

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐