使用使用HTML5/CSS3五步快速制作便签贴特效五步快速制作便签贴特效
本篇文字将展示给你的是，如何利用HTML5/CSS3，仅用5步就可以制作便签贴效果的HTML页面，效果图如下：
(注：图里的文字纯属杜撰，搞笑目的，如有雷同，纯属巧合，谢谢！)
注：该效果可以在Safari, Chrome,Firefox和Opera在看到效果，IE上由于对HTML5的支持不完全，所以看不出效果。
第一步：创建基本HTML和正方形
首先添加基本的HTML结构以及构建基本的正方形，代码如下：
<ul>
<li><a href="#">
<h2>Dudu：</h2>
<p>最近咋没有美女发帖呢？我一定给个头条推荐,recommend!recommend!</p>
</a></li>
<li><a href="#">
<h2>汤姆大叔：</h2>
<p>Team的一个成员去了Microsoft做SDE3，又得hire new member了</p>
</a></li>
<li><a href="#">
<h2>技术弟弟：</h2>
<p>O2DS和我翻译的书是一样，我一定要比他翻得快, 晚上加班翻,fast! fast! fast!</p>
</a></li>
<li><a href="#">
<h2>Artech：</h2>
<p>WCF的帖子真是少，看来我得多发点帖子让大家学习呢</p>
</a></li>
<li><a href="#">
<h2>吉日嘎拉：</h2>
<p>将权限管理、工作流管理做到我能力的极致，一个人只能做好那么很少的几件事情</p>
</a></li>
<li><a href="#">
<h2>某武林高手：</h2>
<p>低于25000块的面试再也不去了，它grandma的</p>
</a></li>
</ul>
每个note都加一个href连接，主要是为了支持键盘访问，CSS代码如下：
资源评论
weixin_38614268
- 粉丝: 7
- 资源: 950
最新资源
- 10-【附件】-10-续签劳动合同补充协议书.docx
- 10-【附件】-14-劳动合同到期人员续签审批表.xlsx
- 10-【附件】-11-续订劳动合同意向通知书及回执.docx
- 10-【附件】-07-终止劳动合同通知书.docx
- 10-【附件】-12-劳动合同终止办理情况登记表.docx
- 10-【附件】-08-终止劳动合同证明书.docx
- 10-【附件】-13-劳动合同签收备案表.xlsx
- 11-【员工手册】-06-公司员工手册.docx
- 四旋翼无人机PID控制的MATLAB仿真.zip
- 四足机器人线性MPC控制平台Webots MATLAB.zip
- 睡眠波分析是一个开源的matlab工具箱，用于对睡眠脑电图数据中的各种波形进行评分和分析.zip
- 随机森林的MATLAB实现支持任意弱学习者，你可以定义.zip
- 它包含与我的机器学习笔记相关的所有MATLAB演示代码.zip
- 孙宏福QSM重构管道的MATLAB代码.zip
- 它是用MATLAB开发的用于建筑或暖通空调系统能源系统建模的小型软件.zip
- 提供的函数将您从实时脚本生成的latex转换为markdown，以便它可以轻松地生成带有MATLAB代码方程和图形的R.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
