体系课

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

关于背景图片如何设置，请修改一下，请老师详细的解答一下关于背景图定位

来源：5-3 首页.UI组件-UiMenu

慕函数4234673

2020-02-10 16:21:17

<!DOCTYPE html>

<html leng="en">

<head>

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" type="text/css" href="css/index.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 class="top">

<div class="wrap">

<p class="call">010-114/110614</p>

<p class="welcome">欢迎来到城市统一挂号平台&nbsp;请&nbsp;&nbsp;

<a  href="#">登录</a>&nbsp;&nbsp; 

  <a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">帮助中心</a></p>

</div>

</div>

<div class="header">

<div class="wrap">

<a href="#2" 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="#2" >科室</a>

<a href="#2" >疾病</a>

<a href="#2">医院</a>

</div>

<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">

<a href="#2" class="ui-search-submit"></a>

</div>

</div>

</div>

<div class="nav">

<div class="wrap">

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

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

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

<a href="#4" class="ui-menu-item-department">内科</a>

<a href="#4" class="ui-menu-item-disease">高血压</a>

<a href="#4" 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="#3">心脑血管科</a>

<a href="#3">神经内科</a>

<a href="#3">内分泌科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

</div>

<div class="ui-menu-item-detail-group-caption">内科常见的疾病</div>

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

<a href="#3">心脑血管科</a>

<a href="#3">神经内科</a>

<a href="#3">内分泌科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

</div>

</div>

</div>

</div>

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

<a href="#4" class="ui-menu-item-department">外科</a>

<a href="#4" class="ui-menu-item-disease">高血压</a>

<a href="#4" 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="#3">心脑血管科</a>

<a href="#3">神经内科</a>

<a href="#3">内分泌科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

</div>

<div class="ui-menu-item-detail-group-caption">内科常见的疾病</div>

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

<a href="#3">心脑血管科</a>

<a href="#3">神经内科</a>

<a href="#3">内分泌科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

<a href="#3">神经内科</a>

<a href="#3">血液科</a>

<a href="#3">心脑血管科</a>

<a href="#3">内分泌科</a>

<a href="#3">心血管科</a>

<a href="#3">心科</a>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#" 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 class="banner">

<div class="banner_slider"></div>

<div class="banner_search">

<div class="caption"><span class="text">快速预约</span></div>

<div class="form">

<div class="link"><select name="eara"><option>医院地区</option></select></div>

<div class="link"><select name="level"><option>医院等级</option></select></div>

<div class="link"><select name="name"><option>医院名称</option></select></div>

<div class="link"><select name="department"><option>医院科室</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="line">账号指南</a>

            <a href="#" class="line">预约指南</a>

            <a href="#" class="line">账号找回</a>

            <a href="#" class="line">常见问题</a>

</div>

</div>

</div>

<div class="content">

<div class="wrap">

<div class="content_tab">

<div class="caption">

<a href="#3" class="item">医院</a>

<a href="#3" class="item1">科室</a>

</div>

<div class="block">

<div class="item">

<div class="block_item">

<a href="#3" class=" specail block_caption_item">全部</a>

<a href="#3" class="block_caption_item">东城区</a>

<a href="#3" class="block_caption_item">西城区</a>

<a href="#3" class="block_caption_item">朝阳区</a>

<a href="#3" class="block_caption_item">丰台区</a>

<a href="#3" class="block_caption_item">石景山区</a>

<a href="#3" class="block_caption_item">海定区</a>

<a href="#3" class="block_caption_item">门头沟区</a>

<a href="#3" class="block_caption_item">房山区</a>

<a href="#3" class="block_caption_item">其他</a>

</div>

<div class="block_content">

<div class="block_list">

<div class="block_list_item">

<img src="img/hospital-1.jpg" alt="医院">

<div class="hospital">北京协和医院 <span class="hospital-level">【三级甲等】</span></div>

<div class="phone">电话：东院咨询台：010-69155564..</div>

<div class="address">地址：[东院]北京市东城区帅府园一号[西院]北京市西城区牡丹..</div>

</div>

<div class="block_list_item">

<img src="img/hospital-2.jpg" alt="医院">

<div class="hospital">北京大学第一医院 <span class="hospital-level">【三级甲等】</span></div>

<div class="phone">电话：010-83572211、010-6..</div>

<div class="address">地址：北京市西城区西什库大街八号</div>

</div>

<div class="block_list_item">

<img src="img/hospital-3.jpg" alt="医院">

<div class="hospital">北京大学人民医院 <span class="hospital-level">【三级甲等】</span></div>

<div class="phone">电话：010-88325141、010-8..</div>

<div class="address">地址：北京市西城区西直门南大街11号</div>

</div>

<div class="block_list_item">

<img src="img/hospital-4.jpg" alt="医院">

<div class="hospital">北京大学第三医院 <span class="hospital-level">【三级甲等】</span></div>

<div class="phone">电话：010-88325141、010-8..</div>

<div class="address">地址：北京市西城区西直门南大街11号</div>

</div>

</div>


<div class="block_text_list">

<a href="#3" class="item">中国医学科学院肿瘤医院<span>【三级甲等】</span></a>

<a href="#3" class="item">中国医学科学院埠外医院<span>【三级甲等】</span></a>

<a href="#3" class="item">首都医科大学附属北京天坛医..<span>【三级甲等】</span></a>

<a href="#3" class="item">首都医科大学附属北京安贞医..<span>【三级甲等】</span></a>

<a href="#3" class="item">首都医科大学武宣医院<span>【三级甲等】</span></a>

<a href="#3" class="item">首都医科大学附属同仁..<span>【三级甲等】</span></a>

</div>

<a href="#3" class="block_more">更多医院</a>

</div>

</div>

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

</div>

</div>

<div class="content_new">

<div class="caption">最新公告 <a href="#" class="more">|&nbsp;更多</a></div>

<div class="list">

<a href="#" class="link">特需门诊暂停</a><br>

<a href="#" class="link">中国联合网络通讯...</a><br>

<a href="#" class="link">防护侧率升级通知</a><br>

<a href="#" class="link">首都研究所附属儿科...</a><br>

<a href="#" class="link">首都医科大学附属..</a><br>

<a href="#" class="link">北京燕华医院暂停</a>

</div>


</div>

<div class="content_close">

<div class="caption">停诊公告 <a href="#" class="more">|&nbsp;更多</a></div>

<div class="list">

<a href="#" class="link">特需门诊暂停暂停暂停暂停暂停..</a><br>

<a href="#" class="link">中国联合网...</a><br>

<a href="#" class="link">防护侧率升级通知</a><br>

<a href="#" class="link">首都研究所附属儿科...</a><br>

<a href="#" class="link">首都医科大学附属复..</a><br>

<a href="#" class="link">北京燕华医院暂停</a>

</div>


</div>

   </div>

</div>

<div class="footer">

<p>copyright&copy;2017史雅文版权所有</p>

</div>

<script type="text/javascript" src="js/ui.js"></script>

</body>

</html>

.ui-search{

background: url(../img/ui-search.jpg) no-repeat center;

font-size: 14px;

color:#fff;

position: relative;

}

.ui-search .ui-search-selected{

   position: absolute;

   width: 70px;

   height: 38px;

   line-height: 38px;

   top:0px;

   left:0px;

   padding-left: 14px;

}

.ui-search .ui-search-selected-list{

width: 67px;

position: absolute;

line-height: 24px;

background:#fff;

box-shadow: 3px 3px 5px rgba(0,0,0,.2);

top:36px;

left: 2px;

z-index:2;

display: none;

}

.ui-search .ui-search-selected-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.ui-search .ui-search-selected-list a:hover{

background: #ebeef5;

}

.ui-search .ui-search-input{

width: 100px;

height: 36px;

line-height: 38px;

text-align: center;

position: absolute;

top:1px;

right: 150px;

}

.ui-menu-item {

height: 22px;

line-height: 22px;

padding:8px 5px 9px 6px;

color:#fff;

margin-left: 2px;

}

.ui-menu-item .ui-menu-item-department:before{

content: "";

display: block;

width: 22px;

height: 21px;

position: absolute;

top:1px;

left: 0px;

background: url(../img/icon-menu.jpg) no-repeat -22px 0;

}

.ui-menu-item:hover .ui-menu-item-department:before{

  background-position: 0 0:;

}

.ui-menu-item:nth-chid(2):hover .ui-menu-item-department:before{

  background-position-y:-22px:;

}

.ui-menu-item:nth-chid(3):hover .ui-menu-item-department:before{

  background-position-y:-66px:;

}

.ui-menu-item:hover{

background: #fff;

}

.ui-menu-item:hover .ui-menu-item-department{

color:black;

}

.ui-menu-item:hover .ui-menu-item-disease{

color:gray;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

}


.ui-menu-item .ui-menu-item-department{

display: inline-block;

color: #fff;

float: left;

padding-left: 30px;

font-size: 14px;

position: relative;

}

.ui-menu-item .ui-menu-item-disease{

display: block;

float: right;

color: #d7f3ff;

font-size: 12px;

margin-right: 5px;

}

.ui-menu-item .ui-menu-item-detail{

   position: absolute;

   width: 539px;

   height: 423px;

   top:0px;

   left:191px;

   background: #fff;

   box-shadow: 5px 5px 2px rgba(0,0,0,.1);

   background: url(../img/bg-menu.jpg) no-repeat center;

   display: none;

}

.ui-menu-item .ui-menu-item-detail .ui-menu-item-detail-group{

padding:20px 0px 0px 20px;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-caption{

width: 100%;

height: 20px;

line-height: 20px;

font-size: 18px;

color:black;

margin-bottom: 10px;

font-weight: bold;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list{

margin-bottom: 20px;

text-align: left;

}


.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list a{

font-size: 12px;

color:gray;

height: 20px;

line-height: 20px;

margin-right: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:after{

content:"|";

color:gray;

margin-left: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:hover{

color:green;

}

.ui-search{

background: url(../img/ui-search.jpg) no-repeat center;

font-size: 14px;

color:#fff;

position: relative;

}

.ui-search .ui-search-selected{

   position: absolute;

   width: 70px;

   height: 38px;

   line-height: 38px;

   top:0px;

   left:0px;

   padding-left: 14px;

}

.ui-search .ui-search-selected-list{

width: 67px;

position: absolute;

line-height: 24px;

background:#fff;

box-shadow: 3px 3px 5px rgba(0,0,0,.2);

top:36px;

left: 2px;

z-index:2;

display: none;

}

.ui-search .ui-search-selected-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.ui-search .ui-search-selected-list a:hover{

background: #ebeef5;

}

.ui-search .ui-search-input{

width: 100px;

height: 36px;

line-height: 38px;

text-align: center;

position: absolute;

top:1px;

right: 150px;

}

.ui-menu-item {

height: 22px;

line-height: 22px;

padding:8px 5px 9px 6px;

color:#fff;

margin-left: 2px;

}

.ui-menu-item .ui-menu-item-department:before{

content: "";

display: block;

width: 22px;

height: 21px;

position: absolute;

top:1px;

left: 0px;

background: url(../img/icon-menu.jpg) no-repeat -22px 0;

}

.ui-menu-item:hover .ui-menu-item-department:before{

  background-position: 0 0:;

}

.ui-menu-item:nth-chid(2):hover .ui-menu-item-department:before{

  background-position-y:-22px:;

}

.ui-menu-item:nth-chid(3):hover .ui-menu-item-department:before{

  background-position-y:-66px:;

}

.ui-menu-item:hover{

background: #fff;

}

.ui-menu-item:hover .ui-menu-item-department{

color:black;

}

.ui-menu-item:hover .ui-menu-item-disease{

color:gray;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

}


.ui-menu-item .ui-menu-item-department{

display: inline-block;

color: #fff;

float: left;

padding-left: 30px;

font-size: 14px;

position: relative;

}

.ui-menu-item .ui-menu-item-disease{

display: block;

float: right;

color: #d7f3ff;

font-size: 12px;

margin-right: 5px;

}

.ui-menu-item .ui-menu-item-detail{

   position: absolute;

   width: 539px;

   height: 423px;

   top:0px;

   left:191px;

   background: #fff;

   box-shadow: 5px 5px 2px rgba(0,0,0,.1);

   background: url(../img/bg-menu.jpg) no-repeat center;

   display: none;

}

.ui-menu-item .ui-menu-item-detail .ui-menu-item-detail-group{

padding:20px 0px 0px 20px;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-caption{

width: 100%;

height: 20px;

line-height: 20px;

font-size: 18px;

color:black;

margin-bottom: 10px;

font-weight: bold;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list{

margin-bottom: 20px;

text-align: left;

}


.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list a{

font-size: 12px;

color:gray;

height: 20px;

line-height: 20px;

margin-right: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:after{

content:"|";

color:gray;

margin-left: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:hover{

color:green;

}

.ui-search{

background: url(../img/ui-search.jpg) no-repeat center;

font-size: 14px;

color:#fff;

position: relative;

}

.ui-search .ui-search-selected{

   position: absolute;

   width: 70px;

   height: 38px;

   line-height: 38px;

   top:0px;

   left:0px;

   padding-left: 14px;

}

.ui-search .ui-search-selected-list{

width: 67px;

position: absolute;

line-height: 24px;

background:#fff;

box-shadow: 3px 3px 5px rgba(0,0,0,.2);

top:36px;

left: 2px;

z-index:2;

display: none;

}

.ui-search .ui-search-selected-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.ui-search .ui-search-selected-list a:hover{

background: #ebeef5;

}

.ui-search .ui-search-input{

width: 100px;

height: 36px;

line-height: 38px;

text-align: center;

position: absolute;

top:1px;

right: 150px;

}

.ui-menu-item {

height: 22px;

line-height: 22px;

padding:8px 5px 9px 6px;

color:#fff;

margin-left: 2px;

}

.ui-menu-item .ui-menu-item-department:before{

content: "";

display: block;

width: 22px;

height: 21px;

position: absolute;

top:1px;

left: 0px;

background: url(../img/icon-menu.jpg) no-repeat -22px 0;

}

.ui-menu-item:hover .ui-menu-item-department:before{

  background-position: 0 0:;

}

.ui-menu-item:nth-chid(2):hover .ui-menu-item-department:before{

  background-position-y:-22px:;

}

.ui-menu-item:nth-chid(3):hover .ui-menu-item-department:before{

  background-position-y:-66px:;

}

.ui-menu-item:hover{

background: #fff;

}

.ui-menu-item:hover .ui-menu-item-department{

color:black;

}

.ui-menu-item:hover .ui-menu-item-disease{

color:gray;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

}


.ui-menu-item .ui-menu-item-department{

display: inline-block;

color: #fff;

float: left;

padding-left: 30px;

font-size: 14px;

position: relative;

}

.ui-menu-item .ui-menu-item-disease{

display: block;

float: right;

color: #d7f3ff;

font-size: 12px;

margin-right: 5px;

}

.ui-menu-item .ui-menu-item-detail{

   position: absolute;

   width: 539px;

   height: 423px;

   top:0px;

   left:191px;

   background: #fff;

   box-shadow: 5px 5px 2px rgba(0,0,0,.1);

   background: url(../img/bg-menu.jpg) no-repeat center;

   display: none;

}

.ui-menu-item .ui-menu-item-detail .ui-menu-item-detail-group{

padding:20px 0px 0px 20px;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-caption{

width: 100%;

height: 20px;

line-height: 20px;

font-size: 18px;

color:black;

margin-bottom: 10px;

font-weight: bold;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list{

margin-bottom: 20px;

text-align: left;

}


.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list a{

font-size: 12px;

color:gray;

height: 20px;

line-height: 20px;

margin-right: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:after{

content:"|";

color:gray;

margin-left: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:hover{

color:green;

}

.ui-search{

background: url(../img/ui-search.jpg) no-repeat center;

font-size: 14px;

color:#fff;

position: relative;

}

.ui-search .ui-search-selected{

   position: absolute;

   width: 70px;

   height: 38px;

   line-height: 38px;

   top:0px;

   left:0px;

   padding-left: 14px;

}

.ui-search .ui-search-selected-list{

width: 67px;

position: absolute;

line-height: 24px;

background:#fff;

box-shadow: 3px 3px 5px rgba(0,0,0,.2);

top:36px;

left: 2px;

z-index:2;

display: none;

}

.ui-search .ui-search-selected-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.ui-search .ui-search-selected-list a:hover{

background: #ebeef5;

}

.ui-search .ui-search-input{

width: 100px;

height: 36px;

line-height: 38px;

text-align: center;

position: absolute;

top:1px;

right: 150px;

}

.ui-menu-item {

height: 22px;

line-height: 22px;

padding:8px 5px 9px 6px;

color:#fff;

margin-left: 2px;

}

.ui-menu-item .ui-menu-item-department:before{

content: "";

display: block;

width: 22px;

height: 21px;

position: absolute;

top:1px;

left: 0px;

background: url(../img/icon-menu.jpg) no-repeat -22px 0;

}

.ui-menu-item:hover .ui-menu-item-department:before{

  background-position: 0 0:;

}

.ui-menu-item:nth-chid(2):hover .ui-menu-item-department:before{

  background-position-y:-22px:;

}

.ui-menu-item:nth-chid(3):hover .ui-menu-item-department:before{

  background-position-y:-66px:;

}

.ui-menu-item:hover{

background: #fff;

}

.ui-menu-item:hover .ui-menu-item-department{

color:black;

}

.ui-menu-item:hover .ui-menu-item-disease{

color:gray;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

}


.ui-menu-item .ui-menu-item-department{

display: inline-block;

color: #fff;

float: left;

padding-left: 30px;

font-size: 14px;

position: relative;

}

.ui-menu-item .ui-menu-item-disease{

display: block;

float: right;

color: #d7f3ff;

font-size: 12px;

margin-right: 5px;

}

.ui-menu-item .ui-menu-item-detail{

   position: absolute;

   width: 539px;

   height: 423px;

   top:0px;

   left:191px;

   background: #fff;

   box-shadow: 5px 5px 2px rgba(0,0,0,.1);

   background: url(../img/bg-menu.jpg) no-repeat center;

   display: none;

}

.ui-menu-item .ui-menu-item-detail .ui-menu-item-detail-group{

padding:20px 0px 0px 20px;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-caption{

width: 100%;

height: 20px;

line-height: 20px;

font-size: 18px;

color:black;

margin-bottom: 10px;

font-weight: bold;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list{

margin-bottom: 20px;

text-align: left;

}


.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list a{

font-size: 12px;

color:gray;

height: 20px;

line-height: 20px;

margin-right: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:after{

content:"|";

color:gray;

margin-left: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:hover{

color:green;

}

.ui-search{

background: url(../img/ui-search.jpg) no-repeat center;

font-size: 14px;

color:#fff;

position: relative;

}

.ui-search .ui-search-selected{

   position: absolute;

   width: 70px;

   height: 38px;

   line-height: 38px;

   top:0px;

   left:0px;

   padding-left: 14px;

}

.ui-search .ui-search-selected-list{

width: 67px;

position: absolute;

line-height: 24px;

background:#fff;

box-shadow: 3px 3px 5px rgba(0,0,0,.2);

top:36px;

left: 2px;

z-index:2;

display: none;

}

.ui-search .ui-search-selected-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.ui-search .ui-search-selected-list a:hover{

background: #ebeef5;

}

.ui-search .ui-search-input{

width: 100px;

height: 36px;

line-height: 38px;

text-align: center;

position: absolute;

top:1px;

right: 150px;

}

.ui-menu-item {

height: 22px;

line-height: 22px;

padding:8px 5px 9px 6px;

color:#fff;

margin-left: 2px;

}

.ui-menu-item .ui-menu-item-department:before{

content: "";

display: block;

width: 22px;

height: 21px;

position: absolute;

top:1px;

left: 0px;

background: url(../img/icon-menu.jpg) no-repeat -22px 0;

}

.ui-menu-item:hover .ui-menu-item-department:before{

  background-position: 0 0:;

}

.ui-menu-item:nth-chid(2):hover .ui-menu-item-department:before{

  background-position-y:-22px:;

}

.ui-menu-item:nth-chid(3):hover .ui-menu-item-department:before{

  background-position-y:-66px:;

}

.ui-menu-item:hover{

background: #fff;

}

.ui-menu-item:hover .ui-menu-item-department{

color:black;

}

.ui-menu-item:hover .ui-menu-item-disease{

color:gray;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

}


.ui-menu-item .ui-menu-item-department{

display: inline-block;

color: #fff;

float: left;

padding-left: 30px;

font-size: 14px;

position: relative;

}

.ui-menu-item .ui-menu-item-disease{

display: block;

float: right;

color: #d7f3ff;

font-size: 12px;

margin-right: 5px;

}

.ui-menu-item .ui-menu-item-detail{

   position: absolute;

   width: 539px;

   height: 423px;

   top:0px;

   left:191px;

   background: #fff;

   box-shadow: 5px 5px 2px rgba(0,0,0,.1);

   background: url(../img/bg-menu.jpg) no-repeat center;

   display: none;

}

.ui-menu-item .ui-menu-item-detail .ui-menu-item-detail-group{

padding:20px 0px 0px 20px;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-caption{

width: 100%;

height: 20px;

line-height: 20px;

font-size: 18px;

color:black;

margin-bottom: 10px;

font-weight: bold;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list{

margin-bottom: 20px;

text-align: left;

}


.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list a{

font-size: 12px;

color:gray;

height: 20px;

line-height: 20px;

margin-right: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:after{

content:"|";

color:gray;

margin-left: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:hover{

color:green;

}

.ui-search{

background: url(../img/ui-search.jpg) no-repeat center;

font-size: 14px;

color:#fff;

position: relative;

}

.ui-search .ui-search-selected{

   position: absolute;

   width: 70px;

   height: 38px;

   line-height: 38px;

   top:0px;

   left:0px;

   padding-left: 14px;

}

.ui-search .ui-search-selected-list{

width: 67px;

position: absolute;

line-height: 24px;

background:#fff;

box-shadow: 3px 3px 5px rgba(0,0,0,.2);

top:36px;

left: 2px;

z-index:2;

display: none;

}

.ui-search .ui-search-selected-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.ui-search .ui-search-selected-list a:hover{

background: #ebeef5;

}

.ui-search .ui-search-input{

width: 100px;

height: 36px;

line-height: 38px;

text-align: center;

position: absolute;

top:1px;

right: 150px;

}

.ui-menu-item {

height: 22px;

line-height: 22px;

padding:8px 5px 9px 6px;

color:#fff;

margin-left: 2px;

}

.ui-menu-item .ui-menu-item-department:before{

content: "";

display: block;

width: 22px;

height: 21px;

position: absolute;

top:1px;

left: 0px;

background: url(../img/icon-menu.jpg) no-repeat -22px 0;

}

.ui-menu-item:hover .ui-menu-item-department:before{

  background-position: 0 0:;

}

.ui-menu-item:nth-chid(2):hover .ui-menu-item-department:before{

  background-position-y:-22px:;

}

.ui-menu-item:nth-chid(3):hover .ui-menu-item-department:before{

  background-position-y:-66px:;

}

.ui-menu-item:hover{

background: #fff;

}

.ui-menu-item:hover .ui-menu-item-department{

color:black;

}

.ui-menu-item:hover .ui-menu-item-disease{

color:gray;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

}


.ui-menu-item .ui-menu-item-department{

display: inline-block;

color: #fff;

float: left;

padding-left: 30px;

font-size: 14px;

position: relative;

}

.ui-menu-item .ui-menu-item-disease{

display: block;

float: right;

color: #d7f3ff;

font-size: 12px;

margin-right: 5px;

}

.ui-menu-item .ui-menu-item-detail{

   position: absolute;

   width: 539px;

   height: 423px;

   top:0px;

   left:191px;

   background: #fff;

   box-shadow: 5px 5px 2px rgba(0,0,0,.1);

   background: url(../img/bg-menu.jpg) no-repeat center;

   display: none;

}

.ui-menu-item .ui-menu-item-detail .ui-menu-item-detail-group{

padding:20px 0px 0px 20px;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-caption{

width: 100%;

height: 20px;

line-height: 20px;

font-size: 18px;

color:black;

margin-bottom: 10px;

font-weight: bold;

}

.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list{

margin-bottom: 20px;

text-align: left;

}


.ui-menu-item-detail .ui-menu-item-detail-group .ui-menu-item-detail-group-list a{

font-size: 12px;

color:gray;

height: 20px;

line-height: 20px;

margin-right: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:after{

content:"|";

color:gray;

margin-left: 10px;

}

.ui-menu-item .ui-menu-item-detail-group-list a:hover{

color:green;

}

*{

padding: 0;

margin: 0;

}

.top{

width: 100%;

height: 30px;

background: #f5f5f5;

}

.wrap{

width: 1000px;

margin:0 auto;

position: relative;

}

.header{

height: 92px;


}

.nav{

height: 36px;

background: #60bff2;

}

.banner{

  width: 802px;

  margin: 0 auto;

  padding: 9px 0 0 198px;

  height: 414px;

  overflow: hidden;

}

.banner_slider{

float: left;

width: 544px;

height: 414px;

background: #8edff3;

}

.banner_search{

float: right;

width: 250px;

height: 255px;

background: #eee;

}

.banner_help{

float: right;

width: 250px;

height: 146px;

background: #ccc;

margin-top: 12px;

}

.content{

padding: 10px 0 38px 0;

overflow: hidden;

}

.content_tab{

float: left;

width: 742px;

height: 490px;

background: #eee;

}

.content_new,

.content_close{

float: right;

width: 248px;

height: 236px;

border: 1px solid #ccc;

}

.content_close{

margin-top: 12px;

}

.footer{

width: 100%;

height: 60px;

padding: 25px 0;

background:#eceef2;

}

*{

padding: 0;

margin: 0;

}

.top{

width: 100%;

height: 30px;

background: #f5f5f5;

}

.wrap{

width: 1000px;

margin:0 auto;

position: relative;

}

.header{

height: 92px;


}

.nav{

height: 36px;

background: #60bff2;

}

.banner{

  width: 802px;

  margin: 0 auto;

  padding: 9px 0 0 198px;

  height: 414px;

  overflow: hidden;

}

.banner_slider{

float: left;

width: 544px;

height: 414px;

background: #8edff3;

}

.banner_search{

float: right;

width: 250px;

height: 255px;

background: #eee;

}

.banner_help{

float: right;

width: 250px;

height: 146px;

background: #ccc;

margin-top: 12px;

}

.content{

padding: 10px 0 38px 0;

overflow: hidden;

}

.content_tab{

float: left;

width: 742px;

height: 490px;

background: #eee;

}

.content_new,

.content_close{

float: right;

width: 248px;

height: 236px;

border: 1px solid #ccc;

}

.content_close{

margin-top: 12px;

}

.footer{

width: 100%;

height: 60px;

padding: 25px 0;

background:#eceef2;

}

p{

padding: 0;

margin:0;

display: inline-block;

}

a{

text-decoration: none;

}

select{

border: none;

outline: none;

}

input{

border: none;

outline: none;

}

/*top内部样式*/

.top{

height: 30px;

line-height: 30px;

font-size: 12px;

color:#b9b9b9;

}

.top .call{

float: left;

   background: url(../img/icon-call.png) no-repeat center left;

   padding-left: 20px;

}

.top .welcome{

float: right;

}

.top a{

color:#1fa4f0;

}

/*header内部样式*/

.header .logo{

width: 402px;

height: 74px;

display: inline-block;

    padding: 10px 0;

}

.header .logo img{

width: 100%;

height: 100%;

}

.header .search{

width: 326px;

height: 38px;

    float: right;

   /* border: 1px solid gray;*/

    margin-top: 25px;

  /*  background: orange;*/

}

.nav .link{

display: inline-block;

height: 36px;

line-height: 36px;

text-align: center;

float: left;

font-size: 16px;

min-width: 80px;

color: #fff;

margin-right: 30px;

}

.nav a:hover{

color:#d7f3ff;

}

.nav .menu{

width: 130px;

padding-right: 30px;

padding-left: 30px;

background: #1fa4f0;

text-align: center;

position: relative;

}

.nav .menu .menu-list{

position: absolute;

background: #1fa4f0;

width: 100%;

height: 423px;

top:36px;

left: 0px;

}

.banner_search,.banner_help{

background: #fafafa;

}

.banner_search .caption,.banner_help .caption {

height: 22px;

padding:15px 0 15px 0;

text-align: center;

}

.banner_search .caption .text,.banner_help .caption .text{

height: 22px;

display: inline-block;

line-height: 22px;

padding-left: 28px;

color: #fec009;

font-style: 16px;

background: url(../img/icon-help.png) no-repeat 0 0;

}

.banner_search .form{

 height: 150px;

 text-align: center;

}

.banner_search .form .link select{

margin-bottom: 12px;

width: 170px;

height: 25px;

line-height: 25px;

border: 1px solid #dcdddd;

   color:#666;


}

.banner_search .submit{

text-align:center;

height: 30px;

}

.banner_search .submit .button{

        width: 107px;

        height: 30px;

line-height: 30px;

background: #fecd09;

border: 1px solid gray;

color:#fff;

border-radius: 3px;

font-size: 14px;

}

.banner_help .caption .text{

background: url(../img/icon-help.png) no-repeat 0 -23px;

color:#00b3ea;

}

.banner_help .line{

display: inline-block;

    width: 86px;

    height: 26px;

    line-height: 26px;

    font-size: 15px;

     color:#00b3ea;

    text-align: center;

  padding: 0 0 8px 26px;

   

}

.content_close,

.content_new{

background: #fff;

border:1px solid #f4f6fa;


}

.content_new .caption,.content_close .caption{

height: 38px;

line-height: 38px;

text-align: left;

padding-left: 21px;

color:#fec009;

background: #f4f6fa;

}

.content_new .caption .more,.content_close .caption .more{

float: right;

margin-right: 24px;

color:#8a8a8a;

}

.content_new .list .link,

.content_close .list .link{

color:#969696;

}

.content_new .list{

padding:15px 20px 13px 35px;

height: 29px;

line-height: 29px;

font-size: 12px;

background: url(../img/list-yellow.jpg) no-repeat 17px 20px;

}

.content_close .caption{

color:#61bdef;

}

.content_close .list{

padding:15px 20px 13px 35px;

height: 29px;

line-height: 29px;

font-size: 12px;

background: url(../img/list-blue.jpg) no-repeat 17px 20px;

}

.content_tab {

background: none;

}

.content_tab .caption{

background: #f4f6fa;

height: 38px;

line-height: 38px;

}

.content_tab .caption .item{

display:inline-block;

width:112px;

text-align: center;

background: #60bff2;

color:#fff;

margin-right: 44px;

}

.content_tab .caption .item1{

color: #60bff2;

}

.content_tab .block{

border:1px solid #f4f6fa;

height: 452px;

}

.content_tab .block .item{

margin: 0 auto;

}

.content_tab .block .item .block_item{

background: #fff;

height: 38px;

line-height: 38px;

padding: 8px;

border-bottom: 1px solid #f4f6fa;

}

.content_tab .block .item .block_caption_item{

display: inline-block;

padding: 0 10px 0 10px;

color:#a6a4a3;

/*margin-right:2px;*/

font-size: 12px;

float: left;

}

.content_tab .block .item .specail{

width: 44px;

background: #60bff2;

text-align: center;

color:#fff;

}

.content_tab .block .block_content{

padding: 16px 12px;

}

.content_tab .block .block_content .block_more{

display: block;

height: 55px;

line-height: 55px;

text-align: center;

color:#6895cc;

font-size: 15px;

}

.content_tab .block .block_content .block_list{

overflow: hidden;

}

.content_tab .block .block_content .block_list_item{

float: left;

width: 216px;

height: 102px;

font-size: 12px;

padding: 0 20px 10px 120px;

position: relative;

}

.content_tab .block .block_content .block_list_item img{

width: 110px;

height: 98px;

position: absolute;

top:0;

left: 0;

}

.content_tab .block .block_content .block_list_item .hospital{

color:#036eb7;

font-size: 14px;

line-height: 21px;

padding-top: 13px;


}

.content_tab .block .block_content .block_list_item .hospital-level{

float: right;

color:#c3c3c3;

    font-size: 12px;

}

.content_tab .block .block_content .block_list_item .phone,

.content_tab .block .block_content .block_list_item .address{

line-height: 20px;

color: #b0b0b0;

}

.content_tab .block .block_content .block_text_list{

padding-top: 13px;

overflow: hidden;

}

.content_tab .block .block_content .block_text_list .item{

display: block;

float: left;

color:#929292;

width: 351px;

height: 27px;

border-bottom: 1px dashed #dcdddd;

font-size: 13px

}

.content_tab .block .block_content .block_text_list .item span{

float: right;

}

.footer{

color:#d2d1cd;

text-align: center;

height: 60px;

line-height: 60px;

font-weight: bold;

}


写回答

1回答

好帮手慕慕子

2020-02-10

同学你好，对于你的问题解答如下：

  1. 代码中语法错误。如下：多写了冒号，建议去掉， child单词拼写不对。

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

  2. 如下所示，图片左右的图标样式不一样，所有在改变背景图片位置时，只需要使用background-position-x修改图片x轴上的位置即可

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

  3. 老师这里带着同学在顺一下实现的思路：

    （1）开始x轴都是相同的也就是说设置background-position-x: -22px，通过修改y轴的值，设置不同的显示图片。

    （2）鼠标移入的时候，都是将背景图片的x轴设置为0即可，那么就可以统一设置代码。

  4. 以同学的代码为例，首先，去掉hover伪类，设置背景图片的初始显示状态。

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

    鼠标移入时，设置伪元素的背景图片的x轴位置就可以了

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

    修改后的效果示例：

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

剩下的都是相同的修改思路。同学自己下去补充即可。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0

0 学习 · 14456 问题

查看课程

相似问题

老师是怎么得出background-position的位置的知道负多少像素

回答 1

关于伪元素插入背景图

回答 2

老师这里的列表背景图片为啥是17px和20px，不应该是负值吗？这个和雪碧图定位有什么不同吗？

回答 2

老师可以讲一下背景图片的定位吗

回答 1

背景图片位置的问题？

回答 1

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