• 旅游线路网站-Bootstrap

     

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap HelloWorldtitle>
    9.  
    10.     
    11.     <link href="css/bootstrap.min.css" rel="stylesheet">
    12.  
    13.  
    14.     
    15.     <script src="js/jquery-3.2.1.min.js">script>
    16.     
    17.     <script src="js/bootstrap.min.js">script>
    18.     <style>
    19.       .paddltop{
    20.         padding-top:18px;
    21.       }
    22.     .paddtop{
    23.       padding-top:15px;
    24.     }
    25.     .search-input{
    26.       float:left;
    27.       margin-top: 10px;
    28.       border:1px solid #ffc900;
    29.       width:400px;
    30.       height:35px;
    31.     }
    32.     .search-btn{
    33.       float:left;
    34.       width:90px;
    35.       height:35px;
    36.       margin-top: 10px;
    37.       border:1px solid #ffc900;
    38.       text-align: center;
    39.       line-height: 35px;
    40.       background-color: #ffc900;
    41.     }
    42.     .jx{
    43.       border-bottom: 2px solid #ffc900;
    44.       padding:5px;
    45.     }
    46.     .company{
    47.       height:40px;
    48.       line-height: 40px;
    49.       text-align: center;
    50.       background-color: #ffc900;
    51.       font-size: 18px;
    52.     }
    53.     style>
    54. head>
    55. <body>
    56.  
    57. <header class="container-fluid">
    58.  
    59.   <div class="row">
    60.     <img src="../image/image1/top_banner.jpg">
    61.   div>
    62.   <div class="row paddtop">
    63.     <div class="col-md-3">
    64.         <img src="../image/image1/logo.jpg" class="img-responsive">
    65.     div>
    66.     <div class="col-md-5">
    67.       <input placeholder="请输入线路名称"  class="search-input">
    68.       <a href="https://baidu.com" class="search-btn">搜索a>
    69.     div>
    70.     <div class="col-md-4">
    71.       <img src="../image/image1/hotel_tel.png" class="img-responsive">
    72.     div>
    73.  
    74.   div>
    75.   <div class="row">
    76.     <nav class="navbar navbar-default">
    77.       <div class="container-fluid">
    78.         
    79.         <div class="navbar-header">
    80.           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    81.             <span class="sr-only">Toggle navigationspan>
    82.             <span class="icon-bar">span>
    83.             <span class="icon-bar">span>
    84.             <span class="icon-bar">span>
    85.           button>
    86.           <a class="navbar-brand" href="#">首页a>
    87.         div>
    88.  
    89.         
    90.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    91.  
    92.           <ul class="nav navbar-nav">
    93.             <li class="active"><a href="#">首页 <span class="sr-only">(current)span>a>li>
    94.             <li><a href="#">线路1a>li>
    95.             <li><a href="#">线路2a>li>
    96.             <li><a href="#">线路3a>li>
    97.             <li><a href="#">线路4a>li>
    98.             <li><a href="#">线路5a>li>
    99.  
    100.           ul>
    101.  
    102.           <ul class="nav navbar-nav navbar-right">
    103.             <li><a href="#">Linka>li>
    104.             <li><a href="#">Linka>li>
    105.             <li><a href="#">Linka>li>
    106.  
    107.           ul>
    108.         div>
    109.       div>
    110.     nav>
    111.     div>
    112.   <div class="row">
    113.     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    114.       
    115.       <ol class="carousel-indicators">
    116.         <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
    117.         <li data-target="#carousel-example-generic" data-slide-to="1">li>
    118.         <li data-target="#carousel-example-generic" data-slide-to="2">li>
    119.       ol>
    120.  
    121.       
    122.       <div class="carousel-inner" role="listbox">
    123.         <div class="item active">
    124.           <img src="../image/image1/banner_2.jpg" alt="...">
    125.           <div class="carousel-caption">
    126.             ...
    127.           div>
    128.         div>
    129.         <div class="item">
    130.           <img src="../image/image1/banner_1.jpg" alt="...">
    131.           <div class="carousel-caption">
    132.             ...
    133.           div>
    134.         div>
    135.  
    136.         <div class="item">
    137.           <img src="../image/image1/banner_3.jpg" alt="...">
    138.           <div class="carousel-caption">
    139.             ...
    140.           div>
    141.         div>
    142.  
    143.  
    144.       
    145.       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    146.         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
    147.         <span class="sr-only">Previousspan>
    148.       a>
    149.       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    150.         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
    151.         <span class="sr-only">Nextspan>
    152.       a>
    153.   div>
    154.  
    155. header>
    156.  
    158. <div class="container">
    159.   <div class="row jx">
    160.     <img src="../image/image1/icon_5.jpg">
    161.     <span>黑马精选span>
    162.   div>
    163.  
    164.   <div class="row paddtop">
    165.     <div class="col-md-3 ">
    166.       <div class="thumbnail">
    167.         <img src="../image/image1/jiangxuan_1.jpg" alt="">
    168.         <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>
    169.         <font color="red"> 699font>
    170.       div>
    171.     div>
    172.  
    173.     <div class="col-md-3">
    174.       <div class="thumbnail">
    175.         <img src="../image/image1/jiangxuan_1.jpg" alt="">
    176.         <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>
    177.         <font color="red"> 699font>
    178.       div>
    179.     div>
    180.  
    181.     <div class="col-md-3">
    182.       <div class="thumbnail">
    183.         <img src="../image/image1/jiangxuan_1.jpg" alt="">
    184.         <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>
    185.         <font color="red"> 699font>
    186.       div>
    187.     div>
    188.  
    189.     <div class="col-md-3">
    190.       <div class="thumbnail">
    191.         <img src="../image/image1/jiangxuan_1.jpg" alt="">
    192.         <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>
    193.         <font color="red"> 699font>
    194.       div>
    195.     div>
    196.   div>
    197.  
    198.   <div class="row jx">
    199.     <img src="../image/image1/icon_6.jpg">
    200.     <span>国内游span>
    201.  
    202.   div>
    203.  
    204.   <div class="row paddtop">
    205.     <div class="col-md-4">
    206.       <img src="../image/image1/guonei_1.jpg">
    207.     div>
    208.  
    209.     <div class="col-md-8 ">
    210.       <div class="row">
    211.         <div class="col-md-4">
    212.           <div class="thumbnail">
    213.             <img src="../image/image1/jiangxuan_1.jpg" alt="">
    214.             <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>      <br>
    215.             <font color="red"> 699font>
    216.           div>
    217.         div>
    218.  
    219.         <div class="col-md-4 ">
    220.           <div class="thumbnail">
    221.             <img src="../image/image1/jiangxuan_1.jpg" alt="">
    222.             <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>      <br>
    223.             <font color="red"> 699font>
    224.           div>
    225.         div>
    226.  
    227.         <div class="col-md-4">
    228.           <div class="thumbnail">
    229.             <img src="../image/image1/jiangxuan_1.jpg" alt="">
    230.             <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>      <br>
    231.             <font color="red"> 699font>
    232.           div>
    233.         div>
    234.       div>
    235.  
    236.       <div class="row">
    237.         <div class="col-md-4">
    238.           <div class="thumbnail">
    239.             <img src="../image/image1/jiangxuan_1.jpg" alt="">
    240.             <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>      <br>
    241.  
    242.             <font color="red"> 699font>
    243.           div>
    244.         div>
    245.  
    246.         <div class="col-md-4">
    247.           <div class="thumbnail">
    248.             <img src="../image/image1/jiangxuan_1.jpg" alt="">
    249.             <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>      <br>
    250.             <font color="red"> 699font>
    251.           div>
    252.         div>
    253.  
    254.         <div class="col-md-4">
    255.           <div class="thumbnail">
    256.             <img src="../image/image1/jiangxuan_1.jpg" alt="">
    257.             <p>上海飞三亚五天4晚自由行（春节销售+亲子+蜜月+自由行）p>      <br>
    258.             <font color="red"> 699font>
    259.           div>
    260.         div>
    261.       div>
    262.     div>
    263.  
    264.   div>
    265.  
    266. div>
    268. <footer class="container-fluid">
    269.       <div class="row">
    270.         <img src="../image/image1/footer_service.png" class="img-responsive">
    271.       div>
    272.   <div class="row company">
    273.     阿里巴巴是一家杭州的互联网公司
    274.   div>
    275. footer>
    276. body>
    277. html>

  • 相关阅读:
    【C进阶】内存函数
    GraphQL入门之使用ApolloServer和express构建GraphQL服务
    深度克隆和浅拷贝的区别
    Laravel Swagger 使用完整教程
    潘多拉 IOT 开发板学习（RT-Thread）—— 实验2 RGB LED 实验（学习笔记）
    SpringCloud 学习笔记总结 (四)
    java计算机毕业设计网上书店管理系统源码+系统+数据库+lw文档+mybatis+运行部署
    RabbitMQ复习笔记
    Spring-Boot (二) application.properties配置文件内容
    【LeetCode】808.分汤
  • 原文地址：https://blog.csdn.net/qq_41790844/article/details/133914882