谷歌浏览器按f12调出开发者模式，会出现向上箭头，正常浏览时没有出现，代码已全部贴出。

index.html

----------

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>index</title>

<link rel="stylesheet" href="css/layout.css">

<link rel="stylesheet" href="css/base.css">

<link rel="stylesheet" href="css/ui.css">

</head>

<body>

<div id="top" class="top">

<div class="wrap">

<p class="call">010-114/116114电话预约</p>

<p class="welcome">欢迎来到城市医院预约挂号统一平台 请 

<a href="">登录</a>

<a href="">注册</a>    

<a href="">帮助中心</a></p>

</div>

</div>

<div id="header" class="header">

<div class="wrap">

<a href="#" class="logo"><img src="./img/logo.png" alt=""></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"> </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>

</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>

</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 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>

</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>

</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 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>

</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>

</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 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-2"></a>

<a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-3"></a>

</div>

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

<a href="#l" class="item left"> </a>

<a href="#r" class="item right"> </a>

</div>

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

<a href="#0" class="item item_focus"> </a>

<a href="#1" class="item"> </a>

<a href="#2" class="item"> </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" id="area" data-search="getDistinctArea" data-where="">

<option>医院地区</option>

</select>

</div>

<div class="line">

<select name="level" id="level" data-search="getLeveByArea" data-where="">

<option>医院等级1</option>

<option>医院等级2</option>

</select>

</div>

<div class="line">

<select name="name" id="name" data-search="getNameByAreaAndLevel" data-where="">

<option>医院名称2</option>

</select>

</div>

<div class="line">

<select name="dapartment" id="dapartment" 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">医院</a>

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

</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>

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

</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="" 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="" 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 © 2019 imooc版权所有

</div>

<script src="js/jquery-1.7.1.js"></script>

<script src="js/ui.js"></script>

<script src="js/data.js"></script>

</body>

</html>

-------------

ui.js

--------------

//ui-search定义

$.fn.UISearch=function(){

var ui=$(this);

$('.ui-search-selected',ui).on('click',function(){

$('.ui-search-select-list').show();

return false;

});

$('.ui-search-select-list a',ui).on('click',function(){

$('.ui-search-selected').text($(this).text());

$('.ui-search-select-list').hide();

return false;

});

$('body').on('click',function(){

$('.ui-search-select-list').hide();

})

}

//ui-tab

/**

* [UiTab description]

* @param {[type]} header [tab选项卡切换部分classname]

* @param {[type]} content [tab选项卡内容区域部分classname]

* @param {[type]} focus_prefix [tab选项卡高亮样式前缀，可选]

*/

$.fn.UiTab=function(header,content,focus_prefix){

var ui=$(this);

var tabs=$(header,ui);

var cons=$(content,ui);

var focus_prefix=focus_prefix||'';

tabs.on('click',function(){

var index=$(this).index();

tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');

cons.hide().eq(index).show();

return false;

})

}

//ui-backTop

$.fn.UiBackTop=function(){

var ui=$(this);

var el=$('<a class="ui-backTop" href="#0"></a>');

ui.append(el);

var windowHeight=$(window).height();

$(window).on('scroll',function(){

var top = $("body").scrollTop() || $(document).scrollTop();

if(top>windowHeight){

el.show();

}else{

el.hide();

}

});

el.on('click',function(){

$(window).scrollTop(0);

});

}

//ui-slider

//1、左右箭头控制翻页

//2、翻页的时候，进度点联动

//3、翻到第三页，下一页回到首页；反之同理

//4、进度点控制翻页

//5、自动翻页

//6、滚动过程中，屏蔽其他操作

//7、高级无缝滚动

$.fn.UiSlider=function(){

var ui=$(this);

var wrap=$('.ui-slider-wrap');

var btn_prev=$('.ui-slider-arrow .left',ui);

var btn_next=$('.ui-slider-arrow .right',ui);

var items=$('.ui-slider-wrap .item',ui);

var tips=$('.ui-slider-process .item',ui);

//预定义

var current=0;

var size=items.size();

var width=items.eq(0).width();

var enableAuto=true;

//设置自动滚动感应（鼠标在wrap中，不要自动滚动）

ui.on('mouseover',function(){

enableAuto=false;

}).on('mouseout',function(){

enableAuto=true;

});

//具体操作

wrap.on('move_prev',function(){

if(current<=0){

current=size;

}

current=current-1;

wrap.triggerHandler('move_to',current);

}).on('move_next',function(){

if(current>=size-1){

current=-1;

}

current=current+1;

wrap.triggerHandler('move_to',current);

}).on('move_to',function(evt,index){

wrap.css('left',index*width*-1);

tips.removeClass('item_focus').eq(index).addClass('item_focus');

}).on('auto_move',function(){

setInterval(function(){

enableAuto && wrap.triggerHandler('move_next');

},1000);

}).triggerHandler('auto_move');

//事件

btn_prev.on('click',function(){

wrap.triggerHandler('move_prev');

});

btn_next.on('click',function(){

wrap.triggerHandler('move_next');

});

tips.on('click',function(){

var index=$(this).index();

wrap.triggerHandler('move_to',index);

});

}

//ui-cascading多级联动

$.fn.UiCascading=function(){

var ui=$(this);

var selects=$('select',ui);

selects.on('change',function(){

var val=$(this).val();

var index=selects.index(this);

//触发下一个select的更新

var where=$(this).attr('data-where');

where=where?where.split(','):[];

where.push($(this).val());

selects.eq(index+1)

.attr('data-where',where.join(','))

.triggerHandler('reloadOptions');

//触发下一个之后的select的初始化（清除不应该的数据项）

ui.find('select:gt('+(index+1)+')').each(function(){

$(this)

.attr('data-where','')

.triggerHandler('reloadOptions');

})

}).on('reloadOptions',function(){

var method=$(this).attr('data-search');

var args=$(this).attr('data-where').split(',');

var data=AjaxRemoteGetData[method].apply(this,args);

var select=$(this);

select.find('option').remove();

$.each(data,function(i,item){

var el=$('<option value="'+item+'">'+item+'</option>');

select.append(el);

});

});

selects.eq(0).triggerHandler('reloadOptions');

}

//页面的脚本逻辑

$(function(){

$('.ui-search').UISearch();

$('.content-tab').UiTab('.caption>.item','.block>.item');

$('.content-tab .block .item').UiTab('.block-caption>a','.block-content>.block-wrap','block-caption-');

$('body').UiBackTop();

$('.ui-slider').UiSlider();

$('.ui-cascading').UiCascading();

})

-----------------

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 .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:0;

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;

}

.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:#f4f6f6;

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;

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{

height: 70px;

line-height: 70px;

text-align: center;

font-size: 12px;

color: #666;

}

--------------

layout.css

---------------

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:1000px;

margin:0 auto;

height:414px;

padding:9px 0 0 198px;

box-sizing:border-box;

}

.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:#eee;

margin-top:12px;

}

.content{

width:1000px;

margin:0 auto;

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:132px;

padding:25px 0;

background-color:#eceef2;

}

-----------------

ui.css

-----------------

/*搜索*/

.ui-search{

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

font-size:14px;

color:#fff;

}

.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:71px;

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:13px;

}

.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: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:12px;

padding-bottom:5px;

}

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

content:'|';

color:#ddd;

padding-left:12px;

}

/*回到顶部*/

.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;

margin-top:-20px;

top:50%;

}

.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;

}

陈莺莺呀 2019-11-13

源自：实战：挂号平台首页 5-10 首页.UI组件-UiCascading（下）

5

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2019-11-14 14:46:08

同学你好，已经在你的另一问题中进行了回复，可以查看问题：

https://class.imooc.com/course/qadetail/169671

祝学习愉快！

好帮手慕糖 2019-11-13 19:00:58

同学你好，关于你的问题：

滚动条，还需要往下拉，往下拉就可以看到了。

这是因为，开始是隐藏的。然后如下，在js中设置了滚动高度大于页面高度的时候才显示，否则就是隐藏的。

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

提问者陈莺莺呀 #1

不是的，一模一样的代码，把页面拉到底部，我的谷歌、火狐、360浏览器测试，都是不显示向上箭头的，老师看我最新提问的截图。

2019-11-14 10:59:57

相似问题

html文件无法用谷歌浏览器打开

用谷歌浏览器测试有黑线，是什么原因？

跟着这节课做完之后，之前导航鼠标悬浮显示子导航的功能，还有回到顶部的功能失效了。

请问怎么解决chorme浏览器，当点击进度条是出现瞬间消失的兼容性问题

请问为什么二维码的图片（code.png）只能在谷歌浏览器中显示出来，换别的浏览器都只显示一块白呢？

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

2.组件化网页开发

参与学习人
提交作业 1121 份
解答问题 14456 个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

本课精华内容

问答作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载