标签：
<!DOCTYPE html> <html> <head> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> <link rel="stylesheet" href="main.css"> </head> <body> <div class="nav"> <div class="container"> <ul class= pull-left> <li><a href="#">Emotion</a></li> <li><a href="#">Life</a></li> </ul> <ul class="pull-right"> <li><a href="#">css</a></li> <li><a href="#">java</a></li> <li><a href="#">javascript</a></li> </ul> </div> </div> <div class="jumbotron"> <div class="container"> <h1>Do someting really matters.</h1> <p>try to find something with interest and freedom.</p> <a href="#">Learn More</a> </div> </div> <div class="neighborhood-guides"> <div class="container"> <h2>Neighborhood Guides</h2> <p>Not sure where to stay? We‘ve created neighborhood guides for cities all around the world.</p> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="http://img.zanadu.cn/resources/zanadu/hotel/50/thumb/full_500_13177.jpg"> </div> <div class="thumbnail"> <img src="http://femaleintel.com/wp-content/uploads/2013/11/google-campus-building.jpg"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="http://img.zanadu.cn/resources/zanadu/hotel/50/thumb/full_500_13177.jpg"> </div> <div class="thumbnail"> <img src="http://img.zanadu.cn/resources/zanadu/hotel/50/thumb/full_500_13177.jpg"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="http://img1.qunarzz.com/travel/d6/1502/e0/a0333d720c59a0.jpg_r_480x360x95_b121189b.jpg"> </div> </div> </div> </div> </div> <div class="learn-more"> <div class="container"> <div class="row"> <div class="col-md-4"> <h3>DotCom</h3> <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countr.</p> <p><a href="#">See how to trel on Airbnb</a></p> </div> <div class="col-md-4"> <h3>CDN</h3> <p>Reing out your unused space could pay your bills or fund your next vacation.</p> <p><a href="#">Lea more about hosting</a></p> </div> <div class="col-md-4"> <h3>Trust and Sty</h3> <p>From Verid ID to our worldwide customer support team, we‘ve got your back.</p> <p><a href="#">arn about trust at Airbnb</a></p> </div> </div> </div> </div> </body> </html>
.nav a { color: #5a5a5a; font-size: 11px; font-weight: bold; padding: 14px 10px; text-transform: uppercase; } .nav li { display: inline; } .jumbotron { background-image:url(‘http://www.fuccha.in/wp-content/uploads/2014/01/small-workplace-with-apple-gadgets.jpg‘); height: 500px; background-repeat: no-repeat; background-size: cover; } .jumbotron .container { position: relative; top:100px; } .jumbotron h1 { color: #fff; font-size: 48px; font-family: ‘Shift‘, sans-serif; font-weight: bold; } .jumbotron p { font-size: 20px; color: #fff; } .learn-more { background-color: #f7f7f7; } .learn-more h3 { font-family: ‘Shift‘, sans-serif; font-size: 18px; font-weight: bold; } .learn-more a { color: #00b0ff; } .neighborhood-guides{ background-color:#efefef; border-bottom:1px solid #dbdbdb; } .neighborhood-guides h2{ color:#393c3d; font-size:24px; } .neighborhood-guides p{ font-size:15px; margin-bottom:13px; }
+bootstrap的css文件：http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css
网页分为个部分：
Navigation Bar
在main.css里，将li的display属性改成inline，使得两个ul item排成两排
后在两个ul首标签分别写class="pull-left" class="pull-right",使得他们排成一排
Jumbotron
在main.css的.jmbotron中设置背景图片在background-size:cover 表示足够大到覆盖整个背景区域（一张图横跨一块屏幕的水平区域）
main.css 中 .jumbotron .container里面的表示相对他应该在的位置向下移动50px（position:relative）
Neighborhood-guide
<div class="row">里面放三个<div class="col-md-4">,再在每个col里放<div class="thumbnail">放图片
thumbnail的存在，是专门用于网格放图片的
选择图片时，大小通常一致，如果一个放两个图片的位置要放一张，最好高度得选成2倍多30px
Learn-more
用了12网格
标签：
原文地址：http://www.cnblogs.com/gabygoole/p/4909086.html
