段正淳的css笔记 Ⅰ

来源： 作者：正淳 出处：巧巧读书 2007-10-25 进入讨论组

• 关 键 词：
• firefox
• html
• css

上一页 1 2 3 4 5 下一页 

圆角的做法.

为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑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>

需要正视的二个标签

1. acronym这个标签用来解释名词很爽,但是用得太少.(我也一直想用来着,所以记下了.)
   css：
   acronym{cursor:help}
   html：
   < acronym title="段正淳又是金庸笔下一个十分奇特的人物。他奇特在到处留情，情人极多，见一个爱一个，而又绝不是徒然风流薄幸，当他是单独对着一个情人的时候，他真是真心真意爱这个情人的，只好说这个人的感情特别丰富，别无其他解释。" >文字< /acronym>
2. ins这个标签忘记是在哪个网站上看到过用来在h2里显示更多的链接,后来查了书,大家都觉得有点欠妥,有点争议.
   css：
   还未写入css组件…欠奉上了
   html：
   < h2>标题< ins>< a xhref="http://ued.taobao.com/blog/#" mce_href="http://ued.taobao.com/blog/#" >更多>>< /a>< /ins>< /h2>

保留：： http://www.qqread.com/css/a361445.html进入讨论组讨论。

上一页 1 2 3 4 5 下一页 

【收藏此文】【大 中 小】【打印】【关闭】

较早的文章：设计师的框架

较新的文章：清除浮动的最优方法