less中文官网：http://lesscss.cn/ 、 http://www.bootcss.com/p/lesscss/
Busy 视频教程：http://www.imooc.com/learn/102 、 http://www.imooc.com/learn/61
^_^肥仔John 入门文章 ：http://www.cnblogs.com/fsjohnhuang/p/4187675.html
原本跟sass那个似的装大尾巴狼写个api之类的但后来看了这么多资料之后觉的less官网已经很详细详细了。
做了个demo 是用koala编译的，设计图是出自酷站 xiaolinshy: http://www.zcool.com.cn/work/ZNjY1Njk2NA==.html
目录截图：
less文件夹截图：
编译后生成的css文件夹截图：
图片文件夹截图：
页面html
1 <!DOCTYPE html> 2 <html lang="en" manifes="appcache.appcache"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>驴友摄影</title> 6 <link rel="stylesheet" type="text/css" href="css/index.css"> 7 </head> 8 <body> 9 10 <div class="nav"> 11 <div class="cent"> 12 <div class="logoin"> 13 <span class="vam"> 14 <a href="#">登陆</a> 15 | 16 <a href="#">注册</a> 17 </span> 18 <span class="vam"> 19 <input type="text" class="search"><input type="button" class="search-btn"> 20 </span> 21 </div> 22 <ul> 23 <li><a href="#">首页</a></li> 24 <li><a href="#">活动</a></li> 25 <li><a href="#">专辑</a></li> 26 <li><a href="#">照片</a></li> 27 <li><a href="#">团队</a></li> 28 <li><a href="#">店铺</a></li> 29 </ul> 30 </div> 31 32 </div> 33 <div class="cent mt20 clear"> 34 <div class="leftMain"> 35 <a href="#"><img src="img/del_4.jpg" alt=""></a> 36 <div class="title-info mt20"> 37 <h4> 38 xxx知道谁的丰盛的水电费 39 </h4> 40 <p class="tar colr-gray"> 41 -------反正就是一些字 42 </p> 43 </div> 44 <div class="title-info "> 45 <p class="colr-gray"> 46 反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字<span class="colr-red">全文>></span> 47 </p> 48 </div> 49 <h4 class="main-title">最新专辑</h4> 50 <ul class="main-hills clear"> 51 <li> 52 <a href="#"> 53 <img src="img/del_5.jpg" alt=""> 54 <div class="ab-mark"> 55 <p class="one">山东-青岛</p> 56 <p class="two">乐享阳光和海浪</p> 57 </div> 58 </a> 59 </li> 60 <li> 61 <a href="#"> 62 <img src="img/del_5.jpg" alt=""> 63 <div class="ab-mark"> 64 <p class="one">山东-青岛</p> 65 <p class="two">乐享阳光和海浪</p> 66 </div> 67 </a> 68 </li> 69 <li> 70 <a href="#"> 71 <img src="img/del_5.jpg" alt=""> 72 <div class="ab-mark"> 73 <p class="one">山东-青岛</p> 74 <p class="two">乐享阳光和海浪</p> 75 </div> 76 </a> 77 </li> 78 <li> 79 <a href="#"> 80 <img src="img/del_5.jpg" alt=""> 81 <div class="ab-mark"> 82 <p class="one">山东-青岛</p> 83 <p class="two">乐享阳光和海浪</p> 84 </div> 85 </a> 86 </li> 87 <li> 88 <a href="#"> 89 <img src="img/del_5.jpg" alt=""> 90 <div class="ab-mark"> 91 <p class="one">山东-青岛</p> 92 <p class="two">乐享阳光和海浪</p> 93 </div> 94 </a> 95 </li> 96 <li> 97 <a href="#"> 98 <img src="img/del_5.jpg" alt=""> 99 <div class="ab-mark"> 100 <p class="one">山东-青岛</p> 101 <p class="two">乐享阳光和海浪</p> 102 </div> 103 </a> 104 </li> 105 </ul> 106 <h4 class="main-title">最新专辑</h4> 107 <ul class="main-hills sub-ul clear"> 108 <li> 109 <a href="#"> 110 <img src="img/del_5.jpg" alt=""> 111 </a> 112 <div class="subtitle"> 113 <p > 114 艳遇丽江 115 </p> 116 <p class="colr-red"> 117 西瓜太郎 118 </p> 119 <p> 120 <span class="colr-red">123</span>人气 / <span class="colr-red">123</span>评论 / <span class="colr-red">123</span>推荐 121 </p> 122 </div> 123 </li> 124 <li> 125 <a href="#"> 126 <img src="img/del_5.jpg" alt=""> 127 </a> 128 <div class="subtitle"> 129 <p > 130 艳遇丽江 131 </p> 132 <p class="colr-red"> 133 西瓜太郎 134 </p> 135 <p> 136 <span class="colr-red">123</span>人气 / <span class="colr-red">123</span>评论 / <span class="colr-red">123</span>推荐 137 </p> 138 </div> 139 </li> 140 <li> 141 <a href="#"> 142 <img src="img/del_5.jpg" alt=""> 143 </a> 144 <div class="subtitle"> 145 <p > 146 艳遇丽江 147 </p> 148 <p class="colr-red"> 149 西瓜太郎 150 </p> 151 <p> 152 <span class="colr-red">123</span>人气 / <span class="colr-red">123</span>评论 / <span class="colr-red">123</span>推荐 153 </p> 154 </div> 155 </li> 156 <li> 157 <a href="#"> 158 <img src="img/del_5.jpg" alt=""> 159 </a> 160 <div class="subtitle"> 161 <p > 162 艳遇丽江 163 </p> 164 <p class="colr-red"> 165 西瓜太郎 166 </p> 167 <p> 168 <span class="colr-red">123</span>人气 / <span class="colr-red">123</span>评论 / <span class="colr-red">123</span>推荐 169 </p> 170 </div> 171 </li> 172 <li> 173 <a href="#"> 174 <img src="img/del_5.jpg" alt=""> 175 </a> 176 <div class="subtitle"> 177 <p > 178 艳遇丽江 179 </p> 180 <p class="colr-red"> 181 西瓜太郎 182 </p> 183 <p> 184 <span class="colr-red">123</span>人气 / <span class="colr-red">123</span>评论 / <span class="colr-red">123</span>推荐 185 </p> 186 </div> 187 </li> 188 <li> 189 <a href="#"> 190 <img src="img/del_5.jpg" alt=""> 191 </a> 192 <div class="subtitle"> 193 <p > 194 艳遇丽江 195 </p> 196 <p class="colr-red"> 197 西瓜太郎 198 </p> 199 <p> 200 <span class="colr-red">123</span>人气 / <span class="colr-red">123</span>评论 / <span class="colr-red">123</span>推荐 201 </p> 202 </div> 203 </li> 204 </ul> 205 </div> 206 <div class="rightMain"> 207 <h3 class="rigth-h3 bg-red"> 208 推荐活动 209 </h3> 210 <ul class="ul-lists"> 211 <li><a href="#">云南是很多刚开始旅行者的首站目标</a></li> 212 <li><a href="#">云南是很多刚开始旅行者的首站目标</a></li> 213 <li><a href="#">云南是很多刚开始旅行者的首站目标</a></li> 214 <li><a href="#">云南是很多刚开始旅行者的首站目标</a></li> 215 <li><a href="#">云南是很多刚开始旅行者的首站目标</a></li> 216 <li><a href="#">云南是很多刚开始旅行者的首站目标</a></li> 217 <li><a href="#">云南是很多刚开始旅行者的首站目标</a></li> 218 </ul> 219 <div class="mt10"> 220 <a href="#"><img src="img/del_1.jpg" alt=""></a> 221 </div> 222 <h3 class="rigth-h3 mt30"> 223 最新评论 224 </h3> 225 <ul class="ul-reviews"> 226 <li> 227 <a href="#" class="portrait"> 228 <img src="img/del_2.jpg" alt=""> 229 </a> 230 <div class="rev-text"> 231 <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山 232 </div> 233 </li> 234 <li> 235 <a href="#" class="portrait"> 236 <img src="img/del_2.jpg" alt=""> 237 </a> 238 <div class="rev-text"> 239 <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山 240 </div> 241 </li> 242 <li> 243 <a href="#" class="portrait"> 244 <img src="img/del_2.jpg" alt=""> 245 </a> 246 <div class="rev-text"> 247 <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山 248 </div> 249 </li> 250 <li> 251 <a href="#" class="portrait"> 252 <img src="img/del_2.jpg" alt=""> 253 </a> 254 <div class="rev-text"> 255 <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山 256 </div> 257 </li> 258 <li> 259 <a href="#" class="portrait"> 260 <img src="img/del_2.jpg" alt=""> 261 </a> 262 <div class="rev-text"> 263 <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山 264 </div> 265 </li> 266 <li> 267 <a href="#" class="portrait"> 268 <img src="img/del_2.jpg" alt=""> 269 </a> 270 <div class="rev-text"> 271 <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山 272 </div> 273 </li> 274 <li> 275 <a href="#" class="portrait"> 276 <img src="img/del_2.jpg" alt=""> 277 </a> 278 <div class="rev-text"> 279 <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山 280 </div> 281 </li> 282 <li class="end"> 283 <a href="#" class="portrait"> 284 <img src="img/del_2.jpg" alt=""> 285 </a> 286 <div class="rev-text"> 287 <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山 288 </div> 289 </li> 290 </ul> 291 <h3 class="rigth-h3 mt35"> 292 店铺推荐 293 </h3> 294 <div class="over"> 295 <ul class="ul-recoms clear"> 296 <li> 297 <a href=""><img src="img/del_3.jpg" alt=""></a> 298 <p>我就是王二小</p> 299 </li> 300 <li> 301 <a href=""><img src="img/del_3.jpg" alt=""></a> 302 <p>别用鼠标点我</p> 303 </li> 304 <li> 305 <a href=""><img src="img/del_3.jpg" alt=""></a> 306 <p>红配绿</p> 307 </li> 308 <li> 309 <a href=""><img src="img/del_3.jpg" alt=""></a> 310 <p>飞飞</p> 311 </li> 312 <li> 313 <a href=""><img src="img/del_3.jpg" alt=""></a> 314 <p>石磊</p> 315 </li> 316 <li> 317 <a href=""><img src="img/del_3.jpg" alt=""></a> 318 <p>黄金太阳</p> 319 </li> 320 </ul> 321 </div> 322 </div> 323 </div> 324 <div class="footr"> 325 <div class="cent"> 326 Copy Right 1996-2014 domain.com All Rights Reserved.某某公司版权所有.京ICP备1234656号 327 </div> 328 </div> 329 </body> 330 </html>
less 文件 less-base.less 底层库：
1 .base(){ 2 html {margin: 0; padding: 0; border: 0;_background-image:url(n1othing.txt)} 3 body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } 4 ol, ul, li { list-style: none; } 5 body {line-height: 1.5; background: white; font-family: 'microsoft yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333;} 6 table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline;} 7 caption, th, td { text-align: left; font-weight: normal; float: none !important; } 8 table, th, td, select, img, input,object{ vertical-align: middle;} 9 :focus { outline: 0;} 10 input,select{margin:0;} 11 a { color: #005EA7; text-decoration: none; } 12 a:hover {color: #C7000B; text-decoration: none; } 13 p,a,td{word-wrap:break-word;word-break:break-all;} 14 img { border: none; } 15 textarea{ resize:none;border:1px solid #ccc;} 16 textarea:hover{border-color:#ccc;} 17 input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius: 0;font-family:'microsoft yahei','黑体', Arial, Helvetica, sans-serif;} 18 input[type="text"]{border:solid 1px #ccc; border-radius:0;} 19 html,body{} 20 dfn {font-style: normal;font-family: Arial;} 21 } 22 23 .fl(){ float:left; } 24 .fr(){ float:right;} 25 .float( @dire : left ){ 26 float:@dire; 27 } 28 29 .clear(){ 30 *zoom:1; 31 &:after{ 32 content: ""; 33 display: block; 34 height: 0; 35 clear: both; 36 visibility: hidden; 37 overflow: hidden; 38 } 39 } 40 41 .clr(){ 42 clear: both; 43 display: block; 44 font-size: 0; 45 height: 0; 46 line-height: 0; 47 overflow: hidden; 48 } 49 50 .base-fonts( @n,@i:12,@un:px) when ( @i =< @n ) { 51 .fn-@{i} { 52 font-size:unit(@i, @un); 53 } 54 .base-fonts( @n,( @i+2 ) ); 55 } 56 57 .base-styles(@mt:mt,@n,@i:5,@un:px ) when ( @i =< @n ) { 58 .@{mt}-@{i} { 59 margin-top:unit(@i, @un); 60 } 61 .base-styles( @n,( @i+5 ) ); 62 } 63 64 .ellipsis(){ 65 white-space:nowrap; 66 text-overflow:ellipsis; 67 overflow:hidden; 68 } 69 70 .tal(){ text-align: right; } 71 .tac(){ text-align: center; } 72 .tar(){ text-align: right; } 73 .text-align( @dir:left ){text-align: @dir;} 74 .over(){overflow:hidden; } 75 .hide(){ displaye:none; } 76 .block(){ displaye:block; }
less 文件 index.less ：
1 @import (reference) "less-base.less"; 2 3 .base(); 4 @back:#212121; 5 @red:#e60044; 6 @gray:#dadada; 7 @gray2:#787878; 8 9 .base-fonts(48); 10 11 12 13 .over{overflow:hidden; } 14 .vam{vertical-align: middle; } 15 .tal{ text-align: right; } 16 .tar{ text-align: right; } 17 .colr-gray{ color:@gray2;} 18 .colr-red{ color:@red;} 19 .fl{float:left;} 20 .fr{float:right;} 21 .clear{ 22 *zoom:1; 23 &:after{ 24 content: ""; 25 display: block; 26 height: 0; 27 clear: both; 28 visibility: hidden; 29 overflow: hidden; 30 } 31 } 32 33 .mt10{ margin-top:10px!important;} 34 .mt20{ margin-top:20px!important;} 35 .mt30{ margin-top:30px!important;} 36 .mt35{ margin-top:35px!important;} 37 38 .cent{ width:1000px; margin:0 auto; } 39 .logoin{ 40 height:36px; 41 line-height: 44px; 42 text-align: right; 43 overflow:hidden; 44 font-size: 12px; 45 color:#fff; 46 .search{ 47 margin:0; 48 padding:0; 49 width:157px; 50 height:24px; 51 line-height: 24px; 52 vertical-align: middle; 53 border:none; 54 } 55 .search-btn{ 56 margin:0; 57 padding:0; 58 width:26px; 59 height:24px; 60 background-color: #fff; 61 border:none; 62 vertical-align: middle; 63 background:#fff url(../img/search-ico.png) no-repeat center center; 64 cursor: pointer; 65 } 66 } 67 .nav{ 68 ul{ float:right;} 69 ul li{ 70 float:left; 71 line-height:59px; 72 width:74px; 73 text-align: right; 74 } 75 a{ 76 color:#fff; 77 text-decoration:none; 78 } 79 80 background:@back; 81 .clear(); 82 83 } 84 85 .title-info{ 86 margin-bottom:-1px; 87 border:1px solid @gray; 88 padding: 20px; 89 line-height:20px; 90 font-size:12px; 91 h4{ 92 font-size:22px; 93 } 94 95 } 96 97 .leftMain{ 98 .fl(); 99 width:746px; 100 } 101 102 .main-title{ 103 height:70px; 104 overflow:hidden; 105 text-indent: 20px; 106 font-size:18px; 107 line-height:86px; 108 } 109 110 .main-hills{ 111 width:(235+20)*3px; 112 height:510px; 113 overflow:hidden; 114 li{ 115 position: relative; 116 .fl(); 117 width:235px; 118 margin:0 20px 40px 0; 119 } 120 .ab-mark{ 121 position: absolute; 122 left:0; 123 top:40px; 124 background:rgba(0, 0, 0, 0.5); 125 padding:16px 24px; 126 width:163-(24*2)+px; 127 line-height:30px; 128 color:#fff; 129 } 130 img{ 131 width:235px; 132 height:235px; 133 } 134 .one{ 135 font-size:20px; 136 font-weight: bold; 137 } 138 .two{ 139 font-size:14px; 140 } 141 &.sub-ul{ 142 height:636px; 143 li{ 144 margin:0 20px 24px 0; 145 } 146 } 147 .subtitle{ 148 padding:10px 0 0 24px; 149 line-height:20px; 150 font-size:12px; 151 } 152 } 153 154 .rightMain{ 155 .fr(); 156 width:235px; 157 } 158 159 .rigth-h3{ 160 line-height:38px; 161 background:@back; 162 color:#fff; 163 text-indent:13px; 164 font-size:18px; 165 166 &.bg-red{ 167 background:@red; 168 } 169 } 170 171 .ul-lists{ 172 border-left:1px solid @gray; 173 border-right:1px solid @gray; 174 li{ 175 line-height:50px; 176 overflow: hidden; 177 border-bottom:1px solid @gray; 178 } 179 180 a{ 181 display:block; 182 margin:0 12px; 183 font-size:12px; 184 .ellipsis(); 185 color:@back; 186 } 187 } 188 189 .ul-reviews{ 190 li{ 191 padding:12px 0 10px 14px; 192 border-bottom:1px solid @gray; 193 .clear(); 194 } 195 .end{ 196 border:none; 197 } 198 .portrait{ 199 .fl(); 200 } 201 .rev-text{ 202 font-size:12px; 203 line-height:20px; 204 margin:0 16px 0 54px; 205 height:40px; 206 overflow: hidden; 207 span{ margin-right:3px;} 208 } 209 } 210 211 .ul-recoms{ 212 padding:20px 0 0 10px; 213 width:230px; 214 li{ 215 .fl(); 216 margin-right:15px; 217 } 218 219 img{ 220 width:100px; 221 height:100px; 222 } 223 224 p{ 225 height:40px; 226 line-height:28px; 227 font-size:12px; 228 text-indent: 13px; 229 } 230 } 231 232 .footr{ 233 margin-top:20px; 234 background:@back; 235 line-height: 58px; 236 text-align: center; 237 color:#fff; 238 font-size: 12px; 239 }
koala编译之后的index.css：
1 html { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 _background-image: url(n1othing.txt); 6 } 7 body, 8 div, 9 span, 10 object, 11 iframe, 12 h1, 13 h2, 14 h3, 15 h4, 16 h5, 17 h6, 18 p, 19 blockquote, 20 pre, 21 a, 22 abbr, 23 acronym, 24 address, 25 code, 26 del, 27 dfn, 28 em, 29 img, 30 q, 31 dl, 32 dt, 33 dd, 34 ol, 35 ul, 36 li, 37 fieldset, 38 form, 39 label, 40 legend, 41 caption, 42 tbody, 43 tfoot, 44 thead, 45 article, 46 aside, 47 dialog, 48 figure, 49 footer, 50 header, 51 hgroup, 52 nav, 53 section { 54 margin: 0; 55 padding: 0; 56 border: 0; 57 font-size: 100%; 58 vertical-align: baseline; 59 } 60 ol, 61 ul, 62 li { 63 list-style: none; 64 } 65 body { 66 line-height: 1.5; 67 background: white; 68 font-family: 'microsoft yahei', Arial, Helvetica, sans-serif; 69 font-size: 12px; 70 color: #333; 71 } 72 table, 73 tr, 74 th, 75 td { 76 border-collapse: collapse; 77 margin: 0; 78 padding: 0; 79 font-size: 100%; 80 vertical-align: baseline; 81 } 82 caption, 83 th, 84 td { 85 text-align: left; 86 font-weight: normal; 87 float: none !important; 88 } 89 table, 90 th, 91 td, 92 select, 93 img, 94 input, 95 object { 96 vertical-align: middle; 97 } 98 :focus { 99 outline: 0; 100 } 101 input, 102 select { 103 margin: 0; 104 } 105 a { 106 color: #005EA7; 107 text-decoration: none; 108 } 109 a:hover { 110 color: #C7000B; 111 text-decoration: none; 112 } 113 p, 114 a, 115 td { 116 word-wrap: break-word; 117 word-break: break-all; 118 } 119 img { 120 border: none; 121 } 122 textarea { 123 resize: none; 124 border: 1px solid #ccc; 125 } 126 textarea:hover { 127 border-color: #ccc; 128 } 129 input[type="text"], 130 input[type="button"] { 131 -webkit-appearance: none; 132 border-radius: 0; 133 font-family: 'microsoft yahei', '黑体', Arial, Helvetica, sans-serif; 134 } 135 input[type="text"] { 136 border: solid 1px #ccc; 137 border-radius: 0; 138 } 139 dfn { 140 font-style: normal; 141 font-family: Arial; 142 } 143 .fn-12 { 144 font-size: 12px; 145 } 146 .fn-14 { 147 font-size: 14px; 148 } 149 .fn-16 { 150 font-size: 16px; 151 } 152 .fn-18 { 153 font-size: 18px; 154 } 155 .fn-20 { 156 font-size: 20px; 157 } 158 .fn-22 { 159 font-size: 22px; 160 } 161 .fn-24 { 162 font-size: 24px; 163 } 164 .fn-26 { 165 font-size: 26px; 166 } 167 .fn-28 { 168 font-size: 28px; 169 } 170 .fn-30 { 171 font-size: 30px; 172 } 173 .fn-32 { 174 font-size: 32px; 175 } 176 .fn-34 { 177 font-size: 34px; 178 } 179 .fn-36 { 180 font-size: 36px; 181 } 182 .fn-38 { 183 font-size: 38px; 184 } 185 .fn-40 { 186 font-size: 40px; 187 } 188 .fn-42 { 189 font-size: 42px; 190 } 191 .fn-44 { 192 font-size: 44px; 193 } 194 .fn-46 { 195 font-size: 46px; 196 } 197 .fn-48 { 198 font-size: 48px; 199 } 200 .over { 201 overflow: hidden; 202 } 203 .vam { 204 vertical-align: middle; 205 } 206 .tal { 207 text-align: right; 208 } 209 .tar { 210 text-align: right; 211 } 212 .colr-gray { 213 color: #787878; 214 } 215 .colr-red { 216 color: #e60044; 217 } 218 .fl { 219 float: left; 220 } 221 .fr { 222 float: right; 223 } 224 .clear { 225 *zoom: 1; 226 } 227 .clear:after { 228 content: ""; 229 display: block; 230 height: 0; 231 clear: both; 232 visibility: hidden; 233 overflow: hidden; 234 } 235 .mt10 { 236 margin-top: 10px!important; 237 } 238 .mt20 { 239 margin-top: 20px!important; 240 } 241 .mt30 { 242 margin-top: 30px!important; 243 } 244 .mt35 { 245 margin-top: 35px!important; 246 } 247 .cent { 248 width: 1000px; 249 margin: 0 auto; 250 } 251 .logoin { 252 height: 36px; 253 line-height: 44px; 254 text-align: right; 255 overflow: hidden; 256 font-size: 12px; 257 color: #fff; 258 } 259 .logoin .search { 260 margin: 0; 261 padding: 0; 262 width: 157px; 263 height: 24px; 264 line-height: 24px; 265 vertical-align: middle; 266 border: none; 267 } 268 .logoin .search-btn { 269 margin: 0; 270 padding: 0; 271 width: 26px; 272 height: 24px; 273 background-color: #fff; 274 border: none; 275 vertical-align: middle; 276 background: #ffffff url(../img/search-ico.png) no-repeat center center; 277 cursor: pointer; 278 } 279 .nav { 280 background: #212121; 281 *zoom: 1; 282 } 283 .nav ul { 284 float: right; 285 } 286 .nav ul li { 287 float: left; 288 line-height: 59px; 289 width: 74px; 290 text-align: right; 291 } 292 .nav a { 293 color: #fff; 294 text-decoration: none; 295 } 296 .nav:after { 297 content: ""; 298 display: block; 299 height: 0; 300 clear: both; 301 visibility: hidden; 302 overflow: hidden; 303 } 304 .nav:after { 305 content: ""; 306 display: block; 307 height: 0; 308 clear: both; 309 visibility: hidden; 310 overflow: hidden; 311 } 312 .title-info { 313 margin-bottom: -1px; 314 border: 1px solid #dadada; 315 padding: 20px; 316 line-height: 20px; 317 font-size: 12px; 318 } 319 .title-info h4 { 320 font-size: 22px; 321 } 322 .leftMain { 323 float: left; 324 width: 746px; 325 } 326 .main-title { 327 height: 70px; 328 overflow: hidden; 329 text-indent: 20px; 330 font-size: 18px; 331 line-height: 86px; 332 } 333 .main-hills { 334 width: 765px; 335 height: 510px; 336 overflow: hidden; 337 } 338 .main-hills li { 339 position: relative; 340 float: left; 341 width: 235px; 342 margin: 0 20px 40px 0; 343 } 344 .main-hills .ab-mark { 345 position: absolute; 346 left: 0; 347 top: 40px; 348 background: rgba(0, 0, 0, 0.5); 349 padding: 16px 24px; 350 width: 115 px; 351 line-height: 30px; 352 color: #fff; 353 } 354 .main-hills img { 355 width: 235px; 356 height: 235px; 357 } 358 .main-hills .one { 359 font-size: 20px; 360 font-weight: bold; 361 } 362 .main-hills .two { 363 font-size: 14px; 364 } 365 .main-hills.sub-ul { 366 height: 636px; 367 } 368 .main-hills.sub-ul li { 369 margin: 0 20px 24px 0; 370 } 371 .main-hills .subtitle { 372 padding: 10px 0 0 24px; 373 line-height: 20px; 374 font-size: 12px; 375 } 376 .rightMain { 377 float: right; 378 width: 235px; 379 } 380 .rigth-h3 { 381 line-height: 38px; 382 background: #212121; 383 color: #fff; 384 text-indent: 13px; 385 font-size: 18px; 386 } 387 .rigth-h3.bg-red { 388 background: #e60044; 389 } 390 .ul-lists { 391 border-left: 1px solid #dadada; 392 border-right: 1px solid #dadada; 393 } 394 .ul-lists li { 395 line-height: 50px; 396 overflow: hidden; 397 border-bottom: 1px solid #dadada; 398 } 399 .ul-lists a { 400 display: block; 401 margin: 0 12px; 402 font-size: 12px; 403 white-space: nowrap; 404 text-overflow: ellipsis; 405 overflow: hidden; 406 color: #212121; 407 } 408 .ul-reviews li { 409 padding: 12px 0 10px 14px; 410 border-bottom: 1px solid #dadada; 411 *zoom: 1; 412 } 413 .ul-reviews li:after { 414 content: ""; 415 display: block; 416 height: 0; 417 clear: both; 418 visibility: hidden; 419 overflow: hidden; 420 } 421 .ul-reviews li:after { 422 content: ""; 423 display: block; 424 height: 0; 425 clear: both; 426 visibility: hidden; 427 overflow: hidden; 428 } 429 .ul-reviews .end { 430 border: none; 431 } 432 .ul-reviews .portrait { 433 float: left; 434 } 435 .ul-reviews .rev-text { 436 font-size: 12px; 437 line-height: 20px; 438 margin: 0 16px 0 54px; 439 height: 40px; 440 overflow: hidden; 441 } 442 .ul-reviews .rev-text span { 443 margin-right: 3px; 444 } 445 .ul-recoms { 446 padding: 20px 0 0 10px; 447 width: 230px; 448 } 449 .ul-recoms li { 450 float: left; 451 margin-right: 15px; 452 } 453 .ul-recoms img { 454 width: 100px; 455 height: 100px; 456 } 457 .ul-recoms p { 458 height: 40px; 459 line-height: 28px; 460 font-size: 12px; 461 text-indent: 13px; 462 } 463 .footr { 464 margin-top: 20px; 465 background: #212121; 466 line-height: 58px; 467 text-align: center; 468 color: #fff; 469 font-size: 12px; 470 }
后记：
那个底层库 其实循环的部分让我想了好久，看了“^_^肥仔John”那文章才知道是 递归循环，从这点个人觉得不如sass，当然那个底层的库还可以在多一些方法，比如给这个css3加前缀的方法，这demo里我都没用到继承之类的比较典型的预编译的东东。。。。差不多这样不会看api吧~