View 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
网页放置在: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网格