欢迎光临
Html5圈

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

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

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

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

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

      注:该效果可以在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.   } 


      效果如下:


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

未经允许不得转载:Html5圈 » 使用HTML 5/CSS3五步快速制作便签贴特效

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

HTML5网站定制 更优秀 更专业

联系我们全国服务热线