选中变色没有覆盖整个DIV，a标签那里出问题，整文字没有居中了

选中变色没有覆盖整个DIV，a标签那里出问题，整文字没有居中了

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>城市医院预约平台 - 按医院挂号</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/hospital.css">
<link rel="stylesheet" type="text/css" href="css/ui.css">\
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<!-- 顶部top -->
<div id="top" class="top">
 
<div class="wrap">
<p class="call">010-114/116114</p>
<p class="wellcome">欢迎来到城市医院预约挂号统一平台 
请&nbsp;
<a href="#">登录</a>
<a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">帮助中心
</p>
</div>
</div>
 
<div id="header" class="header">
 
<div class="wrap clearfix">
<a href="#" class="logo"><img src="img/logo.png"></a>
 
<div class="search ui-search">
<div class="ui-search-selected">医院</div>、
<div class="ui-search-selected-list">
 
<a href="#1">科室</a>
<a href="#1">疾病</a>
<a href="#1">医院</a>
 
</div>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
<a href="#" class="ui-search-submit">&nbsp;</a>
</div>
</div>
</div>
 
<div id="nav" class="nav">
<div class="wrap">
 
<a href="index.html" class="link">首页</a>
<a href="hospital.html" class="link link_focus">按医院挂号</a>
<a href="#" class="link">按科室挂号</a>
<a href="#" class="link">按疾病挂号</a>
<a href="#" class="link">最新公告</a>
<a href="#" class="link right">社会知名医院</a>
</div>
</div>
 
<div id="filter" class="filter">
<div class="group">
<div class="caption">医院类型
 
<a href="#" class="condition">全部</a>
<a href="#" class="condition">北京区县属医院</a>
<a href="#" class="condition">其他</a>
</div>
<div class="caption">医院等级
 
<a href="#" class="condition">全部</a>
<a href="#" class="condition">三级甲等</a>
<a href="#" class="condition">三级合格</a>
</div>
<div class="caption">医院位置
 
<a href="#" class="condition">全部</a>
<a href="#" class="condition">朝阳区</a>
<a href="#" class="condition">西城区</a>
<a href="#" class="condition">海淀区</a>
<a href="#" class="condition">丰台区</a>
<a href="#" class="condition">顺义区</a>
<a href="#" class="condition">通州区</a>
 
</div>
</div>
</div>
 
<script type="text/template" id="template_datalist_ite">
 
<div class="item">
<div class="cover"><img src="{imgUrl}" alt="医院a" /></div>
<div class="name">
{name}
<span class="level">{level}</span>
</div>
<div class="time">放号时间 {time}</div>
<div class="phone">电话：{phone}</div>
<div class="address">地址：{address}</div>
<a  class="button" href="#">&nbsp;</a>
</div>
 
</script>
 
<div id="datalist" class="datalist wrap">
 
<div class="item">
<div class="cover"><img src="img/hospital-1.jpg" alt="医院a" /></div>
<div class="name">
首都医科大学附属北京同仁医院
<span class="level">三级甲等</span>
</div>
<div class="time">放号时间 8:30</div>
<div class="phone">电话：010-1234567</div>
<div class="address">地址：北京市东城区东交民巷1号(西区)</div>
<a  class="button" href="#">&nbsp;</a>
</div>
 
<div class="item">
<div class="cover"><img src="img/hospital-1.jpg" alt="医院a" /></div>
<div class="name">
首都医科大学附属北京同仁医院
<span class="level">三级甲等</span>
</div>
<div class="time">放号时间 8:30</div>
<div class="phone">电话：010-1234567</div>
<div class="address">地址：北京市东城区东交民巷1号(西区)</div>
<a  class="button" href="#">&nbsp;</a>
</div>
<div class="item">
<div class="cover"><img src="img/hospital-1.jpg" alt="医院a" /></div>
<div class="name">
首都医科大学附属北京同仁医院
<span class="level">三级甲等</span>
</div>
<div class="time">放号时间 8:30</div>
<div class="phone">电话：010-1234567</div>
<div class="address">地址：北京市东城区东交民巷1号(西区)</div>
<a  class="button" href="#">&nbsp;</a>
</div>
 
 
</div>
 
<div id="pagination" class="pagination wrap">
<a href="#0" class="item item_text item_first">首页</a>
 
<a href="#0" class="item item_icon item_prev">&nbsp;</a>
 
<span class="page_wrap">
<a href="#1" class="item item_prev"><img src="img/icon-pagination-arrow.png"></a>
<a href="#1" class="item item_page">1</a>
<a href="#1" class="item item_page item_page_focus">2</a>
<a href="#1" class="item item_page">3</a>
<a href="#1" class="item item_next"><img src="icon-pagination-arrow.png"></a>
</span>
 
<a href="#0" class="item item_icon item_next">&nbsp;</a>
 
<a href="#0" class="item item_text item_last">尾页</a>
 
<a href="#0" class="item item_count">共计3页</a>
<span href="#0" class="item item_text">到
<input type="text" class="input_page" name="input_page" />
<input type="button" class="input_submit" value="" />
</span>
 
</div>
 
<div id="footer" class="footer">Copyright @ 2017慕课网版权所有</div>
 
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/data.js"></script>
</body>
</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
layout.css
*{
    margin: 0;
    padding: 0;
}
 
.clearfix:after{
    content: ' ';
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    zoom: 1;
}
 
.wrap{
    width: 1000px;
    margin: 0 auto;
    position: relative;
}
 
.top{
    height: 30px;
    background-color: #f5f5f5;
}
 
.header{
    height: 92px;
}
 
.nav{
    height: 36px;
    background-color: #60bff2;
}
 
.banner{
    width: 802px;
    margin: 0 auto;
    height: 414px;
    padding: 9px 0 0 198px;
}
.banner-slider{
    float: left;
    width: 544px;
    height: 414px;
    background-color: #8edff3;
}
.banner-search{
    float: right;
    width: 250px;
    height: 255px;
    background-color: #eee;
}
.banner-help{
    float: right;
    width: 250px;
    height: 146px;
    background-color: #ccc;
    margin-top: 12px;
}
 
.content{
    padding: 10px 0 38px 0;
}
.content-tab{
    float: left;
    width: 742px;
    height: 490px;
    background-color: #eee;
}
 
.content-news,
.content-close{
    float: right;
    width: 248px;
    height: 236px;
    border: 1px solid #ccc;
}
.content-close{
    margin-top: 12px;
    border-color: red;
}
 
.footer{
    height: 70px;
    padding: 25px 0;
    background-color: #eceef2;
}
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
ui.css
/* 搜索 */
.ui-search{
    background: url(../img/ui-search.jpg) center no-repeat;
    font-size: 14px;
    color: #fff;
    position: relative;
}
.ui-search-selected{
    width: 70px;
    height: 38px;
    line-height: 38px;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 14px;
}
.ui-search-selected-list{
    display: none;
    position: absolute;
    width: 67px;
    height: 24px;
    line-height: 24px;
    box-shadow: 3px 3px 5px rgba(0,0,0,.2);
    left: 2px;
    top: 36px;
    z-index: 2;
}
.ui-search-selected-list a{
    display: block;
    color: #A5a2a2;
    text-align: center;
    background-color: #fff;
}
.ui-search-selected-list a:hover{
    background-color: #ebeef5;
}
.ui-search-input{
    width: 208px;
    height: 36px;
    position: absolute;
    left: 73px;
    top: 1px;
    line-height: 36px;
    font-size: 13px;
    color: #A5a2a2;
}
.ui-search-submit{
    display: block;
    position: absolute;
    right: 0;
    top: 1px;
    width: 40px;
    height: 36px;
}
 
/* ui-menu 分类菜单 */
.ui-menu-item{
    height: 22px;
    line-height: 22px;
    padding: 8px 5px 9px 6px;
    margin-left: 2px;
}
.ui-menu-item:hover{
    background-color: #fff;
}
.ui-menu-item-department{
    float: left;
    height: 22px;
    line-height: 22px;
    position: relative;
    padding-left: 30px;
    font-size: 14px;
}
.ui-menu-item-department:before{
    content:' ';
    display: block;
    width: 22px;
    height: 21px;
    position: absolute;
    left: 0;
    top: 1px;
    background: url(../img/icon-menu.jpg) -22px 0 no-repeat;
 
}
.ui-menu-item:nth-child(2) .ui-menu-item-department:before{
    background-position-y: -22px; 
}
.ui-menu-item:nth-child(3) .ui-menu-item-department:before{
    background-position-y: -44px; 
}
.ui-menu-item-disease{
    font-size: 12px;
    float: right;
    padding-left: 5px;
    color: #d7f3ff;
}
.ui-menu-item:hover .ui-menu-item-department:before{
    background-position-x: 0; 
}
.ui-menu-item:hover .ui-menu-item-department{
    color: #333;
}
.ui-menu-item:hover .ui-menu-item-disease{
    color: #868686;
}
.ui-menu-item:hover .ui-menu-item-detail{
    display: block;
}
.ui-menu-item-detail{
    display: none; 
    position: absolute;
    width: 500px;
    height: 393px;
    padding: 20px 10px 10px 29px;
    background: url(../img/bg-menu.jpg) center no-repeat;
    top: 0;
    left: 190px;
    background-color: #fff;
    box-shadow: 5px 5px 2px rgba(0,0,0,.1);
}
.ui-menu-item-detail-group{
    padding-bottom: 20px;
    text-align: left;
}
.ui-menu-item-detail-group-caption{
    width: 100%;
    display: block;
    height: 34px;
    line-height: 34px;
    color: #666;
    font-size: 16px;
    font-weight: bold;
}
.ui-menu-item-detail-group-list{
    line-height: 23px;
}
.ui-menu-item-detail-group-list a{
    display: inline-block;
    color: #868686;
    margin-right: 8px;
    font-size: 12px;
    padding-bottom: 5px;
}
 
.ui-menu-item-detail-group-list a:after{
    content: ' |';
    color: #ddd;
    padding-left: 8px;
}
 
/* 回到顶部 */
.ui-backTop{
    display: none;
    position: fixed;
    right: 2px;
    bottom: 2px;
    z-index: 9;
    width: 40px;
    height: 40px;
    color: #fff;
    background: rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat;
}
.ui-backTop:hover{
    background: rgba(102,102,102,.9);
}
 
.ui-backTop:hover:after{
    content: '回到顶部';
    display: block;
    line-height: 20px;
    text-align: center;
}
 
/* ui-slider 幻灯片组件 */
.ui-slider{
    width: 544px;
    height: 414px;
    position: relative;
    overflow: hidden;
}
.ui-slider-wrap{
    width: 99999px;
    height: 414px;
    position: absolute;
    left: 0;
    right: 0;
    transition: all .5s;
}
.ui-slider-wrap .item{
    display: block;
    float: left;
    width: 544px;
    height: 414px;
}
.ui-slider-arrow{
    width: 544px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    position: absolute;
}
.ui-slider-arrow .item{
    display: block;
    width: 40px;
    height: 40px;
    top: 0;
    background: url(../img/ui-slider-arrow.png) no-repeat;
    position: absolute;
}
.ui-slider-arrow .left{
    left: 0;
}
.ui-slider-arrow .right{
    right: 0;
    background-position: -40px 0;
}
.ui-slider-process{
    width: 544px;
    height: 12px;
    text-align: center;
    left: 0;
    bottom: 20px;
    position: absolute;
}
.ui-slider-process .item{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #eee;
    border-radius: 50%;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover{
    background-color: #1fa4f0;
}
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
318
319
320
321
322
323
324
325
326
327
328
329
base.css
p{
    margin: 0;
    padding: 0;
    display: inline-block;
}
 
a{
    text-decoration: none;
}
select,input{
    border: none;
    outline: none;
}
 
/* #top */
.top{
    line-height: 30px;
    font-size: 13px;
    color: #868686;
}
 
.top .call{
    float: left;
    padding-left: 20px;
    background: url(../img/icon-call.png) no-repeat center left;
}
 
.top .wellcome{
    float: right;
}
 
.top a{
    color: #2da5e1;
    padding-left: 10px;
}
 
/* #header 模块内样式 */
 
.header .logo{
    width: 402px;
    height: 74px;
    padding: 9px 0;
    display: inline-block;
}
.header .logo img{
    width: 100%;
    height: 100%;
}
 
.header .search{
    width: 326px;
    height: 38px;
    position: absolute;
    right: 0px;
    top: 29px;
    /* background-color: orange; */
}
 
 
/* #nav 模块内样式 */
.nav .link{
    display: inline-block;
    float: left;
    padding-left: 20px;
    line-height: 36px;
    color: #fff;
    font-size: 16px;
    min-width: 80px;
    text-align: center;
}
.nav a:hover{
    color: #d7f3ff;
}
 
.nav .menu{
    width: 130px;
    padding-right: 30px;
    background-color: #1fa4f0;
    position: relative;
}
 
.nav .menu .menu-list{
    background-color: #1fa4f0;
    width: 100%;
    height: 423px;
    position: absolute;
    left: 0;
    top: 36px;
}
 
/* #banner 模块内样式 */
.banner-search{
    background-color: #fafafa;
}
 
.banner-help .caption,
.banner-search .caption{
    height: 22px;
    padding: 15px 0 15px 0;
    text-align: center;
}
 
.banner-help .caption .text,
.banner-search .caption .text{
    display: inline-block;
    height: 22px;
    line-height: 22px;
    padding-left: 28px;
    color: #fec009;
    background: url(../img/icon-help.png) no-repeat 0 0;
}
.banner-search .form{
    height: 150px;
}
 
.banner-search .form .line{
    padding-bottom: 9px;
    text-align: center;
}
 
.banner-search .form .line select{
    width: 170px;
    font-size: 12px;
    z-index: 0;
    height: 26px;
    line-height: 26px;
    padding: 2px 0;
    color: #666;
}
.banner-search .submit{
    height: 32px;
    text-align: center;
}
.banner-search .submit .button{
    width: 108px;
    height: 33px;
    background-color: #fecd09;
    font-size: 14px;
    color: #fff;
    border-radius: 3px;
}
 
.banner-help{
    background-color: #fafafa;
}
.banner-help .caption .text{
    color: #00b3ea;
    background-position: 0 -23px;
}
 
.banner-help .link{
    color: #00b3ea;
    display: inline-block;
    width: 86px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    text-align: center;
    padding: 0 0 8px 26px;
}
 
/* #content 模块样式 */
 
.content-news{
    background-color: #fff;
    border: 1px solid #f4f6fa;
}
 
.content-close .caption,
.content-news .caption{
    height: 38px;
    line-height: 38px;
    background-color: #f4f6fa;
    text-indent: 20px;
    color: #fec009;
    font-size: 15px;
}
 
.content-close .more,
.content-news .more{
    float: right;
    padding-right: 22px;
    font-size: 12px;
    color: #868686;
}
 
.content-close .list,
.content-news .list{
    padding: 15px 20px 13px 35px;
    line-height: 29px;
    font-size: 12px;
    background: url(../img/list-yellow.jpg) 17px 20px no-repeat;
}
.content-close .list .link,
.content-news .list .link{
    display: block;
    color: #969696;
}
 
.content-close{
    background-color: #fff;
    border: 1px solid #f4f6fa;
}
 
.content-close .caption{
    color: #4ab4ed;
}
 
.content-close .list{
    background-image: url(../img/list-blue.jpg);
}
 
.content-tab{
    background: none;
}
.content-tab .caption{
    height: 34px;
    line-height: 34px;
    background-color: #f5f6fa;
}
.content-tab .caption .item{
    display: block;
    width: 112px;
    height: 34px;
    text-align: center;
    float: left;
    color: #00b3ea;
}
.content-tab .caption .item_focus{
    background-color: #60bff2;
    color: #fff;
}
 
.content-tab .block{
    border: 1px solid #f4f6fa;
    height: 452px;
}
 
.content-tab .block-caption{
    height: 26px;
    line-height: 26px;
    padding: 8px;
    border-bottom: 1px solid #f4f6fa;
}
 
.content-tab .block-caption-item{
    display: block;
    padding: 0 10px; 
    font-size: 12px;
    color: #4c4948;
    float: left;
}
.content-tab .block-caption-item_focus{
    background-color: #60bff2;
    color: #fff;
}
 
.content-tab .block-content{
    padding: 16px 12px;
}
.content-tab .block-content .block-more{
    display: block;
    line-height: 55px;
    text-align: center;
    color: #5084c4;
    font-size: 14px;
}
/* 医院列表 - 容器 */
.content-tab .block-content .block-list{}
 
.content-tab .block-content .block-list .item{
    float: left;
    width: 216px;
    height: 102px;
    padding: 0 20px 10px 120px;
    position: relative;
    font-size: 12px;
}
 
.content-tab .block-content .block-list .item img{
    width: 110px;
    height: 98px;
    position: absolute;
    left: 0;
    top: 0;
}
 
.content-tab .block-content .block-list .item-name{
    color: #036eb7;
    font-size: 14px;
    line-height: 21px;
    padding-top: 13px;
}
.content-tab .block-content .block-list .item-level{
    float: right;
    font-size: 12px;
    color: #979797;
}
.content-tab .block-content .block-list .item-phone,
.content-tab .block-content .block-list .item-address{
    line-height: 18px;
    padding-bottom: 4px;
    color: #666;
}
 
/* 医院方案列表 - 容器 */
.content-tab .block-content .block-text-list{}
 
.content-tab .block-content .block-text-list .item{
    display: block;
    width: 351px;
    height: 27px;
    font-size: 14px;
    color: #666;
    padding-top: 8px;
    float: left;
    border-bottom: 1px dashed #dcdddd;
}
.content-tab .block-content .block-text-list .item:nth-child(2n){
    margin-left: 13px;
}
 
.footer{
    line-height: 70px;
    text-align: center;
    font-size: 12px;
    color: #666;
}
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
hosptia;.css
.nav .link_focus{
    columns: #fff;
    background: #1fa4f0;
    padding: 0 10px;
}
 
.filter .group{
    width: 1200px;
    height: 180px;
    margin: 20px auto;
    font-size: 16px;
    background-color: #eee;
    position: relative;
}
 
.filter .group .caption{
    height: 60px;
    margin-left: 33px;
    line-height: 60px;
}
.filter .group .caption .condition{
    padding: 0 17px;
}
.filter .group .caption .condition:nth-child(2n){
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.filter .group .caption .condition:last-child{
    border-right: 1px solid #ccc;
}
.filter .group .caption .condition:nth-child(1){
    width: 56px;
    height: 18px;
    padding: 1px 2px;
    margin-left: 45px;
    margin-right: 11px: 
    color: #fff;
    background-color: #60bff2;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.datalist{
    width: 1200px;
    height: 543px;
    border: 1px solid #eee;
}
.datalist .item{
    height: 157px;
    border: 1px solid #eee; 
    border-top: none;
}
.datalist .cover{
    float: left;
    margin-top: 0px;
    margin-left: 15px;
    margin-right: 29px;
    position: relative;
}
.datalist .item img{
    height: 130px;
}
.datalist .item .name{
    height: 41px;
    line-height: 41px;
    font-size: 18px;
    margin-top: 23px;
    font-weight: bolder;
}
.datalist .item .name .level{
    color: #dce318;
    padding-left: 19px;
    font-size: 16px;
}
.datalist .item .time,
.datalist .item .phone,
.datalist .item .address{
    height: 18px;
    margin: 0 0 7px 218px; 
    padding-left: 30px;
    font-size: 16px;
    color: #ccc;
    position: relative;
}
.datalist .item .time{
    background: url(../img/icon-tel.png) 0 -36px  no-repeat;
}
.datalist .item .phone{
    background: url(../img/icon-tel.png) 0 2px  no-repeat;
}
.datalist .item .address{
    background: url(../img/icon-tel.png) 0 -18px  no-repeat;
}
.datalist .item:hover{
    background-color: rgba(0,0,255,.1);
}
 
.pagination{
    width: 1200px;
    height: 43px;
    line-height: 43px;
    text-align: center;
 
    border: 1px solid #eee;
    border-top: none;
}
.pagination .page_wrap{
    width: 1200px;
    height: 43px;
    line-height: 43px;
}
.pagination .page_wrap .item{
    display: inline-block;
    width: 23px;
    height: 23px;
    font-size: 20px;
    border: 1px solid #eee;
    border-radius: 3px;
    margin-top: 9px;
    text-align: center;
}

http://img1.sycdn.imooc.com//climg/5c76454600019c1612230086.jpg

http://img1.sycdn.imooc.com//climg/5c7645470001d72a07980211.jpg
菜鸟x 2019-02-27
源自：实战：挂号平台首页   6-4 按医院查找-分页原理、前端模版原理
0
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

4回答
山河远阔ZZ 2019-02-28 13:58:52

同学你好，我把底部区域的代码给你，你粘贴到你的代码上试试看,记得修改图片路径呀。

http://img1.sycdn.imooc.com//climg/5c777807000107b312480049.jpg

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <div id="pagination" class="pagination wrap">
                        <a href="#0" class="item item_text item_first">首页</a>
                        <a href="#0" class="item item_icon item_prev">&nbsp;</a>
                        <span class="page_wrap">
                            <a href="#1" class="item item_prev">&nbsp;</a>
                            <a href="#1" class="item item_page">1</a>
                            <a href="#1" class="item item_page item_page_focus">2</a>
                            <a href="#1" class="item item_page">3</a>
                            <a href="#1" class="item item_next">&nbsp;</a>
                        </span>
                        <a href="#0" class="item item_icon item_next">&nbsp;</a>
                        <a href="#0" class="item item_text item_last">尾页</a>
                        <a href="#0" class="item item_count">共计3页</a>
                        <span href="#0" class="item item_text">到
                            <input type="text" class="input_page" name="input_page" />
                            <input type="button" class="input_submit" value="" />
                        </span>
                    </div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.pagination {
        width: 1200px;
        border: 1px solid red;
        text-align: center;
    }
 
    .page_wrap .item {
        display: inline-block;
        width: 23px;
        height: 23px;
        line-height: 23px;
        border: solid 1px #dcdddd;
        border-radius: 3px;
    }
 
    .item_prev {
        background: url(img/icon-pagination-arrow.png) no-repeat;
        background-position: 6px -15px;
    }
 
    .item_next {
        background: url(img/icon-pagination-arrow.png) no-repeat;
        background-position: 8px 4px;
    }
0
收起回答
山河远阔ZZ 2019-02-28 12:15:47

同学你好，是在pagintion里面嵌套哦，参考下图：

http://img1.sycdn.imooc.com//climg/5c776053000141a809760121.jpg

http://img1.sycdn.imooc.com//climg/5c77606b00018bf103250088.jpg

可以试一试哦。

0
收起回答
  • 提问者 菜鸟x #1
    ?还是有问题。。。
    2019-02-28 12:37:14
山河远阔ZZ 2019-02-28 09:49:12

同学你好，这是因为a标签的父元素里面用了line-height：43px，参考下图修改：

http://img1.sycdn.imooc.com//climg/5c773d680001dda703790125.jpg

http://img1.sycdn.imooc.com//climg/5c773d7c0001c7af03400178.jpg

底部布局建议：

通常情况下，会使用float浮动来进行布局：

先把a标签转成换成display:block元素，在通过float浮动来进行布局，参考下图：

http://img1.sycdn.imooc.com//climg/5c773dc60001ab9e03770276.jpg

让底部内容居中，建议在内容的外面再嵌套一个div容器，设置固定的宽度，在通过margin：0auto来设置居中效果。

祝学习愉快！~

0
收起回答
  • 提问者 菜鸟x #1
    但是，下面的页数的多少是根据筛选内容而改变的，设置固定高度，到时候会不会出现问题啊？
    2019-02-28 10:05:27
  • 山河远阔ZZ 回复 提问者 菜鸟x #2
    同学你好，老师说的是，设置一个固定的宽度（例如：1200），那么筛选的内容都是存放在1200px里面，是不会有问题的哦。
    2019-02-28 10:34:12
  • 提问者 菜鸟x #3
    是Pagintion上再嵌套一个div吗？
    2019-02-28 11:25:41
山河远阔ZZ 2019-02-27 17:59:43

同学你好。

1、变色没有覆盖整个DIV：

  • 是因为name区域设置了margin-top:23px，如下：

    http://img1.sycdn.imooc.com//climg/5c765a0b0001368a12900092.jpg

    建议把margin-top改变为padding-top：

    http://img1.sycdn.imooc.com//climg/5c765a5b0001c0aa04350189.jpg

    cover区域设置margin-top：23，参考下图：

    http://img1.sycdn.imooc.com//climg/5c765aa70001cb6d04180200.jpg

2、图片路径出错，修改如下：

http://img1.sycdn.imooc.com//climg/5c765afb0001e27511390038.jpg

建议左右箭头使用背景图片的方式引入，这样可以通过图片定位来显示出一个左按钮或者一个右按钮，如下：

http://img1.sycdn.imooc.com//climg/5c765c280001ea4c09000091.jpg

3、同学是问底部为什么没有居中吗？

底部内容其实已经居中了哦，因为“到”后面有两个空的input标签快，所以导致效果看起来没有居中，如下：

http://img1.sycdn.imooc.com//climg/5c765f520001721210830058.jpg

可以自己试一试哦，如果帮助到了你，欢迎采纳。

祝学习愉快！

0
收起回答
  • 提问者 菜鸟x #1
    我想问下，a标签为什么没有上下居中，a标签里的文字脱离出框了
    2019-02-28 09:21:54
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

我问的问题在加下划线的备注那里，是div标签选择器与.div类选择器的设置背景颜色的问题
17 0 6
行的颜色设置和文字居中发生了矛盾不知道怎么修复
42 1 9
为什么鼠标移上去还没移走就触发了onmouseout事件颜色就变绿了，不是应该鼠标移出才变色的吗
17 0 7
给img设置浮动怎么没出现父元素的高度塌陷情况呢？
29 0 5
整体居中没弄好
0 0 3

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码