<!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>
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;
}
View main.css
+bootstrap的css文件：http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css
网页分为个部分：
- 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网格
时间： 2024-12-17 19:25:59