HTML+CSS+Bootstrap：第一个页面，仿Airbnb首页

来源：互联网发布：e领网络卡盟编辑：程序博客网时间：2024/05/16 09:49

这几天在Codecademy上看教程，前天看完了HTML+CSS部分，今天跟着教程做了一个页面。其中又用到了Bootstrap这个HTML/CSS框架。源码贴在这里以便以后查看。

HTML代码如下：

<!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="Airbnb.css">  </head>  <body>    <div class="nav">      <div class="container">        <ul class="pull-left">          <li><a href="#">Name</a></li>          <li><a href="#">Browse</a></li>        </ul>        <ul class="pull-right">          <li><a href="#">Sign Up</a></li>          <li><a href="#">Log In</a></li>          <li><a href="#">Help</a></li>        </ul>      </div>    </div>    <div class="jumbotron">      <div class="container">        <h1>Find a place to stay.</h1>        <p>Rent from people in over 34,000 cities and 192 countries.</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://goo.gl/0sX3jq"/>                    </div>                    <div class="thumbnail">                        <img src="http://goo.gl/an2HXY"/>                    </div>                 </div>                 <div class="col-md-4">                    <div class="thumbnail">                        <img src="http://goo.gl/Av1pac"/>                    </div>                    <div class="thumbnail">                        <img src="http://goo.gl/vw43v1"/>                    </div>                 </div>                 <div class="col-md-4">                    <div class="thumbnail">                        <img src="http://goo.gl/0Kd7UO"/>                    </div>                 </div>            </div>        </div>    </div>    <div class="learn-more">      <div class="container">        <div class="row">          <div class="col-md-4">            <h3>Travel</h3>            <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>            <p><a href="#">See how to travel on Airbnb</a></p>          </div>          <div class="col-md-4">            <h3>Host</h3>            <p>Renting out your unused space could pay your bills or fund your next vacation.</p>            <p><a href="#">Learn more about hosting</a></p>          </div>          <div class="col-md-4">            <h3>Trust and Safety</h3>            <p>From Verified ID to our worldwide customer support team, we've got your back.</p>            <p><a href="#">Learn about trust at Airbnb</a></p>          </div>        </div>      </div>    </div>  </body></html>

CSS代码如下：

.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://goo.gl/04j7Nn');  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;}.neighborhood-guides{    abackground-color:#efefef;    border-bottom:1px solid #dbdbdb;    }.neighborhood-guides h2{    color:#393c3d;    font-size:24px;    }.neighborhood-guides p{    font-size:15px;    margin-bottom:13px;    }.learn-more {  background-color: #f7f7f7;}.learn-more h3 {  font-family: 'Shift', sans-serif;  font-size: 18px;  font-weight: bold;}.learn-more a {  color: #00b0ff;}

效果图如下：
这里写图片描述

0 0