体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

关于wrap 的高度没有完全撑开的问题

来源：4-4 首页.基本样式-模块-banner

chenqianguan

2018-04-11 19:06:41

<!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/ui.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>

<div id="top" class="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;
<a href="#">登录</a>
<a href="#">注册</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">帮助中心</a>
</p>
</div>
</div>


<div id="header" class="header">
<div class="wrap clearfix">
<a class="logo" href="index.html"><img src="./img/logo.png"></a>

<div class="search ui-search">

<div class="ui-search-selected">医院</div>
<div class="ui-search-select-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">

<div class="link menu">全部科室
<div class="menu-list ui-menu">

<div class="ui-menu-item">

<a href="#1" class="ui-menu-item-department">内科</a>
<a href="#1" class="ui-menu-item-disease">高血压</a>
<a href="#1" class="ui-menu-item-disease">冠心病</a>

<div class="ui-menu-item-detail">

<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
内科
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
内科常见
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>



</div>

</div>
<div class="ui-menu-item">

<a href="#1" class="ui-menu-item-department">外壳</a>
<a href="#1" class="ui-menu-item-disease">a疾病</a>
<a href="#1" class="ui-menu-item-disease">b疾病</a>

<div class="ui-menu-item-detail">

<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
a疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
b疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>



</div>

</div>
<div class="ui-menu-item">

<a href="#1" class="ui-menu-item-department">儿科</a>
<a href="#1" class="ui-menu-item-disease">c疾病</a>
<a href="#1" class="ui-menu-item-disease">d疾病</a>

<div class="ui-menu-item-detail">

<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
c疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
d疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>



</div>

</div>
</div>
</div>

<a href="hospital.html" class="link">按医院挂号</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="banner" class="banner">

<div class="banner-slider ui-slider">

<div class="ui-slider-wrap">
<a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
<a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a>
<a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a>
</div>

<div class="ui-slider-arrow">
<a href="#l" class="item left">&nbsp;</a>
<a href="#r" class="item right">&nbsp;</a>
</div>

<div class="ui-slider-process">
<a href="#0" class="item item_focus">&nbsp;</a>
<a href="#1" class="item item">&nbsp;</a>
<a href="#2" class="item item">&nbsp;</a>
</div>

</div>
<div class="banner-search">
<div class="caption"><span class="text">快速预约</span></div>
<div class="form ui-cascading">

<div class="line">
<select name="area" data-search="getDistinctArea" data-where=""><option>医院地区</option></select>
</div>
<div class="line">
<select name="level" data-search="getLeveByArea" data-where=""><option>医院等级1</option>
<option>医院等级2</option>
</select>

</div>
<div class="line">
<select name="name"  data-search="getNameByAreaAndLevel" data-where=""><option>医院名称2</option></select>
</div>
<div class="line">
<select name="department"  data-search="getDepartmentArrByHospitalName" data-where=""><option>医院科室3</option></select>
</div>

</div>
<div class="submit">
<input type="button" class="button" value="快速查询">
</div>

</div>
<div class="banner-help">

<div class="caption"><span class="text">帮助中心</span></div>
<div class="list">

<a href="#" class="link">账号指南</a>
<a href="#" class="link">预约指南</a>
<a href="#" class="link">账号找回</a>
<a href="#" class="link">常见问题</a>

</div>

</div>

</div>

<div id="content" class="content">

<div class="wrap clearfix">

<div class="content-tab">

<div class="caption">
<a href="#8" class="item item_focus">医院</a>
<a href="#7" class="item ">科室</a>
</div>
<div class="block">
<div class="item">
<div class="block-caption">

<a href="#1" class="block-caption-item block-caption-item_focus">全部</a>
<a href="#1" class="block-caption-item">东城区</a>
<a href="#1" class="block-caption-item">西城区</a>
<a href="#1" class="block-caption-item">朝阳区</a>
<a href="#1" class="block-caption-item">丰台区</a>
<a href="#1" class="block-caption-item">石景山区</a>
<a href="#1" class="block-caption-item">海淀区</a>
<a href="#1" class="block-caption-item">门头沟区</a>
<a href="#1" class="block-caption-item">房山区</a>
<a href="#1" class="block-caption-item">其他</a>

</div>
<div class="block-content">

<div class="block-wrap">
<div class="block-list clearfix">

<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院" ／>
<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话：东院咨询台:010-69155564..</div>
<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院" ／>
<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话：东院咨询台:010-69155564..</div>
<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院" ／>
<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话：东院咨询台:010-69155564..</div>
<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院" ／>
<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话：东院咨询台:010-69155564..</div>
<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
</div>
</div>
<div class="block-text-list clearfix">

<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>

<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>

</div>
<a class="block-more">更多医院</a>
</div>

<div class="block-wrap" style="display: none;">
其他城区内容
</div>

</div>
</div>
<div class="item" style="display: none;">
科室内容
</div>
</div>


</div>

<div class="content-news">
<div class="caption"> 最新公告 <a href="#8" class="more">|更多</a> </div>
<div class="list">

<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">防护策略升级通知</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">防护策略升级通知</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">防护策略升级通知</a>

</div>
</div>
<div class="content-close">

<div class="caption"> 停诊公告 <a href="#8" class="more">|更多</a> </div>
<div class="list">

<a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院妇</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">北京安贞医院妇</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">北京安贞医院妇</a>
</div>
</div>
</div>

</div>

<div id="footer" class="footer">
Copyright © 2017慕课网版权所有
</div>
<a href="#" class="go-top"></a>
<!-- <script type="text/javascript" src="js/ui.js"></script> -->
<!-- <script type="text/javascript" src="js/data.js"></script> -->
</body>
</html>
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 .welcome{
	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: 30px;
	line-height: 36px;
	color: #fff;
	font-size: 16px;
	min-width: 80px;
	text-align: center;
}
.nav .link_focus{
	color: #fff;
	background-color: #1fa4f0;
	padding: 0 20px;
}
.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;
	font-size: 16px;
	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;
	border:1px solid #dcdddd;
	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 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;
}
/* 其他 */
.go-top{
  display: block;
  position: fixed;
  right: 2px;
  bottom: 2px;
  z-index: 9;
  width: 40px;
  height: 40px;
  color: #fff;
  background: rgb(102, 102, 102) url(../img/icon-go-up.png) center no-repeat;
}
.go-top:hover{
  background: rgb(102, 102, 102);
}
.go-top:hover:after{
  content: '回到顶部';
  display: block;
  line-height: 20px;
  text-align: center;
}
body{
	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-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-select-list{
	display: none;
	position: absolute;
	width: 67px;
	line-height: 24px;
	background-color: #fff;
	box-shadow: 3px 3px 5px rgba(0,0,0,.2);
	left: 2px;
	top: 36px;
	z-index: 2;
}
.ui-search-select-list a{
	display: block;
	color: #A5a2a2;
	text-align: center;
}
.ui-search-select-list a:hover{
	background-color: #ebeef5;
}
.ui-search-input{
	width: 208px;
	height: 26px;
	position: absolute;
	top: 5px;
	left: 73px;
	line-height: 26px;
	font-size: 13px;
	color: #A5A2A2;

}
.ui-search-submit{
	display: block;
	position: absolute;
	right: 0;
	top: 1px;
	width: 40px;
	height: 36px;
}

/* ui-menu 分类菜单 */
.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;
	color: #fff;
}
.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: -66px;
}

.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: #fff url(../img/bg-menu.jpg) center no-repeat;
	top: 0;
	left: 190px;
	box-shadow: 5px 5px 2px rgba(0,0,0,.1);
	z-index: 99;
}
.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: #eee;
	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;
	position: absolute;
	top: 50%;
	margin-top: -20px;
}
.ui-slider-arrow .item{
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	background: url(../img/ui-slider-arrow.png) no-repeat;
}
.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;
	position: absolute;
	left: 0;
	bottom: 20px;
}
.ui-slider-process .item{
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(../img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover{
	background-position: -23px 0;
}

http://img.mukewang.com/climg/5acdec3b0001186e12430191.jpg

写回答

1回答

怎么都被占用了呢

2018-04-11

因为子元素的浮动，会造成父元素的高度塌陷，这个没有高度，对效果没有影响的。

0

0 学习 · 36712 问题

查看课程

相似问题

老师请问怎么撑开父元素的高度

回答 1

关于高度塌陷的问题

回答 1

这个是怎么实现的？

回答 3

为什么获取不到body的滚动条高度

回答 8

为什么把wrap加到top里面，宽度就会改变

回答 1

打开慕课网App查看更多内容