CSS技巧:段正淳的css笔记

淘宝首页上的一个小技巧。

类目之间的横竖线

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

背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点：最后一个还是要用class来隐藏掉背景。

符号
在每个a标签之间用”|”符号来填充。
缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。

a标签右侧的boder。
同背景图一样，只不过使用border-right来代替。缺点也同上。

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

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

圆角的做法.

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

css：

说到底其实属性的书写顺序规范就是：神仙?妖怪? - 身材怎么样！- 服装类型(比基尼?棉袄?) - 服装款式(黑色?白色?纽扣?拉链?) - 用了啥化妆品和发型.
这个书写标准小部分并不是浏览器厂商推行的书写规范，所以可能被广大标准推广者所不认同 。但这些个都是弟兄几个实践出来认为最符合现有淘宝环境的。

css代码的简写

css缩写的语法，对新手有一定帮助,老鸟就不用看了.

0px不需要单位，直接:margin:0

盒模型的缩写，语法是margin:上 右 下 左;.甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的

css属性的最后一项”;”号省略。（不建议 ^_^）

字体宽度normal用400代替,bold用700代替。

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#0044DD可以缩写为#04D;

border边框的缩写，语法是border:width style color,类似boder:1px solid red;

背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?)

字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”.

list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用.

想凑10条, 还真难.就把删除无用换行符和空格算一个吧