用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的所有的浏览器中都生效。
第二步：投影效果和草书风格字体
现在，为了让便签突出显示，需要给它增添投影效果，然后，使用草书风格的字体替换掉之前的内容。我们通过
0
投稿猜你喜欢
前言Pycharm学习过程中，每次在一个Pycharm窗口建立一个新的文件夹，都需要重新配置anaconda环境。由于本人是初学者，所以写一- 最近人工智能等多门课需要复现论文，近两年的论文很多都是基于Pytorch环境做的实验，所以，这里总结一下Pytorch的安装教程，做好最快、
- 使用预训练模型的代码如下：# 加载预训练模型 resNet50 = models.resnet50(pretrained=True) Res
- 一：创建迁移在laravel中使用make:migration命令来创建迁移php artisan make:migration creat
- 本文实例讲述了Python udp网络程序实现发送、接收数据功能。分享给大家供大家参考，具体如下：1. udp网络程序-发送数据创建一个基于
- 1. 输入一个百分制成绩，要求输出成绩等级A、B、C、D、E，其中90~100分为A，80~89分为B，70~79分为C，60~69分为D，
- 引言反射是通过实体对象获取反射对象(Value、Type)，然后可以操作相应的方法。在某些情况下，我们可能并不知道变量的具体类型，这时候就可
- 上边文章中提到win的性能监视器是监控数据库性能必备的工具，接下来我就给大家介绍一些常见的监控指标，其实无非就是磁盘，cpu，内存等硬件的运
- 下载https://downloads.mysql.com/archives/community/下载上面的，下面的不行解压我的解压路径 E
- 背景：项目中有多个组件调用同一接口，为提高代码可维护性，需要封装公共方法直接return 接口调用的结果export function ge
- 一、协程官方描述;协程是子例程的更一般形式。 子例程可以在某一点进入并在另一点退出。 协程则可以在许多不同的点上进入、退出和恢复。 它们可通
- 本文实例讲述了Python记录详细调用堆栈日志的方法。分享给大家供大家参考。具体实现方法如下：import sysimport osdef
- 优化数据库的注意事项：1、关键字段建立索引。2、使用存储过程，它使SQL变得更加灵活和高效。3、备份数据库和清除垃圾数据。4、SQL语句语法
- 前言Golang 提供了database/sql包用于对SQL数据库的访问, 作为操作数据库的入口对象sql.DB, 主要为我们提供了两个重
- Python输入在Python中，使用内置函数input()可以接收用户的键盘输入input()函数的基本用法如下：variable = i
- python随机数种子seed()栗子1import numpy as npimport randomrandom.seed(0)np.ra
- seek()方法在偏移设定该文件的当前位置。参数是可选的，默认为0，这意味着绝对的文件定位，它的值如果是1，这意味着寻求相对于当
- 什么是 YARPYARP (另一个反向代理) 设计为一个库，提供核心代理功能，你可以根据应用程序的特定需求进行自定义。YARP 是使用 .N
- AIML全名为Artificial Intelligence Markup Language（人工智能标记语言），是一种创建自然语言软件代理
- 本文研究的主要是Python编程通过pandas将数据分割成时间跨度相等的数据块的相关内容，具体如下。先上数据，有如下dataframe格式
