HTML+CSS简单页面

于 2021-05-16 11:51:18 发布
阅读量2.2k 收藏 50
点赞数 4
分类专栏： HTML 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53228839/article/details/116863997
版权

 HTML+CSS简单页面

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <title>Airbnb</title>
  <style type ="text/css">
    .nav a {
      color:paleturquoise;
      font-size: 11px;
      font-weight: bold;
      padding: 14px 10px;
      text-transform: uppercase;
    }

    .nav li {
      display: inline;
    }

    .jumbotron {
      background-image:url('images/图1.jpg');
      height: 500px;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .jumbotron .container {
      position:relative;
      top:175px;
    }

    .jumbotron h1 {
      color: #fff;
      font-size: 48px;
      font-family: 'Shift', sans-serif;
      font-weight: bold;
    }

    .jumbotron p {
      font-size: 20px;
      color: #fff;
    }

    .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;
    }

    .learn-more {
      background-color: #f7f7f7;
    }

    .learn-more h3 {
      font-family: 'Shift', sans-serif;
      font-size: 18px;
      font-weight: bold;
    }

    .learn-more a {
      color: #00b0ff;
    }
    .col-md-4 {
      width:300px ;
      float: left;
      margin-left: 20px;
    }
  </style>
</head>

<body>
<div class="nav">
  <div class="container">
    <ul class="pull-left" style="float: left;">
      <li><a href="#">Name</a></li>
      <li><a href="#">Browse</a></li>
    </ul>
    <ul class="pull-right"  style="float: 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" style="padding-left: 175px;">
  <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 style="float: left;">
      <img src="images/图2.jpg" style="margin-left: 20px;">
      <img src="images/图3.jpg" style="margin-left:40px;">
      <div style="margin-top: 15px;">
        <img src="images/图4.jpg" style="margin-left: 20px;">
        <img src="images/图5.jpg" style="margin-left: 40px;">
      </div>
    </div>
    <div>
      <img src="images/图6.jpg" style="margin-left: 40px">
    </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>

效果图：

 

周游、
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值