-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
317 lines (295 loc) · 9.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="jquery-3.2.1.min.js"></script><!--版本低可能不支持bootstrap -->
<script src="bs/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
body{
/*background: #BDC1B9;*/
/*background: #1AD3F1;*/
}
.nav-n {
z-index: 9999;
}
/*导航区*/
.nav_t {
margin-top: 50px;
background: #BDC1B9;
}
.nav_t li a{
padding: 10px 10px;
}
.tab-c{
margin-top:105px ;
}
/*轮播区格式*/
.fimg img{
width:100%;
}
/*列表格式*/
.tutor_list,.student_list{
margin-top: 20px;
}
/*列表标题格式*/
hr{
margin-top:10px;
margin-bottom:10px;
}
blockquote{
padding-left: 10px;
padding-bottom: 0;
margin: 0;
}
.more{
display: block;
float: right;
}
</style>
<script>
$(function(){
$(' img').addClass('img-responsive center-block');
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('.tutor_list .more').click(function (e) {
e.preventDefault();
$('.nav .tutor a').tab('show');
});
$('.student_list .more').click(function (e) {
e.preventDefault();
$('.nav .student a').tab('show');
});
// $('.tutor_list .d').click(function () {
// $('.nav .success a ').tab('show');
//
// });
// $('.tutor_list .d').click(function () {
// $('.nav .success a ').tab('show');
//
// });
})
</script>
</head>
<body>
<!-- 头部导航栏 开始-->
<nav class="navbar navbar-inverse navbar-fixed-top nav-n " role="navigation">
<div class="container">
<div class="navbar-header ">
<button type="button" class="navbar-toggle " data-toggle="collapse"
data-target=".navbar-responsive-collapse" >
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">赣州家教</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse" >
<ul class="nav navbar-nav ">
<li><a href="logoin.html">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="mypage.html">我的主页</a></li>
</ul>
</div>
</div>
</nav>
<!-- 头部导航栏结束 -->
<!--导航选项卡开始-->
<nav class="navbar navbar-default navbar-fixed-top nav_t" >
<ul class="nav nav-tabs nav-pills ">
<li class="home active"><a href="#home" >首页</a></li>
<li class="success"><a href="#success" >成功案例</a></li>
<li class="tutor"><a href="#tutor" >最新家教</a></li>
<li class="student"><a href="#student">最新学员</a></li>
</ul>
</nav>
<!--导航选项卡结束-->
<!--选项卡面板开始-->
<div class="tab-content tab-c">
<!--首页面板开始-->
<div class="container tab-pane fade in active " id="home">
<!-- 轮播图开始 -->
<div data-ride="carousel" class="carousel slide " id="carousel-container">
<!-- 图片容器 -->
<div class="carousel-inner fimg">
<div class="item"><img src="images/d1.jpg" alt=""></div>
<div class="item active"><img src="images/d2.jpg" alt=""></div>
<div class="item"><img src="images/d3.jpg" alt=""></div>
</div>
<!-- 圆圈指示符 -->
<ol class="carousel-indicators ">
<li data-slide-to="0" data-target="#carousel-container"></li>
<li data-slide-to="1" data-target="#carousel-container"></li>
<li data-slide-to="2" data-target="#carousel-container" class="active"></li>
</ol>
</div>
<!-- 轮播图结束 -->
<!-- 公告区开始 -->
<!-- 家教列表区开始 -->
<div class="tutor_list">
<blockquote>最新家教
<a href="" class="more">
更多
<span class="glyphicon glyphicon-menu-right "></span>
</a>
</blockquote>
<hr>
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="./images/d3.jpg" alt="">
<div class="caption">
<h4>李老师</h4>
<p>编号:825352
本科毕业
江西理工大学
中文专业
</p>
<p>
<a href="tutordetail.html" class="btn btn-primary btn-xs">详细信息</a>
<a href="" class="btn btn-primary btn-xs">预约</a>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="./images/d3.jpg" alt="">
<div class="caption">
<h4>李老师</h4>
<p>编号:825352
本科毕业
江西理工大学
中文专业
</p>
<p>
<a href="" class="btn btn-primary btn-xs">详细信息</a>
<a href="" class="btn btn-primary btn-xs">预约</a>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="./images/d3.jpg" alt="">
<div class="caption">
<h4>李老师</h4>
<p>编号:825352
本科毕业
江西理工大学
中文专业
</p>
<p>
<a href="" class="btn btn-primary btn-xs">详细信息</a>
<a href="" class="btn btn-primary btn-xs">预约</a>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="./images/d3.jpg" alt="">
<div class="caption">
<h4>李老师</h4>
<p>编号:825352
本科毕业
江西理工大学
中文专业
</p>
<p>
<a href="" class="btn btn-primary btn-xs">详细信息</a>
<a href="" class="btn btn-primary btn-xs">预约</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 家教列表区结束 -->
<!-- 学员区域开始 -->
<div class="student_list">
<blockquote>最新学员
<a href="" class="more">
更多
<span class="glyphicon glyphicon-menu-right "></span>
</a>
</blockquote>
<hr>
<div class="panel panel-primary">
<div class="panel-heading">
<p>王小二</p>
</div>
<div class="panel-body">
女老师， ，有家教经验，有责任心。
</div>
<div class="panel-footer">
<a href="" class="btn btn-primary btn-xs">查看</a>
<a href="" class="btn btn-primary btn-xs">预约</a>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<p>王小二</p>
</div>
<div class="panel-body">
女老师， ，有家教经验，有责任心。
</div>
<div class="panel-footer">
<a href="" class="btn btn-primary btn-xs">查看</a>
<a href="" class="btn btn-primary btn-xs">预约</a>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<p>王小二</p>
</div>
<div class="panel-body">
女老师， ，有家教经验，有责任心。
</div>
<div class="panel-footer">
<a href="" class="btn btn-primary btn-xs">查看</a>
<a href="" class="btn btn-primary btn-xs">预约</a>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<p>王小二</p>
</div>
<div class="panel-body">
女老师， ，有家教经验，有责任心。
</div>
<div class="panel-footer">
<a href="" class="btn btn-primary btn-xs">查看</a>
<a href="" class="btn btn-primary btn-xs">预约</a>
</div>
</div>
</div>
<!-- 学员区域结束 -->
</div>
<!--首页面板结束-->
<!--成功案例面板开始-->
<div class="tab-pane fade " id="success">
<div>
成功案例待写区
</div>
</div>
<!--成功案例你面板结束-->
<!--最新家教面板开始-->
<div class="tab-pane fade" id="tutor">
最新家教待写区
<a href="logoin.html">登录</a>
</div>
<!--最新家教面板结束-->
<!--最新学员面板开始-->
<div class="tab-pane fade" id="student">
最新学员待写区
</div>
<!--最新学员面板结束-->
</div>
<!--选项卡面板结束-->
</body>
</html>