借助bootstrap框架模仿airbnb写的网页

.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

网页放置在：http://codepen.io/Gabyler/full/pyeRma/

网页分为个部分：

• Navigation bar
• Jumbotron
• Neighborhood-guides
• Learn-more

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网格