段正淳的css笔记(2)圆角的做法
作者:正淳 来源:ued.taobao.com 发布时间:2007-11-01 21:52:00
标签:圆角,淘宝,css,笔记
如果您还没看过段正淳的css笔记(1)分类之间的横竖线,可以先看看!
1、css圆角的做法.
为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑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>
2、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>
3、需要正视的二个标签
3.1 acronym这个标签用来解释名词很爽,但是用得太少.(我也一直想用来着,所以记下了.)
—————-css—————–
acronym{cursor:help}
—————html—————–
< acronym title="段正淳又是金庸笔下一个十分奇特的人物。他奇特在到处留情,情人极多,见一个爱一个,而又绝不是徒然风流薄幸,当他是单独对着一个情人的时候,他真是真心真意爱这个情人的,只好说这个人的感情特别丰富,别无其他解释。" >文字< /acronym>
3.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>
0
投稿
猜你喜欢
- 实现了宽度、高度、透明度的渐变,还能以高度宽度中点为中心,还扩展成以任意点为中心渐变(实例中以点击点为中心)。<!DOCTYPE ht
- 在MySQL数据库中导出整个数据库:1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldu
- 基于很多原因,有不少朋友的空间不支持FSO,当大量的页面生成静态页面时,占用大量的空间,修改样式时,不方便,所以动态页面还是有动态页面的好处
- MySQL是一个非常流行的小型关 系型数据库管理系统,2008年1月16号被Sun公司收购。目前MySQL被广泛地应用在Internet上的
- 内容摘要合理使用渐变留白网格布局提高字体应用明确而有效的导航设计漂亮、有用的页脚介绍优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到,但它的输
- 建立网站时,有很多理由让你遵循Web标准。企业、开发人员和用户都会从兼容标准的做法中获益。这里列举了一些最令人信服的理由,为什么所有网站都应
- 1.intersect为取多个查询结果的交集;2.查询两个基本时间段内表记录的SQL语句;select * from shengjibiao
- 最近在改个程序用到了在js中设置css的float属性,以为和平常的写法一样,原来不是,只好去请教google,原来...首先大家先来看一下
- 优化数据库的注意事项:1、关键字段建立索引。2、使用存储过程,它使SQL变得更加灵活和高效。3、备份数据库和清除垃圾数据。4、SQL语句语法
- 代码如下:function checkip(checkstring)'用正则判断IP是否合法 dim re1 set re1=new
- 超酷的js图片轮换/轮播 渐变效果··来自腾讯刚刚在腾讯女性频道上看到一个很酷的图片渐变轮换效果·····于是乎····抠下来了···分享·
- <% '测试读取MySql数据库的内容strconnection="driver={mysql odbc 3.51 dri
- 可以在Mac OS X 10.2.x(“Jaguar”)和以上版本上Mac OS X使用二进制安装软
- 今天在群(CSS森林:30247792)里讨论了border的样式写法,发现border的写法还真是灵活,做了一下总结,希望对大家有用:bo
- 在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪
- 用FrontPage做网页的朋友们,你的主要页面中,可能都带有许多相同的元素吧?如页头横向排列(或左侧纵向排列)的主要链接按钮、页底的板权说
- 格式:Download.asp?FileName=要下载的文件名 代码如下:Dim Stream Dim Co
- 以下是SQL连接代码: 代码如下:Function Open_conn() dim Conn,Strconn&
- 发一个数字拼图游戏,有点小疑问前几天写得,其中一段代码还要感谢“簡簡單單愛妳”的提示,不过我还是不太明白, ,有点笨。 $(&qu