HTML+CSS+Bootstrap:第一个页面,仿Airbnb首页

这几天在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; }

效果图如下:
HTML+CSS+Bootstrap:第一个页面,仿Airbnb首页_第1张图片
HTML+CSS+Bootstrap:第一个页面,仿Airbnb首页_第2张图片

你可能感兴趣的:(html,css,bootstrap,Codecademy)