这是，这样的效果正确吗

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

这是，这样的效果正确吗

来源：5-11 编程练习

未来it界的一枚程序媛

2020-03-17 18:31:22

<!doctype html>

<html>

<head>

<style>

padding:0;

margin:0;

border:0;

}

/*此处填写css样式*/

a{text-decoration: none;}

input{

border: none;

outline: none;

}

/* 清除浮动*/

.clearfix::after{

content: '';

display: block;

clear: both;

*zoom: 1;

}

/* top */

.wrap{

width: 1000px;

margin: 0 auto;

position: relative;

}

.top{

height: 30px;

background-color: #f5f5f5;

line-height: 30px;

font-size: 13px;

color: #868686;

}

.top .call{

float: left;

padding-left: 20px;

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

}

.top .welcome{

float: right;

}

.top .lo{

margin-left: 27px;

}

.top .re{

margin: 0 76px 0 18px;

}

.top .welcome .item{

color: #2da5e1;

}

/* 头部 */

.header{

height: 90px;

background: #fff;

}

.header-logo{

width: 390px;

height: 64px;

padding: 15px 0 15px 20px;

display: inline-block;

}

.header-logo img{

width: 100%;

height: 100%;

}

.header-search{

width: 327px;

height: 40px;

position: absolute;

top: 28px;

right: 0;

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

}

.header-search-select{

cursor: pointer;

color: #fff;

font-size: 16px;

width: 70px;

height: 40px;

line-height: 40px;

position: absolute;

left: 0;

top: 0;

text-indent: 14px;

}

.header-search-select-list{

display: none;

width: 70px;

line-height: 24px;

background-color: #fff;

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

position: absolute;

left: 0;

top: 40px;

z-index: 2;

}

.header-search-select-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.header-search-input{

width: 208px;

height: 26px;

line-height: 26px;

position: absolute;

top: 5px;

left: 76px;

font-size: 13px;

color: #A5A2A2;

}

.header-search-submit{

display: block;

position: absolute;

top: 1px;

right: 0;

width: 40px;

height: 40px;

}

/* 导航 */

.nav{

height: 36px;

background: #60bff2;

}

.nav .link{

display: inline-block;

color: #fff;

width: 100px;

line-height: 36px;

margin: 0 10px;

text-align: center;

font-size: 16px;

}

.nav .first{

padding-left: 30px;

}

.nav .famous{

position: absolute;

right: 0;

}

.nav a:hover{

color: #d7f3ff;

}

.nav .focus{

background: #1fa4f0;

}

/* content区域 */

.content-hotDepartment-caption{

width: 140px;

height: 30px;

line-height: 30px;

position: relative;

margin-top: 20px;

}

.content-hotDepartment-caption span{

display: block;

width: 56px;

height: 14px;

font-size: 14px;

position: absolute;

left: 20px;

color: #fff;

}

.content-hotDepartment{

width: 1000px;

height: 72px;

background-color: #fff;

margin-bottom: 20px;

border: 1px solid #dcdddd;

}

.content-hotDepartment-item::before{

display: block;

content: '';

width: 100%;

height: 2px;

background-color: #49a6d8;

position: absolute;

top: 30px;

left: 0;

}

.content-hotDepartment-item{

width: 800px;

height: 72px;

float: left;

font-size: 12px;

/* display: none; */

}

.content-hotDepartment-item .hide{

display: none;

}

.content-hotDepartment-item a{

display: inline-block;

padding-left: 20px;

line-height: 36px;

width: 110px;

color: #555;

}

.all{

position: absolute;

right: 50px;

bottom: 20px;

color: #0000ff;

font-size: 12px;

}

.content-department-list{

width: 210px;

height: 885px;

border: 1px solid #dcdddd;

margin-right:20px;

float: left;

}

.content-department-list .list-wrap{

width: 200px;

margin: 8px;

}

.content-department-list .item span{

float: right;

padding-right: 12px;

}

/* .content-department-list .item::before{

content: '';

display: block;

width: 22px;

height: 22px;

position: absolute;

left: 0;

top: 5px;

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

} */

.content-department-list .item .item-left-icon{

position: absolute;

left: 0;

top: 5px;

width: 22px;

height: 22px;

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

}

/* .content-department-list a:nth-child(2)::before{

background-position: 0 -22px;

}

.content-department-list a:nth-child(3)::before{

background-position: 0 -44px;

}

.content-department-list a:nth-child(4)::before{

background-position: 0 -66px;

}

.content-department-list a:nth-child(5)::before{

background-position: 0 -88px;

}

.content-department-list a:nth-child(6)::before{

background-position: 0 -110px;

}

.content-department-list a:nth-child(7)::before{

background-position: 0 -132px;

}

.content-department-list a:nth-child(8)::before{

background-position: 0 -154px;

}

.content-department-list a:nth-child(9)::before{

background-position: 0 -176px;

}

.content-department-list a:nth-child(10)::before{

background-position: 0 -198px;

}

.content-department-list a:nth-child(11)::before{

background-position: 0 -220px;

}

.content-department-list a:nth-child(12)::before{

background-position: 0 -242px;

}

.content-department-list a:nth-child(13)::before{

background-position: 0 -264px;

}

.content-department-list a:nth-child(14)::before{

background-position: 0 -288px;

}

.content-department-list a:nth-child(15)::before{

background-position: 0 -310px;

}

.content-department-list a:nth-child(16)::before{

background-position: 0 -332px;

}

.content-department-list a:nth-child(17)::before{

background-position: 0 -354px;

}

.content-department-list a:nth-child(18)::before{

background-position: 0 -376px;

}

.content-department-list a:nth-child(19)::before{

background-position: 0 -398px;

}

.content-department-list a:nth-child(20)::before{

background-position: 0 -420px;

}

.content-department-list a:nth-child(21)::before{

background-position: 0 -442px;

}

.content-department-list a:nth-child(22)::before{

background-position: 0 -464px;

}

.content-department-list a:nth-child(23)::before{

background-position: 0 -486px;

}

.content-department-list a:nth-child(24)::before{

background-position: 0 -508px;

}

.content-department-list a:nth-child(25)::before{

background-position: 0 -530px;

}

.content-department-list a:nth-child(26)::before{

background-position: 0 -552px;

}

.content-department-list a:nth-child(27)::before{

background-position: 0 -574px;

}

.content-department-list a:nth-child(28)::before{

background-position: 0 -596px;

}

.content-department-list a:nth-child(29)::before{

background-position: 0 -618px;

} */

.content-department-list .item{

line-height: 30px;

display: block;

font-size: 12px;

color: #555;

padding-left: 24px;

position: relative;

}

.content-hotDepartment-list-detail{

width: 765px;

height: 1000px;

border: 1px solid #dcdddd;

float: right;

}

.list-detail-caption{

width: 735px;

height: 56px;

line-height: 56px;

margin: 0 15px;

border-bottom: 1px dashed #dcdddd;

color: #00b3ea;

font-size: 12px;

}

.list-detail-content{

width: 680px;

line-height: 25px;

margin: 0 auto ;

margin-top: 10px;

font-size: 12px;

}

.list-detail-content a{

display: inline-block;

width: 100px;

color: #555;

}

.footer{

background-color: #eceef2;

height: 70px;

}

.footer .wrap{

width: 1000px;

line-height: 70px;

text-align: center;

color: #acacac;

margin-top: 40px;

font-size: 12px;

}

</style>

</head>

<body>

<div>

<p class="welcome">欢迎来到城市预约挂号同意平台 请 

</p>

</div>

</div>

</div>

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

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

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

<a href="#1" class="link famous">社区知名医院</a>

</div>

</nav>

</div>

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

<a href="#0">心理咨询科</a>

</div>

</div>

<a href="#1" class="item "><i class="item-left-icon"></i>耳鼻咽喉头颈科<span>></span></a>

<a href="#1" class="item "><i class="item-left-icon"></i>皮肤性病科<span>></span></a>

<a href="#1" class="item "><i class="item-left-icon"></i>精神心理科<span>></span></a>

<a href="#1" class="item "><i class="item-left-icon"></i>中西医结合科<span>></span></a>

<a href="#1" class="item "><i class="item-left-icon"></i>介入医学科<span>></span></a>

<a href="#1" class="item "><i class="item-left-icon"></i>康复医学科<span>></span></a>

<a href="#1" class="item "><i class="item-left-icon"></i>麻醉医学科<span>></span></a>

<a href="#1" class="item "><i class="item-left-icon"></i>医学影像科<span>></span></a>

</div>

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

</div>

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

</div>

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

</div>

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

</div>

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

</div>

</footer>

</div>

//此处填写jQuery代码

// header-search

$.fn.UiSearch=function(){

var ui=$(this);

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

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

return false;//阻止事件冒泡

});

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

$('.header-search-select').text($(this).text());

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

return false;

})

// 点击除下拉列表外的地方隐藏下拉列表

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

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

})

}

//展开全部

$.fn.ALl=function(){

isBlock=true;

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

if (isBlock) {

$('.content-hotDepartment-item .hide').css({'display':'inline-block'});

$('.content-hotDepartment').css({'height':'120px'});

$(this).text('收起更多');

isBlock=false;

}else{

$('.content-hotDepartment-item .hide').css({'display':'none'});

$('.content-hotDepartment').css({'height':'72px'});

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

isBlock=true;

}

})

}

// 调用

$(function(){

$('.header-search').UiSearch();

$('.all').ALl();

});

// 列表左侧小图标

var icons=$('.list-wrap .item .item-left-icon')

for(var i=0;i<icons.length;i++){

icons.eq(i).css({'background-position-y':i*22*-1+"px"});

}

</script>

</body>

</html>

写回答

1回答

好帮手慕星星

2020-03-17

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

0 学习 · 14456 问题

查看课程

相似问题

老师不能这样写吗？

回答 2

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

回答 2

页面效果正常，但审查元素位置不对，这是为什么？

回答 2

这里的return false和stoppropagation是一样的效果吗？

回答 1

老师讲的和这样写有什么区别

回答 1

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