1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <link rel="stylesheet" href="css/bootstrap.min.css">
8
9 <style>
10
11
12 .box1{
13 margin-top: 50px;
14 }
15
16 .box1, .box1 .item{
17 height: 500px;
18 overflow: hidden;
19 }
20
21 .carousel-inner .carousel-caption{
22 bottom: 20%;
23 font-size: 40px;
24 }
25
26 @media only screen and (max-width: 768px){
27 .carousel-inner .carousel-caption{
28 bottom: 50%;
29 height: 200px;
30 font-size: 20px;
31 }
32 .box1{
33 height: 200px;
34 }
35 }
36
37 .box2{
38 margin-top: 50px;
39 }
40
41 .box4 hr {
42 margin: 50px auto;
43 background-color: brown;
44 border: 1px solid brown;
45 width: 80%;
46 }
47
48 .tab-content img{
49 height: 70%;
50 /* 图片响应式 */
51 width: 100%;
52 }
53
54
55 </style>
56 </head>
57 <body>
58 <!-- 导航条 -->
59
60
61 <nav class=" mydht navbar navbar-inverse navbar-fixed-top">
62 <div class="container-fluid">
63 <!-- Brand and toggle get grouped for better mobile display -->
64 <div class="navbar-header">
65 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
66 <span class="sr-only">Toggle navigation</span>
67 <span class="icon-bar"></span>
68 <span class="icon-bar"></span>
69 <span class="icon-bar"></span>
70 </button>
71 <a class="navbar-brand" href="#">现代浏览器博物馆</a>
72 </div>
73
74 <!-- Collect the nav links, forms, and other content for toggling -->
75 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
76 <ul class="nav navbar-nav">
77 <li class="active"><a href="#">综合 <span class="sr-only">(current)</span></a></li>
78 <li><a href="#">学校</a></li>
79 <li class="dropdown">
80 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉框 <span class="caret"></span></a>
81 <!-- 这里的href="#Chrome" 要与标签页的连接的 href相同-->
82 <ul class="dropdown-menu" id="marco">
83 <li><a href="#Chrome">Chrome</a></li>
84 <li><a href="#firefox">firefox</a></li>
85 <li><a href="#safari">safari</a></li>
86 <li role="separator" class="divider"></li>
87 <li><a href="#opera">opera</a></li>
88 <li role="separator" class="divider"></li>
89 <li><a href="#ie">IE</a></li>
90 </ul>
91 </li>
92 <li><a href="#" data-target="#myModal" data-toggle="modal">关于</a></li>
93 </ul>
94
95 <ul class="nav navbar-nav navbar-right">
96 <li><a href="#">介绍</a></li>
97 <li class="dropdown">
98 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">你好 <span class="caret"></span></a>
99 <ul class="dropdown-menu">
100 <li><a href="#">Action</a></li>
101 <li><a href="#">Another action</a></li>
102 <li><a href="#">Something else here</a></li>
103 <li role="separator" class="divider"></li>
104 <li><a href="#">Separated link</a></li>
105 </ul>
106 </li>
107 </ul>
108 </div><!-- /.navbar-collapse -->
109 </div><!-- /.container-fluid -->
110 </nav>
111
112
113
114 <!-- 轮播图 -->
115
116 <div id="carousel-example-generic" class="carousel slide box1"
117 data-ride="carousel" >
118 <!-- Indicators -->
119 <ol class="carousel-indicators">
120 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
121 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
122 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
123 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
124 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
125 </ol>
126
127 <!-- Wrapper for slides -->
128 <div class="carousel-inner" role="listbox">
129 <div class="item active">
130 <img src="images/firefox-big.jpg" alt="...">
131 <div class="carousel-caption">
132 <h3>chrome</h3>
133 </div>
134 </div>
135 <div class="item">
136 <img src="images/firefox-big.jpg" alt="...">
137 <div class="carousel-caption">
138 <h3>firefox</h3>
139 </div>
140 </div>
141 <div class="item">
142 <img src="images/ie-big.jpg" alt="...">
143 <div class="carousel-caption">
144 <h3>ie</h3>
145 </div>
146 </div>
147 <div class="item">
148 <img src="images/opera-big.jpg" alt="...">
149 <div class="carousel-caption">
150 <h3>opera</h3>
151 </div>
152 </div>
153 <div class="item">
154 <img src="images/safari-big.jpg" alt="...">
155 <div class="carousel-caption">
156 <h3>safari</h3>
157 </div>
158 </div>
159
160 </div>
161
162 <!-- Controls -->
163 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
164 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
165 <span class="sr-only">Previous</span>
166 </a>
167 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
168 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
169 <span class="sr-only">Next</span>
170 </a>
171 </div>
172
173 <!-- 三列布局 -->
174 <div class="container box2">
175
176 <div class="row">
177 <div class=" col-sm-4 text-center">
178
179 <img src="images/chrome-logo-small.jpg" alt="...">
180 <div class="caption">
181 <h3 class="text-center">chrome</h3>
182 <p class="text-center">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
183 <p class="text-center"><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
184
185 </div>
186
187 </div>
188 <div class=" col-sm-4 text-center">
189
190 <img src="images/firefox-logo-small.jpg" alt="...">
191 <div class="caption">
192 <h3 class="text-center">firefox</h3>
193 <p class="text-center">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
194 <p class="text-center"><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
195
196 </div>
197 </div>
198
199 <div class=" col-sm-4 text-center">
200
201 <img src="images/safari-logo-small.jpg" alt="...">
202 <div class="caption">
203 <h3 class="text-center">safari</h3>
204 <p class="text-center">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
205 <p class="text-center"><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
206
207 </div>
208
209 </div>
210 </div>
211 </div>
212
213 <!-- 分割线 -->
214 <div class="box4"><hr></div>
215
216 <!-- 标签页切换栏 -->
217 <div class="container mybqy">
218
219 <!-- Nav tabs -->
220 <ul class="nav nav-tabs" role="tablist" id="marco-list" >
221 <li role="presentation" class="active"><a href="#Chrome" aria-controls="home" role="tab" data-toggle="tab">Chrome</a></li>
222 <li role="presentation"><a href="#firefox" aria-controls="profile" role="tab" data-toggle="tab">firefox</a></li>
223 <li role="presentation"><a href="#safari" aria-controls="messages" role="tab" data-toggle="tab">safari</a></li>
224 <li role="presentation"><a href="#opera" aria-controls="settings" role="tab" data-toggle="tab">opera</a></li>
225 <li role="presentation"><a href="#ie" aria-controls="settings" role="tab" data-toggle="tab">IE</a></li>
226 </ul>
227
228 <!-- Tab panes id="Chrome"和href="#Chrome"相关联 -->
229 <div class="tab-content">
230 <div role="tabpanel" class="tab-pane active" id="Chrome">
231 <div class="container">
232 <div class="row">
233 <div class=" col-md-7">
234 <h3>IE 你懂的</h3>
235 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
236 </div >
237 <div class=" col-md-5">
238 <img src="./images/chrome-logo.jpg" alt="">
239 </div>
240 </div>
241 </div>
242 </div>
243
244 <div role="tabpanel" class="tab-pane" id="firefox">
245
246 <div class="container">
247 <div class="row">
248 <div class=" col-md-7">
249 <h3>firefox 你懂的</h3>
250 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
251 </div >
252 <div class=" col-md-5">
253 <img src="./images/firefox-logo.jpg" alt="">
254 </div>
255 </div>
256 </div>
257 </div>
258 <div role="tabpanel" class="tab-pane" id="safari">
259
260 <div class="container">
261 <div class="row">
262 <div class=" col-md-7">
263 <h3>IE 你懂的</h3>
264 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
265 </div >
266 <div class=" col-md-5">
267 <img src="./images/safari-logo.jpg" alt="">
268 </div>
269 </div>
270 </div>
271 </div>
272 <div role="tabpanel" class="tab-pane" id="opera">
273
274 <div class="container">
275 <div class="row">
276 <div class=" col-md-7">
277 <h3>IE 你懂的</h3>
278 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
279 </div >
280 <div class=" col-md-5">
281 <img src="./images/ie-logo.jpg" alt="">
282 </div>
283 </div>
284 </div>
285 </div>
286 <div role="tabpanel" class="tab-pane" id="ie">
287
288 <div class="container">
289 <div class="row">
290 <div class=" col-md-5">
291 <h3>safari 你懂的</h3>
292 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
293 </div >
294 <div class=" col-md-7">
295 <img src="./images/safari-logo.jpg" alt="">
296 </div>
297 </div>
298 </div>
299 </div>
300 </div>
301
302 </div>
303
304 <!-- 版权 -->
305 <div class="container">
306 <span style="font-family: 宋体;">©尚硅谷</span>
307
308 </div>
309
310 <!-- 模态框，通过点击关于连接，弹出弹框 -->
311 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
312 <div class="modal-dialog" role="document">
313 <div class="modal-content">
314 <div class="modal-header">
315 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
316 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
317 </div>
318 <div class="modal-body">
319 我是一个模态框
320 </div>
321 <div class="modal-footer">
322 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
323 <button type="button" class="btn btn-primary">Save changes</button>
324 </div>
325 </div>
326 </div>
327 </div>
328
329 <!-- 点击顶部下拉框，跳转到标签页对应的位置
330 1.获取标签页的元素marco
331 2.将下拉框连接的href与标签页的href相同，获取下拉框中连接的href属性
332 3.将标签页的href属性获取到，下拉框的href相关联，tab('show')方法展示出来
333 4.获取标签页当前的top,利用浏览器的滚动距离，滚动标签页这里
334 -->
335
336
337
338 </body>
339 <script src="js/jquery.min.js"></script>
340 <script src="js/bootstrap.min.js"></script>
341
342 <script>
343 $(function(){
344
345 // $('.start').click(function(){
346 // $('.carousel').carousel('cycle');
347 // })
348
349 // $('.pause').click(function(){
350 // $('.carousel').carousel('pause');
351 // })
352
353 $('#marco li>a' ).click(function(e){ //点击下拉框每个连接
354 var href= $(this).attr('href'); //获取每个连接的href属性
355 // console.log(href)
356 $('#marco-list li>a[href='+href+']').tab('show'); //自动切换标签页，tab('show')方法
357 e.preventDefault(); //阻止浏览器点击连接的默认行为
358 // console.log($('.mybqy').offset().top)
359 $('html,body').scrollTop($('.mybqy').offset().top) //让浏览器的滚动条滚到标签页位置
360
361
362 })
363 })
364 </script>
365 </html>
