您所在的位置:开发 > Web > 热点推荐 > 使用HTML 5/CSS3五步快速制作便签贴特效(1)

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

2011-12-16 11:11 汤姆大叔 汤姆大叔的博客 我要评论(0) 字号:T | T
一键收藏,随时查看,分享好友!

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

AD:

本篇文字将展示给你的是,如何利用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.   } 

效果如下:

内容导航

分享到:

网友评论TOP5

查看所有评论(

提交评论

热点职位

更多>>

热点专题

更多>>

读书

系统分析师考试辅导(2007版)
《系统分析师考试辅导(2007版)》内容涵盖了最新的系统分析师考试大纲信息系统综合知识的所有知识点,分析了近3年信息系统分析

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i