本文摘自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 |
|
每个note都加一个href连接,主要是为了支持键盘访问,CSS代码如下:
1 |
|
效果如下:
相关阅读 >>
HTML5 meter标签是什么意思?HTML5 meter标签的用法及属性介绍
HTML5上传图片ios系统和android系统下均显示摄像头拍照和图片选择
HTML5开发实例-threejs实现粒子动画飘花效果代码分享
如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)
更多相关阅读请进入《HTML5》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者