选中变色没有覆盖整个DIV，a标签那里出问题，整文字没有居中了
<!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">欢迎来到城市医院预约挂号统一平台
请
<a href="#">登录</a>
<a href="#">注册</a>
<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"> </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="#"> </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="#"> </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="#"> </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="#"> </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"> </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"> </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>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;
}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;
}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;
}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;
}
0
收起
正在回答 回答被采纳积分+1
4回答
山河远阔ZZ
2019-02-28 13:58:52
同学你好，我把底部区域的代码给你，你粘贴到你的代码上试试看,记得修改图片路径呀。
HTML:
<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"> </a> <span class="page_wrap"> <a href="#1" class="item item_prev"> </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"> </a> </span> <a href="#0" class="item item_icon item_next"> </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:
.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;
}
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星