老师帮忙看看

首页课程实战体系课手记专栏慕课教程

老师帮忙看看

来源：5-11 编程练习

慕仙9874720

2020-01-11 15:04:58

<!doctype html>

<html>

<head>

<style>

padding:0;

margin:0;

border:0;

}

/*此处填写css样式*/

body{

width: 100%;

position: relative;

}

text-decoration: none;

}

input{

border: none;

outline: none;

}

.top{

width: 100%;

height: 23px;

background-color: #f5f5f5;

padding-top: 7px;

color: #868686;

}

.top .top-phonenumber{

float: left;

width:154px;

height: 17px;

line-height: 17px;

font-size: 12px;

padding-left: 20px;

background: url(http://climg.mukewang.com/58c61b9d0001e02d00170017.png) 0 0 no-repeat;

}

.top .top-welcome{

float: right;

font-size: 12px;

}

.top .top-welcome a{

color: #60bff2;

}

.wrap{

width: 1000px;

margin:0 auto; }

.header{

height: 90px;

}

.header .header-logo{

display: inline-block;

width: 355px;

height: 90px;

}

.header .header-logo img{

width: 400px;

height: 90px;

}

.nav{

width: 100%;

height: 36px;

background-color: #60bff2;

}

.nav a{

display: inline-block;

width: 100px;

line-height: 36px;

color: #fff;

font-size: 16px;

text-align: center;

margin-right: 22px;

}

.nav a:hover{

background-color: #1fa4f0;

}

.nav a:last-child{

float: right;

}

.main{

width: 1002px;

margin: 20px auto 40px;

}

.main .main-header{

position: relative;

}

.main .main-header .main-header-caption{

width: 138px;

height: 30px;

background: url(http://climg.mukewang.com/58c61a4f0001967a01380030.jpg) 0 0 no-repeat;

font-size: 16px;

color: #fff;

text-indent: 22px;

line-height: 30px;

}

.main .main-header .main-header-list{

width: 1000px;

border: 1px solid #dcdddd;

border-top: 2px solid #60bff2;

padding-bottom: 12px;

}

.main .main-header .main-header-list .main-header-list-group{

padding-left: 20px;

width: 872px;

}

.main .main-header .main-header-list .main-header-list-group a{

display: inline-block;

width: 62px;

font-size: 12px;

line-height: 15px;

padding-top: 11px;

margin-right: 78px;

text-align: left;

color: #000;

}

.hide{

display: none;

}

.main .main-content{

margin-top: 16px;

overflow: hidden;

}

.main .main-content .main-content-leftside{

width: 209px;

height: 986px;

border: 1px solid #dcdddd;

float: left;

}

.main .main-content .main-content-leftside .department-list{

padding: 8px;

}

.main .main-content .main-content-leftside .department-list .department-list-item{

font-size: 12px;

line-height: 21px;

margin-bottom: 17px;

height: 21px;

cursor: pointer;

}

.main .main-content .main-content-leftside .department-list .department-list-item:hover{

background-color: #22a6f0;

color: #fff;

}

.main .main-content .main-content-leftside .department-list .department-list-item:hover .sign{

background-position: -22px 0px;

}

.main .main-content .main-content-leftside .department-list .department-list-item .sign{

display: inline-block;

width: 21px;

height: 21px;

background: url(http://climg.mukewang.com/58c61b610001c58300440638.jpg) 0px 0 no-repeat;

margin-right: 8px;

float: left;

}

.main .main-content .main-content-leftside .department-list .department-list-item .arrow{

float: right;

}

.main .main-content .main-content-rightside{

width: 769px;

height: 2966px;

border: 1px solid #dcdddd;

float: right;

}

.main .main-content .main-content-rightside .department-content{

width: 736px;

margin: 19px auto;

}

.main .main-content .main-content-rightside .department-content .department-content-caption{

font-size: 12px;

line-height: 36px;

border-bottom: 1px dashed #dcdddd;

color: #60bff2;

text-indent: 23px;

}

.main .main-content .main-content-rightside .department-content .department-content-item{

width: 709px;

margin-left: 27px;

}

.main .main-content .main-content-rightside .department-content .department-content-item a{

display: inline-block;

color: #000;

font-size: 12px;

width: 62px;

line-height: 12px;

text-align: left;

margin-right: 74px;

margin-top: 13px;

}

.footer{

width: 100%;

height: 70px;

background-color: #f5f5f5;

font-size: 12px;

text-align: center;

line-height: 70px;

color: #868686;

}

.ui-search{

display: inline-block;

width: 326px;

height: 38px;

float: right;

background: url(http://climg.mukewang.com/58c61b7e00012b9303260038.jpg) no-repeat;

margin-top: 26px;

position: relative;

color: #fff;

line-height: 38px;

}

.ui-search .ui-search-select{

display: inline-block;

text-indent: 13px;

cursor: pointer;

width: 69px;

height: 38px;

}

.ui-search .ui-search-input{

display: inline-block;

height: 35px;

position: absolute;

left: 70px;

top: 50%;

margin-top: -17px;

}

.ui-search .ui-search-button{

position: absolute;

width: 41px;

height: 37px;

right: 0;

}

.ui-search .ui-search-list{

position: absolute;

display: none;

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-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.ui-search-list a:hover{

background-color: #868686;

color: #fff;

}

.ui-develope{

position: absolute;

right: 50px;

bottom: 18px;

font-size: 12px;

color: #0000ff;

text-decoration: underline;

cursor: pointer;

}

.ui-backTop{

position: fixed;

right: 0;

bottom: 30px;

width: 40px;

height: 40px;

background: url(http://climg.mukewang.com/58c61bb900013e2c00230023.png) center no-repeat;

background-color: #868686;

padding: 5px;

cursor: pointer;

}

.ui-backTop-text{

color: #fff;

font-size: 18px;

line-height: 20px;

text-align: center;

display: none;

}

.ui-backTop:hover{

background: #868686;

}

.ui-backTop:hover .ui-backTop-text{

display: block;

}

</style>

</head>

<body>

<div>

欢迎来到城市预约挂号统一平台  请      

</div>

</div>

<a href="#1">按医院挂号</a>

<a href="#1">按科室挂号</a>

<a href="#1">按疾病挂号</a>

<a href="#1">社会知名医院</a>

</div>

<a href="#2">肿瘤综合科</a>

</div>

<a href="#2">肿瘤综合科</a>

</div>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

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

<a href="#4">过敏反应科</a>

</div>

</div>

//此处填写jQuery代码

// ui-search 模块

$.fn.UiSearch=function(){

var ui=$(this);

var select=$(".ui-search-select",ui);

var list=$(".ui-search-list",ui);

var item=$(".ui-search-list a",ui);

select

.on('mouseover',function(){

list.show();

return false;

})

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

list.hide();

return false;

});

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

list.hide();

});

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

select.text($(this).text());

})

}

// ui-develope 模块

$.fn.UiDevelope=function(){

var ui=$(this);

var develope=$(".ui-develope",ui);

var listGroup=$(".ui-main-header-list-group",ui);

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

if($(this).text()=="展开全部"){

$(this).text("收起");

listGroup.removeClass('hide');

}else{

$(this).text("展开全部");

listGroup.addClass('hide');

}

});

}

// ui-backTop 模块

$.fn.UiBackTop=function(){

var ui=$(this);

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

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

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

if(top>windowHeight/4){

ui.show();

}else{

ui.hide();

}

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

$(window).scrollTop(0);

})

}

//页面脚本加载

$(function(){

$(".ui-search").UiSearch();

$(".ui-main-header-list").UiDevelope();

$(".ui-backTop").UiBackTop();

})

</script>

</body>

</html>

写回答

1回答

好帮手慕星星

2020-01-11

已采纳

同学你好，实现效果正确，很棒！继续加油，祝学习愉快~

0 学习 · 14456 问题

查看课程

相似问题

写出bug来了老师能帮我看看吗？

回答 1

老师您好我遇到了问题麻烦老师帮忙解答谢谢老师

回答 2

老师帮忙看下

回答 1

老师帮忙看看

回答 1

老师帮忙看下

回答 2

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