HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

使用HTML 5/CSS3五步快速制作便签贴特效

2011-12-16 17:44| 发布者: admin| 查看: 15274| 评论: 4

摘要: 本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下: (注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!] 注:该效果可以在Safari, Chrome,Firefo ...
使用HTML 5/CSS3五步快速制作便签贴特效(1)

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

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

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

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

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


  1. <ul> 
  2.        <li><a href="#"> 
  3.            <h2>Dudu:h2> 
  4.            <p>最近咋没有美女发帖呢?我一定给个头条推荐,recommend!recommend!p> 
  5.        a>li> 
  6.        <li><a href="#"> 
  7.            <h2>汤姆大叔:h2> 
  8.            <p>Team的一个成员去了Microsoft做SDE3,又得hire new member了p> 
  9.        a>li> 
  10.        <li><a href="#"> 
  11.            <h2>技术弟弟:h2> 
  12.            <p>O2DS和我翻译的书是一样,我一定要比他翻得快, 晚上加班翻,fast! fast! fast!p> 
  13.        a>li> 
  14.        <li><a href="#"> 
  15.            <h2>Artech:h2> 
  16.            <p>WCF的帖子真是少,看来我得多发点帖子让大家学习呢p> 
  17.        a>li> 
  18.        <li><a href="#"> 
  19.            <h2>吉日嘎拉:h2> 
  20.            <p>将权限管理、工作流管理做到我能力的极致,一个人只能做好那么很少的几件事情p> 
  21.        a>li> 
  22.        <li><a href="#"> 
  23.            <h2>某武林高手:h2> 
  24.            <p>低于25000块的面试再也不去了,它grandma的p> 
  25.        a>li> 
  26.    ul> 


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


  1. *{    
  2.     margin:0;    
  3.     padding:0;    
  4.   }    
  5.   body{    
  6.     font-family:arial,sans-serif;    
  7.     font-size:100%;    
  8.     margin:3em;    
  9.     background:#666;    
  10.     color:#fff;    
  11.   }    
  12.   h2,p{    
  13.     font-size:100%;    
  14.     font-weight:normal;    
  15.   }    
  16.   ul,li{    
  17.     list-style:none;    
  18.   }    
  19.   ul{    
  20.     overflow:hidden;    
  21.     padding:3em;    
  22.   }    
  23.   ul li a{    
  24.     text-decoration:none;    
  25.     color:#000;    
  26.     background:#ffc;    
  27.     display:block;    
  28.     height:10em;    
  29.     width:10em;    
  30.     padding:1em;    
  31.   }    
  32.   ul li{    
  33.     margin:1em;    
  34.     float:left;    
  35.   } 


      效果如下:



123下一页
更多
7

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (7 人)

相关阅读

发表评论

最新评论

引用 森森森 2012-9-6 10:53
学习一下。
引用 微笑ッ 2012-7-21 16:32
很不错的一个标签
引用 ren 2012-2-9 23:09
好像很久前看过
引用 Cinderellahaha 2012-2-9 17:18
很好,研究一下

查看全部评论(4)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 04:04

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部