便签 效果设计 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <title>测试页面</title>
  5         <meta charset="UTF-8">
  6         <link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">
  7         <style>
  8             *{  
  9               margin:0;  
 10               padding:0;  
 11             }  
 12             body{  
 13               font-family:arial,sans-serif;  
 14               font-size:100%;  
 15               margin:3em;  
 16               background:#666;  
 17               color:#fff;  
 18             }  
 19             h2,p{  
 20               font-size:100%;  
 21               font-weight:normal;  
 22             }  
 23             ul,li{  
 24               list-style:none;  
 25             }  
 26             ul{  
 27               overflow:hidden;  
 28               padding:3em;  
 29             }  
 30             ul li a{  
 31               text-decoration:none;  
 32               color:#000;  
 33               background:#ffc;  
 34               display:block;  
 35               height:10em;  
 36               width:10em;  
 37               padding:1em;  
 38             }  
 39             ul li{  
 40               margin:1em;  
 41               float:left;  
 42             }
 43 
 44             ul li h2
 45             {
 46                 font-size: 140%;
 47                 font-weight: bold;
 48                 padding-bottom: 10px;
 49             }
 50             ul li p
 51             {
 52                 font-family: "Reenie Beanie" ,arial,sans-serif,微软雅黑;
 53                 font-size: 110%;
 54             }
 55 
 56             ul li a
 57             {
 58                 text-decoration: none;
 59                 color: #000;
 60                 background: #ffc;
 61                 display: block;
 62                 height: 10em;
 63                 width: 10em;
 64                 padding: 1em; /* Firefox */
 65                 -moz-box-shadow: 5px 5px 7px rgba(33,33,33,1); /* Safari+Chrome */
 66                 -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); /* Opera */
 67                 box-shadow: 5px 5px 7px rgba(33,33,33,.7);
 68             }
 69             /* 斜正方形 */
 70             ul li a{  
 71                 -webkit-transform:rotate(-6deg);  
 72                 -o-transform:rotate(-6deg);  
 73                 -moz-transform:rotate(-6deg); 
 74                 -moz-transition:-moz-transform .15s linear;  
 75                   -o-transition:-o-transform .15s linear;  
 76                   -webkit-transition:-webkit-transform .15s linear;   
 77             }
 78 
 79             /* 随机倾斜 */
 80             ul li:nth-child(even) a{  
 81                 -o-transform:rotate(4deg);  
 82                   -webkit-transform:rotate(4deg);  
 83                   -moz-transform:rotate(4deg);  
 84                   position:relative;  
 85                   top:5px; 
 86                   background:#cfc;  
 87             }  
 88             ul li:nth-child(3n) a{  
 89                   -o-transform:rotate(-3deg);  
 90                   -webkit-transform:rotate(-3deg);  
 91                   -moz-transform:rotate(-3deg);  
 92                   position:relative;  
 93                   top:-5px;  
 94             }  
 95             ul li:nth-child(5n) a{  
 96                   -o-transform:rotate(5deg);  
 97                   -webkit-transform:rotate(5deg);  
 98                   -moz-transform:rotate(5deg);  
 99                   position:relative;  
100                   top:-10px;  
101             }
102             /* 焦点 */
103             ul li a:hover,ul li a:focus{  
104                   -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);  
105                   -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);  
106                   box-shadow:10px 10px 7px rgba(0,0,0,.7);  
107                   -webkit-transform: scale(1.25);  
108                   -moz-transform: scale(1.25);  
109                   -o-transform: scale(1.25);  
110                   position:relative;  
111                   z-index:5;  
112                   background:#ccf;  
113             } 
114         </style>
115     </head>
116     <body>
117         <ul>
118             <li><a href="#">
119                 <h2>Dudu：</h2>
120                 <p>最近咋没有美女发帖呢？我一定给个头条推荐,recommend!recommend!</p>
121             </a></li>
122             <li><a href="#">
123                 <h2>汤姆大叔：</h2>
124                 <p>Team的一个成员去了Microsoft做SDE3，又得hire new member了</p>
125             </a></li>
126             <li><a href="#">
127                 <h2>技术弟弟：</h2>
128                 <p>O2DS和我翻译的书是一样，我一定要比他翻得快, 晚上加班翻,fast! fast! fast!</p>
129             </a></li>
130             <li><a href="#">
131                 <h2>Artech：</h2>
132                 <p>WCF的帖子真是少，看来我得多发点帖子让大家学习呢</p>
133             </a></li>
134             <li><a href="#">
135                 <h2>吉日嘎拉：</h2>
136                 <p>将权限管理、工作流管理做到我能力的极致，一个人只能做好那么很少的几件事情</p>
137             </a></li>
138             <li><a href="#">
139                 <h2>某武林高手：</h2>
140                 <p>低于25000块的面试再也不去了，它grandma的</p>
141             </a></li>
142     </ul>    
143     </body>
144 </html>

 

posted @ 2015-08-14 09:43  super 86  阅读(268)  评论(0)    收藏  举报