标签：ann blog vue.js lock text amp width 关于我 rsh
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>珠峰培训</title> 6 <!--清除默认样式--> 7 <link rel="stylesheet" href="css/reset.css" type="text/css"> 8 <link rel="stylesheet" href="css/index.css" type="text/css"> 9 </head> 10 <body> 11 <!--header 头部--> 12 <div class="main clearfix"> 13 <h1> 14 <a href="###"><img src="img/logo.png" alt=""></a> 15 </h1> 16 <div class="nav"> 17 <ul class="clearfix"> 18 <li><a href="">Node培训课程</a></li> 19 <li><a href="">HTML5培训课程</a></li> 20 <li><a href="">视频教程</a></li> 21 <li><a href="">课程文档</a></li> 22 <li class="noMargin"><a href="">联系我们</a></li> 23 </ul> 24 </div> 25 <div class="login"> 26 <div class="car"> 27 <span class="carShop"><i></i>购物车</span> 28 29 <!--隐藏的盒子--> 30 <div class="car-hidden clearfix"> 31 <h3>我的购物车 <span>已加入0门课程</span></h3> 32 <div class="car-cont"> 33 <p class="carBg"></p> 34 <p class="carEmpty">购物车里空空如也</p> 35 <p class="course"><a href="###">快去这里选购你中意的课程</a></p> 36 </div> 37 <div class="car-bot"> 38 <span class="order">我的订单中心</span> 39 <a href="###">去购物车</a> 40 </div> 41 </div> 42 43 44 </div> 45 <a href="###" class="link">登录</a> 46 <a href="###" class="link">注册</a> 47 </div> 48 49 </div> 50 51 <!--banner--> 52 <div class="banner main"> 53 <div class="banImg"> 54 <ul class="clearfix"> 55 <li> 56 <img src="img/banner.jpg" alt=""> 57 </li> 58 <li> 59 <img src="img/banner.jpg" alt=""> 60 </li> 61 <li> 62 <img src="img/banner.jpg" alt=""> 63 </li> 64 <li> 65 <img src="img/banner.jpg" alt=""> 66 </li> 67 </ul> 68 </div> 69 <div class="sidebar"> 70 <ul class="clearfix"> 71 <li> 72 <a href=""> 73 <span>JavaScript免费基础课</span> 74 <i>></i> 75 </a> 76 <div class="ban-hidden"> 77 <dl> 78 <dt>目录</dt> 79 <dd>1、基本语句</dd> 80 <dd>2、基本语句</dd> 81 <dd>3、基本语句</dd> 82 <dd>4、基本语句</dd> 83 <dd>5、基本语句</dd> 84 <dd>6、基本语句</dd> 85 <dd>7、基本语句</dd> 86 </dl> 87 </div> 88 </li> 89 <li> 90 <a href=""> 91 <span>JavaScript免费基础课</span> 92 <i>></i> 93 </a> 94 <div class="ban-hidden hidden2"> 95 <dl> 96 <dt>2、目录</dt> 97 <dd>1、基本语句</dd> 98 <dd>2、基本语句</dd> 99 <dd>3、基本语句</dd> 100 <dd>4、基本语句</dd> 101 <dd>5、基本语句</dd> 102 <dd>6、基本语句</dd> 103 <dd>7、基本语句</dd> 104 </dl> 105 </div> 106 </li> 107 <li> 108 <a href=""> 109 <span>JavaScript免费基础课</span> 110 <i>></i> 111 </a> 112 <div class="ban-hidden hidden3"> 113 隐藏的盒子 114 </div> 115 </li> 116 <li> 117 <a href=""> 118 <span>JavaScript免费基础课</span> 119 <i>></i> 120 </a> 121 <div class="ban-hidden"> 122 隐藏的盒子 123 </div> 124 </li> 125 <li> 126 <a href="" class="noBorder"> 127 <span>JavaScript免费基础课</span> 128 <i>></i> 129 </a> 130 <div class="ban-hidden"> 131 隐藏的盒子 132 </div> 133 </li> 134 </ul> 135 </div> 136 </div> 137 138 <!--实战推荐--> 139 <div class="actual main"> 140 <h3>实战推荐</h3> 141 <div class="actualInfo"> 142 <ul class="clearfix"> 143 <li> 144 <img src="img/icon_1.jpg" alt=""> 145 <div class="topInfo"> 146 <h3>Vue.js高仿饿了么外卖APP</h3> 147 <h3>2016最火前端框架</h3> 148 <p>vue.js 兼具 angular.js 和 react.js 149 的优点，并剔除它们的缺点</p> 150 </div> 151 152 <div class="botInfo clearfix"> 153 <span class="icon-text">￥198.0</span> 154 <span class="text">1911人在学</span> 155 </div> 156 </li> 157 <li> 158 <img src="img/icon_1.jpg" alt=""> 159 <div class="topInfo"> 160 <h3>Vue.js高仿饿了么外卖APP</h3> 161 <h3>2016最火前端框架</h3> 162 <p>vue.js 兼具 angular.js 和 react.js 163 的优点，并剔除它们的缺点</p> 164 </div> 165 <div class="botInfo"> 166 <span class="icon-text">￥198.0</span> 167 <span class="text">1911人在学</span> 168 </div> 169 </li> 170 <li> 171 <img src="img/icon_1.jpg" alt=""> 172 <div class="topInfo"> 173 <h3>Vue.js高仿饿了么外卖APP</h3> 174 <h3>2016最火前端框架</h3> 175 <p>vue.js 兼具 angular.js 和 react.js 176 的优点，并剔除它们的缺点</p> 177 </div> 178 <div class="botInfo"> 179 <span class="icon-text">￥198.0</span> 180 <span class="text">1911人在学</span> 181 </div> 182 </li> 183 <li class="noMargin"> 184 <img src="img/icon_1.jpg" alt=""> 185 <div class="topInfo"> 186 <h3>Vue.js高仿饿了么外卖APP</h3> 187 <h3>2016最火前端框架</h3> 188 <p>vue.js 兼具 angular.js 和 react.js 189 的优点，并剔除它们的缺点</p> 190 </div> 191 <div class="botInfo"> 192 <span class="icon-text">￥198.0</span> 193 <span class="text">1911人在学</span> 194 </div> 195 </li> 196 </ul> 197 </div> 198 </div> 199 <div class="actual main"> 200 <h3>实战推荐</h3> 201 <div class="actualInfo"> 202 <ul class="clearfix"> 203 <li> 204 <img src="img/icon_1.jpg" alt=""> 205 <div class="topInfo"> 206 <h3>Vue.js高仿饿了么外卖APP</h3> 207 <h3>2016最火前端框架</h3> 208 <p>vue.js 兼具 angular.js 和 react.js 209 的优点，并剔除它们的缺点</p> 210 </div> 211 212 <div class="botInfo clearfix"> 213 <span class="icon-text">￥198.0</span> 214 <span class="text">1911人在学</span> 215 </div> 216 </li> 217 <li> 218 <img src="img/icon_1.jpg" alt=""> 219 <div class="topInfo"> 220 <h3>Vue.js高仿饿了么外卖APP</h3> 221 <h3>2016最火前端框架</h3> 222 <p>vue.js 兼具 angular.js 和 react.js 223 的优点，并剔除它们的缺点</p> 224 </div> 225 <div class="botInfo"> 226 <span class="icon-text">￥198.0</span> 227 <span class="text">1911人在学</span> 228 </div> 229 </li> 230 <li> 231 <img src="img/icon_1.jpg" alt=""> 232 <div class="topInfo"> 233 <h3>Vue.js高仿饿了么外卖APP</h3> 234 <h3>2016最火前端框架</h3> 235 <p>vue.js 兼具 angular.js 和 react.js 236 的优点，并剔除它们的缺点</p> 237 </div> 238 <div class="botInfo"> 239 <span class="icon-text">￥198.0</span> 240 <span class="text">1911人在学</span> 241 </div> 242 </li> 243 <li class="noMargin"> 244 <img src="img/icon_1.jpg" alt=""> 245 <div class="topInfo"> 246 <h3>Vue.js高仿饿了么外卖APP</h3> 247 <h3>2016最火前端框架</h3> 248 <p>vue.js 兼具 angular.js 和 react.js 249 的优点，并剔除它们的缺点</p> 250 </div> 251 <div class="botInfo"> 252 <span class="icon-text">￥198.0</span> 253 <span class="text">1911人在学</span> 254 </div> 255 </li> 256 </ul> 257 </div> 258 </div> 259 260 <!--footer 尾部--> 261 <div class="footer-top"> 262 <div class="main clearfix"><!--main 版心--> 263 <div class="foot-info"> 264 <dl> 265 <dt>关于我们</dt> 266 <dd>珠峰培训官方网站</dd> 267 <dd>珠峰培训官网</dd> 268 <dd>联系我们</dd> 269 </dl> 270 <dl> 271 <dt>关于我们</dt> 272 <dd>珠峰培训官方网站</dd> 273 <dd>珠峰培训官网</dd> 274 <dd>联系我们</dd> 275 </dl> 276 <dl> 277 <dt>关于我们</dt> 278 <dd>珠峰培训官方网站</dd> 279 <dd>珠峰培训官网</dd> 280 <dd>联系我们</dd> 281 </dl> 282 <dl> 283 <dt>关于我们</dt> 284 <dd>珠峰培训官方网站</dd> 285 <dd>珠峰培训官网</dd> 286 <dd>联系我们</dd> 287 </dl> 288 <dl class="noMargin"> 289 <dt>关于我们</dt> 290 <dd>珠峰培训官方网站</dd> 291 <dd>珠峰培训官网</dd> 292 <dd>联系我们</dd> 293 </dl> 294 </div> 295 <div class="foot-zf"> 296 <div class="foot-logo"></div> 297 <div class="zf-bot"> 298 <ul> 299 <li> 300 <span class="icon"></span> 301 <div class="zf-hidden"> 302 <i></i> 303 <img src="img/erweima.jpg" alt=""> 304 </div> 305 </li> 306 <li> 307 <span class="icon weixin"></span> 308 <div class="zf-hidden"> 309 <i></i> 310 <img src="img/erweima.jpg" alt=""> 311 </div> 312 </li> 313 <li> 314 <span class="icon iphone"></span> 315 <div class="zf-hidden"> 316 <i></i> 317 <img src="img/erweima.jpg" alt=""> 318 </div> 319 </li> 320 <li class="noMargin"> 321 <span class="icon anzhuo"></span> 322 <div class="zf-hidden"> 323 <i></i> 324 <img src="img/erweima.jpg" alt=""> 325 </div> 326 </li> 327 </ul> 328 </div> 329 </div> 330 </div> 331 </div> 332 333 334 </body> 335 </html>
1 .main { 2 margin: 0 auto; /*上下 左右*/ 3 width: 1204px; 4 } 5 6 .main h1 { 7 float: left; 8 width: 176px; 9 margin: 16px 85px 16px 0; /*外边距：上 右 下 左*/ 10 } 11 12 .main h1 a { 13 display: block; 14 } 15 16 .main h1 a img { 17 width: 100%; 18 } 19 20 .main .nav { 21 float: left; 22 } 23 24 .main .nav li { 25 float: left; 26 height: 84px; 27 line-height: 84px; 28 margin-right: 60px; 29 } 30 31 .main .nav li.noMargin { 32 margin-right: 0; 33 } 34 35 .main .nav li a { 36 color: #2a2a2a; 37 font-size: 14px; 38 } 39 40 .main .nav li a:hover { 41 color: #2b7dd1; 42 } 43 44 .main .login { 45 float: right; 46 } 47 48 .main .car { 49 position: relative; /*相对定位 作用：给绝对定位当做参照物*/ 50 /*display: inline-block;*/ 51 float: left; 52 line-height: 84px; 53 margin-right: 38px; 54 font-size: 14px; 55 color: #666767; 56 } 57 58 .main .car .carShop { 59 cursor: pointer; 60 } 61 62 .main .car .carShop i { 63 display: inline-block; 64 width: 24px; 65 height: 22px; 66 background: url("../img/icon.png") no-repeat; 67 vertical-align: middle; 68 margin-right: 7px; 69 } 70 71 .main .login .car:hover .carShop { 72 color: #2b7dd1; 73 } 74 75 .main .login .car:hover i { 76 background-position: -50px 0; 77 } 78 79 .main .login .car:hover .car-hidden { 80 display: block; 81 } 82 83 .main .link { 84 line-height: 84px; 85 font-size: 14px; 86 color: #666767; 87 padding-right: 30px; 88 } 89 90 .main .login .car-hidden { 91 display: none; 92 position: absolute; /*绝对定位*/ 93 left: -149px; 94 top: 63px; 95 width: 323px; 96 /*border:1px solid red;*/ 97 background: #fff; 98 box-shadow: 2px 2px 6px rgba(2, 2, 2, 0.34); 99 padding: 0 14px 0 13px; /*内边距:上 右 下 左*/ 100 } 101 102 .login .car-hidden h3 { 103 font-size: 16px; 104 color: #333333; 105 font-weight: normal; /*去掉加粗*/ 106 border-bottom: 1px solid #e1e1e1; 107 line-height: 52px; 108 } 109 110 .login .car-hidden h3 span { 111 float: right; 112 font-size: 12px; 113 color: #7d7d7d; 114 } 115 116 .login .car-hidden .car-cont { 117 width: 323px; 118 } 119 120 .login .car-hidden .car-cont .carBg { 121 margin: 59px auto 2px; 122 width: 68px; 123 height: 68px; 124 background: #9e9e9e url("../img/icon.png") no-repeat; 125 background-position: 14px -24px; 126 border-radius: 50%; 127 } 128 129 .login .car-hidden .car-cont .carEmpty { 130 margin: 0 auto; 131 width: 190px; 132 line-height: 60px; 133 color: #414141; 134 text-align: center; 135 font-size: 14px; 136 border-bottom: 1px solid #e1e1e1; 137 } 138 139 .login .car-hidden .car-cont .course { 140 text-align: center; 141 line-height: 74px; 142 } 143 144 .login .car-hidden .car-cont .course a { 145 font-size: 12px; 146 color: #4e91d7; 147 } 148 149 .login .car-hidden .car-bot { 150 margin-top: 25px; 151 border-top: 1px solid #e1e1e1; 152 line-height: 68px; 153 } 154 155 .login .car-hidden .car-bot .order { 156 font-size: 12px; 157 color: #7d7d7d; 158 } 159 160 .login .car-hidden .car-bot a { 161 float: right; 162 width: 79px; 163 height: 39px; 164 line-height: 39px; 165 text-align: center; 166 font-size: 12px; 167 background-color: #4e91d7; 168 border-radius: 5px; 169 color: #fff; 170 margin-top: 15px; 171 } 172 173 /*footer 尾部*/ 174 .footer-top { 175 width: 100%; 176 background-color: #2e2e2e; 177 padding-bottom: 60px; 178 } 179 180 .footer-top .foot-info { 181 float: left; 182 } 183 184 .footer-top .foot-info dl { 185 float: left; 186 margin-top: 47px; 187 margin-right: 70px; 188 } 189 190 .footer-top .foot-info dl.noMargin, .footer-top .foot-zf .foot-icon li.noMargin { 191 margin-right: 0; 192 } 193 194 .footer-top .foot-info dl dt { 195 font-size: 16px; 196 color: #fefdfd; 197 line-height: 30px; 198 margin-bottom: 15px; 199 text-shadow: 3px 3px 3px rgba(2, 2, 2, .75); 200 } 201 202 .footer-top .foot-info dl dd { 203 font-size: 14px; 204 color: #a3a3a3; 205 line-height: 30px; 206 text-shadow: 3px 3px 3px rgba(2, 2, 2, .75); 207 } 208 209 .footer-top .foot-zf { 210 float: right; 211 margin-top: 63px; 212 } 213 214 .footer-top .foot-zf .foot-logo { 215 width: 199px; 216 height: 61px; 217 background: url("../img/icon_foot.png") no-repeat; 218 background-position: 0 -69px; 219 } 220 221 .footer-top .foot-zf .zf-bot { 222 margin-top: 17px; 223 } 224 225 .footer-top .foot-zf .zf-bot li { 226 position: relative; 227 float: left; 228 margin-right: 17px; 229 cursor: pointer; 230 } 231 232 .footer-top .foot-zf .zf-bot li span { 233 display: inline-block; 234 } 235 236 .footer-top .foot-zf .zf-bot li .icon { 237 width: 46px; 238 height: 46px; 239 background: url("../img/icon_foot.png") no-repeat; 240 } 241 242 .footer-top .foot-zf .zf-bot li span.weixin { 243 background-position: -74px 0; 244 } 245 246 .footer-top .foot-zf .zf-bot li span.iphone { 247 background-position: -158px 0; 248 } 249 250 .footer-top .foot-zf .zf-bot li span.anzhuo { 251 background-position: -237px 0; 252 } 253 254 .footer-top .foot-zf .zf-bot li:hover .zf-hidden { 255 display: block; 256 } 257 258 .footer-top .zf-hidden { 259 position: absolute; 260 left: -71px; 261 top: -208px; 262 display: none; 263 } 264 265 .footer-top .zf-hidden i { 266 position: absolute; 267 left: 79px; 268 top: 185px; 269 display: inline-block; 270 width: 23px; 271 height: 15px; 272 background: url("../img/icon_foot.png") no-repeat; 273 background-position: -260px -115px; 274 } 275 276 /*banner 广告位*/ 277 .banner { 278 position: relative; 279 width: 1204px; 280 height: 360px; 281 overflow: hidden; 282 } 283 284 .banner .banImg { 285 width: 4816px; 286 } 287 288 .banner .banImg li { 289 float: left; 290 width: 1204px; 291 } 292 293 .banner .sidebar { 294 position: absolute; 295 left: 0; 296 top: 0; 297 width: 240px; 298 height: 360px; 299 background: rgba(0, 0, 0, .25); 300 } 301 302 .banner .sidebar li { 303 float: left; 304 width: 240px; 305 } 306 307 .banner .sidebar li a.noBorder { 308 border: none; 309 } 310 311 .banner .sidebar li a { 312 margin: 0 auto; 313 display: block; 314 width: 190px; 315 height: 71px; 316 line-height: 71px; 317 border-bottom: 1px solid #82b1cd; 318 } 319 320 .banner .sidebar li a span { 321 font-size: 14px; 322 color: #fdfdfe; 323 padding-left: 11px; 324 } 325 326 .banner .sidebar li a i { 327 float: right; 328 color: #fdfdfe; 329 font-style: normal; /*去掉斜体*/ 330 padding-right: 8px; 331 font-size: 18px; 332 } 333 334 .banner .sidebar li:hover { 335 background: rgba(0, 0, 0, 0.4); 336 } 337 338 .banner .sidebar li:hover .ban-hidden { 339 display: block; 340 } 341 342 .banner .sidebar .ban-hidden { 343 display: none; 344 position: absolute; 345 left: 240px; 346 top: 0; 347 width: 573px; 348 height: 360px; 349 background: url("../img/bg1.jpg") no-repeat; 350 } 351 352 .banner .sidebar .ban-hidden dl { 353 margin: 32px 0 0 35px; 354 } 355 356 .banner .sidebar .ban-hidden dl dt { 357 font-size: 16px; 358 color: #0b0b0b; 359 margin-bottom: 7px; 360 } 361 362 .banner .sidebar .ban-hidden dl dd { 363 margin-top: 20px; 364 font-size: 14px; 365 color: #4a4b4b; 366 } 367 368 .banner .sidebar .hidden2 { 369 background: url("../img/bg2.jpg") no-repeat; 370 } 371 372 .banner .sidebar .hidden3 { 373 background: url("../img/bg3.jpg") no-repeat; 374 } 375 376 /*实战推荐*/ 377 .actual{ 378 margin-top:39px; 379 } 380 .actual h3{ 381 font-weight: normal; 382 font-size: 16px; 383 color: #2d2d2d; 384 line-height: 14px; 385 } 386 .actual .actualInfo{ 387 margin-top:20px; 388 } 389 .actual .actualInfo li{ 390 position: relative; 391 float: left; 392 width:251px; 393 margin-right:65px; 394 height: 184px; 395 cursor: pointer; 396 } 397 .actual .actualInfo li.noMargin{ 398 margin-right:0; 399 } 400 .actual .actualInfo li .topInfo{ 401 position: absolute; 402 left:0; 403 bottom:0; 404 width:221px; 405 padding:15px; 406 background: url("../img/icon_bg.png") no-repeat; 407 transition: all 0.3s; 408 } 409 .actual .actualInfo li .topInfo h3{ 410 color: #1e1e1e; 411 font-size: 14px; 412 line-height: 14px; 413 margin-top:8px; 414 } 415 .actual .actualInfo li .topInfo p{ 416 color: #9e9d9d; 417 font-size: 12px; 418 line-height: 14px; 419 padding-top:10px; 420 } 421 .actual .actualInfo .botInfo{ 422 position: absolute; 423 left:0; 424 bottom: 0; 425 width:221px; 426 height: 44px; 427 line-height: 44px; 428 background: #fff; 429 padding:0 15px; 430 } 431 .actual .actualInfo .botInfo .icon-text{ 432 float: left; 433 font-size: 12px; 434 color: #c71b1b; 435 } 436 .actual .actualInfo .botInfo .text{ 437 float: right; 438 font-size: 12px; 439 color: #868484; 440 } 441 .actual .actualInfo li:hover .topInfo{ 442 bottom:40px; 443 }
标签：ann blog vue.js lock text amp width 关于我 rsh
原文地址：http://www.cnblogs.com/zhubinglong/p/7354941.html
