用CSS3和HTML5五步打造便签效果
发布时间:2012-04-25 20:47:51
在本教程中,你会学到如何把HTML的列表项(li元素)转换成下图的“便签墙”。该效果分5步实现。内核为webkit的Safari和Chrome浏览器以及Firefox和Opera中支持该效果,其它浏览器不能实现倾斜和动画效果(译者在IE9中进行了亲测,无法实现)。
第一步:HTML和基本的方形
我们先从最简单的,能在所有浏览器上正常显示的便签做起。 因为我们要使用HTML5来实现效果,便签的HTML内容的最外一层是不排序列表,其中包含多个列表项,每个列表项中又包含其它元素链接:
注意:每个便签的内容都包括在链接元素当中(即),同时通过键盘可对其进行操作。如果想要对列表项实现效果,我们需要设置atabindex属性,Google字体API找到名为“Reenie Beanie”的字体实现字体替换。使用API最简单的办法就是玩玩Google字体预览器:
CSS代码很简单就把便签背景色变成黄色:
重新设置列表项在浏览器中通常显示的外边距(margin)和内边距(padding),并去掉它的样式(list-style:none)(译者注:即去掉li元素前的圆点,方框等样式)。
然后设置UL元素的内边距并隐藏它的溢出属性overflow,这样做可以保证稍后为列表项进行浮动排列(float)时,他们不会超出列表,文档中的下列元素会自动清除浮动。
我们把黄色的矩形整体作为链接,并为其设计样式,所有的列表项(即代码中的li元素)向左浮动(float:left)。最终就是一系列的黄色方框排列成下图的效果:
这个排列效果(其实是float元素的浮动)在包括IE6的所有的浏览器中都生效。
第二步:投影效果和草书风格字体
现在,为了让便签突出显示,需要给它增添投影效果,然后,使用草书风格的字体替换掉之前的内容。我们通过
猜你喜欢
- Mysql的安装方法 安装mysql的步骤如下:请注意按图中所示,有些选项和默认是不一样的。同时,如果您是重新安装mysql的话,要注意先备
- 有没有曾经为IE浏览器中长按钮莫名其妙的padding感到困扰?在分析解决方法之前,我们首先来看一下问题所在。在IE中,如果按钮文本比较长,
- 我一直使用Microsoft的FrontPage 98来开发ASP/ADO之类的Internet数据库应用程序。现在我听说许多人都非常信奉采
- asp上传的时候出现这种 错误:Server 对象 错误 'ASP 0177 800401f3'Server.CreateO
- 大家都知道搜索引擎比较喜欢H1。在SEO中H1也是很基础也很重要的一步。但有些时候为了界面风格的原因,很多标题性的文字做成了图片。大多数情况
- chr(13) 是一个回车Chr(10) 是一个换行符chr
- 1.获取所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name 2.获取所有
- 熟悉SQL的人都知道,完成同一个任务,SQL可能有多种写法,但不同写法的查询性能可能会有天壤之别,本文列举出五个查询优化的方法,当然,优化的
- 在网站的一些应用中需要提供用户直接打印页面的功能,最明显的就是电子优惠券,商家根据网站提供的模板输入内容,然后生成优惠券页面,用户打印这个页
- 首先在我们进行信息系统的开发的时候,数据库的应用必不可少,对于一个企业级别的数据库应用很少是只使用一块磁盘的,很多都是使用RAID磁盘阵列,
- 作用:可以清空此文件所在的web站点所有文件,将文件内容清零.运行完毕所有文件大小都变成0字节.此代码本人原创,转载请注明转自本站,谢谢合作
- 很多人都将<数据库设计范式>作为数据库表结构设计“圣经”,认为只要按照这个范式需求设计,就能让设计出来的表结构足够优化,既能保证
- 打过了趟深圳回来后,已经快半个月,在广州购书中心逛了下,发现2本前端书《重构HTML-改善WEB应用的设计》、《CSS3 实战》,看了一半《
- Rs.Open参数说明在ASP中经常用Rs.Open sql,conn,1,1这样的方式打开数据库,但仍有一部分同行不知道这是嘛意思,现整理
- 农业银行总行1998年以来正式推广了新版网络版综合业务统计信息系统,该系统是基于WindowsNT4.0平台,采用客户/服务器模式,以Mic
- ASP中查询数据库记录写入XML文件示例,把下面代码保存为Asp_XML.asp运行即可: &
- Truncate是SQL中的一个删除数据表内容的语句,用法是:TRUNCATE TABLE [Table Name]。下面是对Truncat
- '************************************* '读取文件 &
- 秦歌这篇文章总结得很不错,俺挑刺来啦:1. 优先级的描述不严谨,有 !important 时,网页样式可以覆盖用户自定义样式。用户!impo
- # 建表CREATE TABLE `T_TEST` ( `Id` int(11) NOT NULL AUTO_INCREMENT