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

最新推荐文章于 2024-04-11 11:35:15 发布

草千里

最新推荐文章于 2024-04-11 11:35:15 发布

阅读量3.9k

点赞数 6

文章标签： css html codecademy bootstrap

本文链接：https://blog.csdn.net/liqiancao/article/details/50353820

版权

HTML/CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

草千里

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
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/c
复制链接

扫一扫