使用HTML5/CSS3五步快速制作便签贴特效代码示例分享(图文)


本文摘自PHP中文网,作者黄舟,侵删。

摘要

本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:

(注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!)

注:该效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于对HTML5的支持不完全,所以看不出效果。

第一步:创建基本HTML和正方形

首先添加基本的HTML结构以及构建基本的正方形,代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

Dudu:

最近咋没有美女发帖呢?我一定给个头条推荐,recommend!recommend!

 

 

汤姆大叔:

Team的一个成员去了Microsoft做SDE3,又得hire new member了

 

 

技术弟弟:

O2DS和我翻译的书是一样,我一定要比他翻得快, 晚上加班翻,fast! fast! fast!

 

 

Artech:

WCF的帖子真是少,看来我得多发点帖子让大家学习呢

 

 

吉日嘎拉:

将权限管理、工作流管理做到我能力的极致,一个人只能做好那么很少的几件事情

 

 

某武林高手:

低于25000块的面试再也不去了,它grandma的

每个note都加一个href连接,主要是为了支持键盘访问,CSS代码如下:

1

{:;:;}{:;:;:;:;:;}{:;:;}{:;}{:;:;}{:;:;:;:;:;:;:;}{:;:;}

效果如下:

阅读剩余部分

相关阅读 >>

HTML5实现分层屏幕适配

HTML5+a*算法实现游戏寻路的代码分享

HTML5语义化总结

HTML5画布的详细介绍

HTML5初窥之简介

css3新特性有哪些

HTML5实现下雪效果的实例代码分享

HTML5实现图片的3d旋转效果

怎样做出h5响应式网页设计

详解HTML5拖放功能实例

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...