CSS Sprites + 圆角[译](2)
作者:板凳 来源:译言 发布时间:2009-05-08 16:10:00
第二步: HTML 代码
首先,我们会给容器 div 一个 .roundedBox
类 :
<div class="roundedBox"></div>
现在,我们必须再增加四个 div ,这会在将来创建圆角的时候用到。之后必须给每个加载一个类 .corner,同时也标识一个类来指定它们格子的位置。
<div class="roundedBox">
<strong>My content in roundedBox Type 1</strong>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>
一切搞定? 嗯,让我们把注意力再转移到 CSS 代码上来。
第三步: CSS 代码
如你所知, (或者您会在这里快速学习到) 绝对定位元素通常都依照相对定位的父元素进行定位。. If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果这个父元素无法界定,那么它会去最近作相对定位的那个父元素,直至 body 标签。 哈?! - 好了,如果到此为止您仍没有掌握,不用担心,我们将在第二部分了解它。(翻译得有点拗,附上原文:Ok, if you didn’t get this, don’t worry, you’ll catch it in an second.)
让我们先来定义下所有的圆角:
所有的圆角都必须定义绝对定位,并且注明高度跟宽度。 我的圆角定义的宽度跟高度都是 17px.
.corner {
position:absolute;
width:17px;
height:17px;
}
如果您是第一次切割矩形圆角,那么宽度跟高度很可能会不一样 (咄!)。
现在开始定义 div 容器样式:
.roundedBox {position:relative;}
任何定义有类 .roundedBox 的元素内,绝对定位元素都会相对于这个元素进行定位,而不是标签 body。 我们也必须设置一些padding值,如果没有设置,圆角将会覆盖我们的文本,这肯定不是我们想要的效果。 重要提示: top 和 bottom padding 值必须 等价于圆角的 height。left 和 right padding 值必须等价于圆角的宽度。 正如您已经知道的,我的圆角宽度跟高度是相等的,因此,四个边角的padding 值也是相等的:
.roundedBox {position:relative; padding:17px; margin:10px 0;}
我也通过 margin 给我们的 div 流出了一定的空隙
最后,让我们对没有圆角作单独定义
我们会对每个圆角作绝对定位设置,并且定位背景图的位置 (根据我们的 sprite):
.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}
您可能已经注意到,我们的样式仍然还没有下载 sprite。我们一般不会去定义它们的原因是,我们会使用另外的方法。
猜你喜欢
- 如果您的网站面向世界各地的冲浪者或者对外开展商贸活动,检测来访者的浏览器语言类型就非常现实了。这里提供的脚本可以检测流露;浏览器
- 最近设计一个优惠券列表,有个属性是有效日期,因为空间有限,必须要把开始日期和结束日期在一行显示,这样就出现一排的数字,日期有好几种我们习惯的
- “Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多j
- 用CSS+DIV编写的实现在网页中显示圆角矩形的代码!希望对大家有用!谢谢支持!以下为CSS代码:<style> div.bg{
- 数组我们已经提到过,对象是无序数据的集合,而数组则是有序数据的集合,数组中的数据(元素)通过索引(从0开始)来访问,数组中的数据可以是任何的
- 你是否有时想知道什么人访问你的站点,什么时间,IP地址等。下面我就这个问题向大家来阐述一下。这个例子使用文本文件来写入用户的信息创建一个lo
- 我们的每期话题,团队在内部都会通过邮件进行一番讨论,随着讨论的激烈,往往能碰撞出很多有意义的观点,因此,将讨论内容分享出来,有兴趣的朋友可以
- 原文:Unobtrusive Ajax。今天才看见的一个Presentation,是Jesse Skinner在06年10月发表的。虽然题目
- 要使用request对象的ServerVariables属性,通过它来获得环境变量的值。使用的语法为:Request.ServerVaria
- 一个asp显示当前日期农历的代码函数,效果 今天是:农历丁亥年(猪)八月十三。调用方便!Function nl()'获取当前系统时间
- TO_NUMBER(char[,'format_model']) 字符转换到数字类型TO_DATE(char[,'f
- 完全备份的SH文件:exp_comp.shrq=` date +"%m%d" `su - oracle -c "
- 在这篇文章(不敢妄称教程,最多称之为学习笔记)里,我会从头开始实现客户端模板的效果。不过你不要期望能够在这里找到可以直接拿去使用直接复用灵活
- 在jQuery的官方文档中,提示用户这是一个低级的方法,应该用.data()方法来代替。$.data( element, key, valu
- 平时每逢alexa排名更新时,我都需要将所有相关的同类网站的排名整理一下,看一下这些对手网站的排名更新情况。做的多了,也就烦了,虽然也才30
- 在Transact-SQL语句中,我们主要使用OpenDataSource函数、OPENROWSET 函数,关于函数的详细说明,请参考SQL
- 要实现的SQL查询很原始:要求从第一个表进行查询得到第二个表格式的数据,上网查询之后竟然能写出下面的SQL:代码如下:select * fr
- 对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散。很容易学习,并
- 我想把本篇作为css基础教程的序曲,从今天开始翻译和整理我从设计网页以来所学到的css基础知识。本教程会分成N个部分,单独发表,其间可能会插
- 如果您还不太了解XML技术,您可以先看看此文:XML的语法、结构以及相关的一些技术 及 XML DOM介绍和例子XML中 CDATA的作用: