SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0px;

    }

    a {
      color: #000;
    }
    a:hover{text-decoration:none;}

    body {
      background: rgb(247, 247, 247);
    }


 .order {
            height: 60px;
            line-height: 60px;
            text-align: center;
             margin: 30px auto 50px auto;
        }
        .order .line {
            display: inline-block;
            width: 40%;
            border-top: 1px solid #ccc ;
            background:rgb(231, 0, 18);
            
        }
        .order .txt {
            vertical-align: -10px;
            font-size:30px;
            color:rgb(231, 0, 18);
        }



    /* 头部 */
    .head {
      width: 100%;
      padding: 0 10%;
    }

    .head p {
      width: 70%;
      float: left;
      margin-top: 20px;
      color: rgb(231, 0, 18);
      font-size: 20px;
    }

    .head>a {
      margin-top: 23px;
      margin-left: 1%;
      display: inline-block;
    }

    .head .btn-group {
      width: 15%;
      float: right;
      margin-top: 15px;
    }

    /* 导航栏 */
    .navmain {
      width: 100%;
      padding: 0 11%;
      background: rgb(199, 199, 199);
      margin-bottom: 25px;
    }

    .navmain li {
      padding: 0 20px;
    }

    .navmain li:first-child {
      background: rgb(231, 0, 18);
    }

    .navmain li:first-child a {
      color: rgba(255, 255, 255, 1);
    }

    .navmain a {
      color: rgb(255, 255, 255);
    }

    .navmain li:hover a {
      color: rgba(0, 0, 0, 1);
    }

    /* P1 */
    .part1 {
      width: 80%;
      padding: 0 0 20px 0;
    }

    .info1 {
      border-bottom: solid 1px rgba(128, 128, 128, 0.5);
      margin-bottom: 20px;
      padding-bottom: 10px;
    }

    .info1 .info2 {
      width: 100%;
      margin: 20 auto;
    }

    .info2 li {
      margin-top: 15px;
      font-size: 16px;
    }
.info2 span{color:rgb(128,128,128);float:right;}
    .carousel-inner img {
      margin: 0 auto;
    }



    /* 市场 */
    .market {
      width: 80%;
      padding: 0 0 20px 0;
      margin: 0 auto;
    }
  

    .pic>img {
      width: 100%;
      height: 200px;
      border-radius: 10px;
    }

    .pic {

      height: 350px;
      overflow: hidden;
      float: left;
      background: rgb(255, 255, 255);
      margin-bottom: 20px;
      box-shadow:1px 1px 2px darkgray;
      border-radius: 10px;
    }

    .text {
      height: 20px;
      background: rgba(0, 0, 0, 0.2);
      transition: all 1s;
      margin-top: -50px;
      position: relative;
      z-index: 1;
    }

    .text>h3 {
      height: 32px;
      line-height: 32px;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }

    .text>p {
      font-size: 14px;
      text-indent: 1em;
      overflow: hidden;
    }

    .pic:hover img {
      transform: scale(1.05);
      transition: all 0.5s;

    }

    .more {
      width: 50%;
      margin: 20px auto 10px auto;
    }

    /* 服务 */

    .servicebox {
      width: 150px;
      height: 150px;
      border: solid 1px rgba(128, 128, 128, 0.5);
      margin:0 50px 10px 0;
      text-align: center;
      box-shadow:1px 1px 2px darkgray;
    }
    .servicebox:hover i{color:rgb(190, 26, 23) ;    transition: all 0.5s;}
    .servicebox i{
      font-size: 45px;
      margin: 40px auto 0 0;
  color: rgb(207, 83, 79);
    }
    .servicebox p{
 margin: 8px auto;
 color: rgba(0, 0, 0, 0.9);
 font-size: 16px;
}

    /* 底部 */
    .bottom {
      width: 100%;
      margin-top: 60px;
      background: rgb(201, 48, 44);
      padding: 50px 0;
    }
    /* 响应式 */
    @media screen and (max-width:900px) {
      .service a{margin-left:50px;}
      .servicebox {margin:0 auto;}
    }
  </style>
</head>

<body>
  <!-- 头部 -->
  <div class="container head">
    <img class="pull-left" src="img/logo.png" alt="">
    <p>社区服务网站</p>
    <a href="">登录</a>
    <a href="register.html">注册</a>
    <div class="btn-group">
      
      <a class="btn btn-danger" href="person.html" role="button">地区</a>
    </div>

  </div>
  <!-- End 头部 -->

  <!-- 导航栏 -->
  <div class="container navmain">
    <div>
      <ul class="nav navbar-nav ">
        <li class="disabled"><a href="#">首页</a></li>
        <li><a href="information.html">新闻资讯</a></li>
        <li><a href="market.html">社区市场</a></li>
        <li><a href="#">社区活动</a></li>
        <li><a href="#">便民服务</a></li>
      </ul>
    </div>
  </div>
  <!-- End 导航栏 -->

  <div class="container part1">

    <!-- 轮播图 -->
    <div class="col-sm-12 col-md-6 carousel1">
      <div id="myCarousel" class="carousel slide">
        <!-- 轮播(Carousel)指标 -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播(Carousel)项目 -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="img/Carousel01.png" alt="First slide">
          </div>
          <div class="item">
            <img src="img/Carousel01.png" alt="Second slide">
          </div>
          <div class="item">
            <img src="img/Carousel01.png" alt="Third slide">
          </div>
        </div>
        <!-- 轮播(Carousel)导航 -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev"> </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
      </div>
    </div>
    <!-- END 轮播图 -->
    <!-- 资讯 -->
    <div class="col-sm-12 col-md-6 information">
      <div class="info1">
        <a href="#"><h3 class="text-primary">让“十四五”规划经得起实践和历史检验</h3></a>
        <p>党的十九届五中全会闭幕次日,李克强总理主持召开国务院“十四五”规划《纲要草案》编制工作领导小组会议。</p>
      </div>
      <div class="info2">
        <ul>

          <li><a href="#">习近平主持召开中央全面深化改革委员会第十六次会议</a><span>[01-24]</span></li>
          <li><a href="#">习近平主持召开中央全面深化改革委员会第十六次会议</a><span>[01-24]</span></li>
          <li><a href="#">习近平主持召开中央全面深化改革委员会第十六次会议</a><span>[01-24]</span></li>
        </ul>
      </div>
    </div>
    <!-- END 资讯 -->

  </div>

  <!-- 市场 -->
 <div class="order">
        <span class="line"></span>
        <span class="txt">业务办理</span>
        <span class="line"></span>
    </div>
  <div class="container market">


    <a href="https://google.com">
      <div class="col-md-6 col-lg-3">
        <div class="pic">
          <img src="img/market1.jpeg" />
          <div class="text">
            <h3>华为手机 9成新</h3>
            <p>用户姓名&nbsp;<i class="fa fa-map-marker text-info ">凌水街道</i></p>
            <p>转让今天刚刚到手的全新64G华为 手机带一年屏保险 诚心要的联系我 外地勿扰</p>
          </div>
        </div>
      </div>
    </a>
    <a href="https://google.com">
      <div class="col-md-6 col-lg-3">
        <div class="pic">
          <img src="img/market1.jpeg" />
          <div class="text">
            <h3>华为手机 9成新</h3>
            <p>用户姓名&nbsp;<i class="fa fa-map-marker text-info ">凌水街道</i></p>
            <p>转让今天刚刚到手的全新64G华为 手机带一年屏保险 诚心要的联系我 外地勿扰</p>
          </div>
        </div>
      </div>
    </a>
    <a href="https://google.com">
      <div class="col-md-6 col-lg-3">
        <div class="pic">
          <img src="img/market1.jpeg" />
          <div class="text">
            <h3>华为手机 9成新</h3>
            <p>用户姓名&nbsp;<i class="fa fa-map-marker text-info ">凌水街道</i></p>
            <p>转让今天刚刚到手的全新64G华为 手机带一年屏保险 诚心要的联系我 外地勿扰</p>
          </div>
        </div>
      </div>
    </a>
    <a href="https://google.com">
      <div class="col-md-6 col-lg-3">
        <div class="pic">
          <img src="img/market1.jpeg" />
          <div class="text">
            <h3>华为手机 9成新</h3>
            <p>用户姓名&nbsp;<i class="fa fa-map-marker text-info ">凌水街道</i></p>
            <p>转让今天刚刚到手的全新64G华为 手机带一年屏保险 诚心要的联系我 外地勿扰</p>
          </div>
        </div>
      </div>
    </a>



    <div class="col-lg-12">
      <a class="btn btn-danger btn-lg btn-block more" href="market.html" role="button">查看更多</a>
    </div>
  </div>
  <!-- END 市场 -->

  <!-- 服务 -->
  <div class="container service">
     <div class="order">
        <span class="line"></span>
        <span class="txt">便民服务</span>
        <span class="line"></span>
    </div>

    <a href="#">
      <div class="col-md-4 col-lg-2">
        <div class="servicebox">
          <i class="fa fa-map-marker "></i>
          <p>家政服务</p>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="col-md-4 col-lg-2">
        <div class="servicebox">
          <i class="fa fa-map-marker "></i>
          <p>车辆服务</p>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="col-md-4 col-lg-2">
        <div class="servicebox">
          <i class="fa fa-map-marker "></i>
          <p>教育科研</p>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="col-md-4 col-lg-2">
        <div class="servicebox">
          <i class="fa fa-map-marker "></i>
          <p>社会保障</p>
        </div>
      </div>
    </a>
    
    <a href="#">
      <div class="col-md-4 col-lg-2">
        <div class="servicebox">
          <i class="fa fa-map-marker "></i>
          <p>交通出行</p>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="col-md-4 col-lg-2">
        <div class="servicebox">
          <i class="fa fa-map-marker "></i>
          <p>房屋登记</p>
        </div>
      </div>
    </a>
    
  </div>
  <!-- END 服务 -->

  <!-- 底部 -->
  <div class="container bottom"></div>
  <!-- END 底部 -->

  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>

</html>