淘宝一个成员css笔记

1.其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。 http://www.blueidea.com/tech/web/2007/5008.asp 2.圆角的做法. 为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑http连接数,又要考虑css与html的代码量与语义. 贴出的是最近考虑替换现有圆角做法的方案,可能还有许多未考虑的状况.但是大体的编写方式便是如下. 好处是便于维护,只有一个图片.还可以某种程度上的任意缩放.缺点是多了无意义的html代码. [code="java"] .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; } [/code] html [code="java"] < div class="c"> < i>< i>< /i>< /i> < p> 按钮按钮按钮按钮按钮按钮 按按按按按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮 < /p> < b>< b>< /b>< /b> < /div> [/code] table 上的的caption兼容 table的全局定义 caption这个标签在firefox下会有左边有1px空隙的bug,很讨厌.能想到的简单的方法只有-1px的margin了. [code="java"] table{ border-collapse:collapse; } table caption,table td,table th{ border:1px solid #a2bbdd;/*边框颜色*/ background:#c3d9ff;/*背景颜色*/ } table caption{ text-align:left; border-bottom:none; margin-left:-1px; } [/code] 需要正视的二个标签 css [code="java"] acronym{cursor:help} [/code] html [code="java"] < acronym title="段正淳又是金庸笔下一个十分奇特的人物。他奇特在到处留情，情人极多，见一个爱一个，而又绝不是徒然风流薄幸，当他是单独对着一个情人的时候，他真是真心真意爱这个情人的，只好说这个人的感情特别丰富，别无其他解释。" >文字< /acronym> [/code] 1.其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。 http://www.blueidea.com/tech/web/2007/5008.asp 2.圆角的做法. 为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑http连接数,又要考虑css与html的代码量与语义. 贴出的是最近考虑替换现有圆角做法的方案,可能还有许多未考虑的状况.但是大体的编写方式便是如下. 好处是便于维护,只有一个图片.还可以某种程度上的任意缩放.缺点是多了无意义的html代码. [quote] .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; } [/quote] html [code="java"] < div class="c"> < i>< i>< /i>< /i> < p> 按钮按钮按钮按钮按钮按钮 按按按按按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮 < /p> < b>< b>< /b>< /b> < /div> [/code] table 上的的caption兼容 table的全局定义 caption这个标签在firefox下会有左边有1px空隙的bug,很讨厌.能想到的简单的方法只有-1px的margin了. [code="java"] table{ border-collapse:collapse; } table caption,table td,table th{ border:1px solid #a2bbdd;/*边框颜色*/ background:#c3d9ff;/*背景颜色*/ } table caption{ text-align:left; border-bottom:none; margin-left:-1px; } [/code] 需要正视的二个标签 css [code="java"] acronym{cursor:help} [/code] html [code="java"] < acronym title="段正淳又是金庸笔下一个十分奇特的人物。他奇特在到处留情，情人极多，见一个爱一个，而又绝不是徒然风流薄幸，当他是单独对着一个情人的时候，他真是真心真意爱这个情人的，只好说这个人的感情特别丰富，别无其他解释。" >文字< /acronym> [/code] 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条, 还真难.就把删除无用换行符和空格算一个吧 原URL:http://www.blueidea.com/tech/web/2007/5008.asp