JavaWeb11.3【BootStrap：案例-旅遊網首頁(BootStrap重構版)】
阿新 • • 發佈：2021-06-28
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8<link href="css/bootstrap.min.css" rel="stylesheet"> 9 <script src="js/jquery-3.2.1.min.js"></script> 10 <script src="js/bootstrap.min.js"></script> 11 12 <style> 13 .padding_top{ 14 padding-top: 10px; 15 } 16 .search_input{ /*自定義搜尋框樣式*/ 17 float: left; 18 border: 2px solid #ffc900; 19 width: 400px; 20 height: 35px; 21 padding-left: 5px; 22 margin-top: 15px; 23 } 24 .search_btn{ /*自定義搜尋按鈕樣式*/ 25 float: left; 26 border: 1px solid #ffc900; 27 width: 100px; 28 height: 35px; 29 background-color: #ffc900; 30 text-align: center; /*垂直居中*/ 31 line-height: 35px; /*水平居中：令其line-height=height*/ 32 margin-top: 15px; 33 } 34 .jx{ 35 border-bottom: 2px solid #ffc900; 36 padding: 5px; 37 } 38 .company{ 39 height: 40px; 40 background-color: #ffc900; 41 text-align: center; 42 line-height: 40px; 43 font-size: 10px; 44 } 45 </style> 46 </head> 47 <body> 48 <!--1 頁首部分--> 49 <header class="container-fluid"> 50 <div class="row"> <!--廣告圖--> 51 <img src="img/top_banner.jpg" class="img-responsive"> 52 </div> 53 <div class="row padding_top"> <!--padding_top為自定義樣式--> 54 <div class="col-md-3"> 55 <img src="img/logo.jpg" class="img-responsive"> 56 </div> 57 <div class="col-md-5"> 58 <input type="text" placeholder="請輸入路線名稱" class="search_input"> 59 <a href="#" class="search_btn">搜尋</a> 60 </div> 61 <div class="col-md-4"> 62 <img src="img/hotel_tel.png" class="img-responsive"> 63 </div> 64 </div> 65 <div class="row"> <!--導航欄--> 66 <nav class="navbar navbar-default"> 67 <div class="container-fluid"> 68 <!-- Brand and toggle get grouped for better mobile display --> 69 <div class="navbar-header"> 70 <!-- 定義漢堡按鈕 --> 71 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 72 <span class="sr-only">Toggle navigation</span> 73 <span class="icon-bar"></span> 74 <span class="icon-bar"></span> 75 <span class="icon-bar"></span> 76 </button> 77 <a class="navbar-brand" href="#">首頁</a> 78 </div> 79 <!-- Collect the nav links, forms, and other content for toggling --> 80 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 81 <ul class="nav navbar-nav"> 82 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 83 <li><a href="#">Link</a></li> 84 <li><a href="#">Link</a></li> 85 <li><a href="#">Link</a></li> 86 <li><a href="#">Link</a></li> 87 <li><a href="#">Link</a></li> 88 <li><a href="#">Link</a></li> 89 <li><a href="#">Link</a></li> 90 </ul> 91 </div><!-- /.navbar-collapse --> 92 </div><!-- /.container-fluid --> 93 </nav> 94 </div> 95 <div class="row"> <!--輪播圖--> 96 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 97 <!-- Indicators --> 98 <ol class="carousel-indicators"> 99 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 100 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 101 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 102 </ol> 103 <!-- Wrapper for slides --> 104 <div class="carousel-inner" role="listbox"> 105 <div class="item active"> 106 <img src="img/banner_1.jpg" alt="..."> 107 </div> 108 <div class="item"> 109 <img src="img/banner_2.jpg" alt="..."> 110 </div> 111 <div class="item"> 112 <img src="img/banner_3.jpg" alt="..."> 113 </div> 114 </div> 115 <!-- Controls --> 116 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 117 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 118 <span class="sr-only">Previous</span> 119 </a> 120 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 121 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 122 <span class="sr-only">Next</span> 123 </a> 124 </div> 125 </div> 126 </header> 127 <!--2 主體部分--> 128 <div class="container"> 129 <div class="row jx"> <!--jx為自定義樣式--> 130 <img src="img/icon_5.jpg"> 131 <span>黑馬精選</span> 132 </div> 133 <div class="row padding_top"> 134 <div class="col-md-3"> 135 <div class="thumbnail"> 136 <img src="img/jiangxuan_1.jpg"> 137 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 138 <font color="red">¥ 899</font> 139 </div> 140 </div> 141 <div class="col-md-3"> 142 <div class="thumbnail"> 143 <img src="img/jiangxuan_1.jpg"> 144 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 145 <font color="red">¥ 899</font> 146 </div> 147 </div> 148 <div class="col-md-3"> 149 <div class="thumbnail"> 150 <img src="img/jiangxuan_1.jpg"> 151 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 152 <font color="red">¥ 899</font> 153 </div> 154 </div> 155 <div class="col-md-3"> 156 <div class="thumbnail"> 157 <img src="img/jiangxuan_1.jpg"> 158 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 159 <font color="red">¥ 899</font> 160 </div> 161 </div> 162 </div> 163 <div class="row jx"> 164 <img src="img/icon_6.jpg"> 165 <span>國內遊</span> 166 </div> 167 <div class="row padding_top"> 168 <div class="col-md-4"> 169 <img src="img/guonei_1.jpg" class="img-responsive"> 170 </div> 171 <div class="col-md-8"> 172 <div class="row"> 173 <div class="col-md-4"> 174 <div class="thumbnail"> 175 <img src="img/jiangxuan_1.jpg"> 176 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 177 <font color="red">¥ 899</font> 178 </div> 179 </div> 180 <div class="col-md-4"> 181 <div class="thumbnail"> 182 <img src="img/jiangxuan_1.jpg"> 183 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 184 <font color="red">¥ 899</font> 185 </div> 186 </div> 187 <div class="col-md-4"> 188 <div class="thumbnail"> 189 <img src="img/jiangxuan_1.jpg"> 190 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 191 <font color="red">¥ 899</font> 192 </div> 193 </div> 194 </div> 195 <div class="row"> 196 <div class="col-md-4"> 197 <div class="thumbnail"> 198 <img src="img/jiangxuan_1.jpg"> 199 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 200 <font color="red">¥ 899</font> 201 </div> 202 </div> 203 <div class="col-md-4"> 204 <div class="thumbnail"> 205 <img src="img/jiangxuan_1.jpg"> 206 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 207 <font color="red">¥ 899</font> 208 </div> 209 </div> 210 <div class="col-md-4"> 211 <div class="thumbnail"> 212 <img src="img/jiangxuan_1.jpg"> 213 <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> 214 <font color="red">¥ 899</font> 215 </div> 216 </div> 217 </div> 218 </div> 219 </div> 220 </div> 221 <!--3 頁尾部分--> 222 <footer class="container-fluid"> 223 <div class="row"> 224 <img src="img/footer_service.png" class="img-responsive"> 225 </div> 226 <div class="row company"> 227 江蘇傳智播客教育科技股份有限公司版權所有 Copyright 2006-2018©, All Rights Reserved 蘇ICP備16007882 228 </div> 229 </footer> 230 </body> 231 </html>