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>