圆角的做法.
为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑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> 按钮按钮按钮按钮按钮按钮 按按按按按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮 < /p> < b>< b>< /b>< /b> < /div>
table的全局定义
caption这个标签在firefox下会有左边有1px空隙的bug,很讨厌.能想到的简单的方法只有-1px的margin了.
css: 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; }
html: < table> < caption>表格标题< /caption> < tr> < th>标题< /th> < th>标题< /th> < th>标题< /th> < th>标题< /th> < /tr> < tr> < td> 内容< /td> < td> 内容< /td> < td> 内容< /td> < td> 内容< /td> < /tr> < /table>
需要正视的二个标签
- acronym这个标签用来解释名词很爽,但是用得太少.(我也一直想用来着,所以记下了.)
css: acronym{cursor:help} html: < acronym title="段正淳又是金庸笔下一个十分奇特的人物。他奇特在到处留情,情人极多,见一个爱一个,而又绝不是徒然风流薄幸,当他是单独对着一个情人的时候,他真是真心真意爱这个情人的,只好说这个人的感情特别丰富,别无其他解释。" >文字< /acronym>
- ins这个标签忘记是在哪个网站上看到过用来在h2里显示更多的链接,后来查了书,大家都觉得有点欠妥,有点争议.
css: 还未写入css组件…欠奉上了 html: < h2>标题< ins>< a xhref="http://ued.taobao.com/blog/#" mce_href="http://ued.taobao.com/blog/#" >更多>>< /a>< /ins>< /h2>
出处:Taobao.com UI Team
责任编辑:moby
上一页 段正淳的css笔记 [1] 下一页 段正淳的css笔记 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|