关于列表小图标
来源：5-11 编程练习
小姜同学666
2020-02-08 15:49:31
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
*{
padding:0;
margin:0;
border:0;
}
p{
padding: 0;
margin: 0;
}
/*此处填写css样式*/
/* 顶部 */
.login{
width: 100%;
height: 30px;
background-color: #f5f5f5;
}
.login-wrap{
width: 1200px;
height: 30px;
margin: 0 auto;
}
.login-left{
float: left;
font-size: 13px;
color: #555;
line-height: 30px;
padding-left: 20px;
background: url('http://climg.mukewang.com/58c61b9d0001e02d00170017.png') no-repeat center left;
}
.login-right{
float: right;
font-size: 13px;
color: #555;
line-height: 30px;
}
.login-right a{
text-decoration: none;
color: blue;
margin-left: 10px;
}
.login-right .help{
margin-left: 20px;
}
/* 头部 */
header{
width: 1200px;
height: 150px;
margin: 0 auto;
position: relative;
}
.header-logo{
width: 500px;
height: 100px;
background: url('http://climg.mukewang.com/58c61b2f0001f5c008400172.png') no-repeat;
background-size: cover;
position: absolute;
top: 50%;
margin-top: -50px;
}
.header-reserch{
width: 326px;
height: 38px;
background: url('http://climg.mukewang.com/58c61b7e00012b9303260038.jpg') no-repeat;
background-size: cover;
position: absolute;
top: 50%;
margin-top: -19px;
right: 0;
color: #aaa;
font-size: 13px;
text-indent: 10px;
line-height: 38px;
}
.header-reserch a{
display: inline-block;
text-decoration: none;
color: #fff;
font-size: 15px;
line-height: 38px;
text-indent: 5px;
}
.header-reserch input{
margin-left: 22px;
height: 30px;
outline: none;
font-size: 13px;
}
/* 导航栏 */
nav{
width: 100%;
height: 50px;
background-color: lightblue;
}
nav .wrap{
width: 1200px;
height: 50px;
margin: 0 auto;
}
nav a{
display: inline-block;
margin-left: 50px;
font-size: 18px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
nav a:hover{
background-color: blue;
}
nav .right{
float: right;
}
/* 内容 */
.content{
width: 1200px;
height: 2000px;
margin: 0 auto;
}
.content .hot{
width: 138px;
height: 30px;
line-height: 30px;
font-size: 18px;
background: url('http://climg.mukewang.com/58c61a4f0001967a01380030.jpg') no-repeat;
color: #fff;
text-indent: 20px;
margin-top: 30px;
}
.content .hot-content{
width: 100%;
height: 100px;
border: 1px solid #aaa;
border-top: 2px solid blue;
margin-bottom: 30px;
position: relative;
}
.content .hot-content .wrap{
width: 950px;
height: 100%;
}
.content .hot-content a{
width: 150px;
height: 50px;
display: inline-block;
font-size: 13px;
text-indent: 20px;
line-height: 50px;
text-decoration: none;
color: #555;
}
.content .hot-content .whole{
position: absolute;
text-decoration: underline;
color: blue;
bottom: 0;
right: 0;
}
.content .menu-list{
width: 200px;
height: 1450px;
border: 1px solid #aaa;
float: left;
}
.content .menu-list div{
width: 160px;
height: 50px;
font-size: 14px;
color: #555;
line-height: 50px;
padding-left: 30px;
position: relative;
}
.content .menu-list p{
display: inline-block;
width: 22px;
height: 22px;
background: url('http://climg.mukewang.com/58c61b610001c58300440638.jpg') no-repeat;
background-position: 0 0;
position: absolute;
top: 50%;
margin-top: -11px;
left: 5px;
}
.content .menu-list span{
font-size: 20px;
color: #aaa;
float: right;
}
.content .menu-content{
width: 960px;
border: 1px solid #aaa;
float: right;
}
.content .menu-content div{
width: 100%;
}
.content .menu-content p{
width: 940px;
height: 40px;
font-size: 13px;
color: blue;
margin: 20px auto 10px auto;
border-bottom: 1px dashed #aaa;
line-height: 40px;
text-indent: 20px;
}
.content .menu-content a{
width: 180px;
height: 30px;
display: inline-block;
font-size: 13px;
text-indent: 35px;
line-height: 30px;
text-decoration: none;
color: #555;
}
/* 尾部 */
footer{
width: 100%;
height: 100px;
background-color: #ccc;
position: relative;
bottom: -3000px;
left: 0;
text-align: center;
line-height: 100px;
font-size: 13px;
}
</style>
</head>
<body>
<!--此处填写HTML代码-->
<div class="login">
<div class="login-wrap">
<p class="login-left">010-114/116114电话预约</p>
<p class="login-right">欢迎来到城市预约挂号统一平台 请
<a href="">登录</a>
<a href="">注册</a>
<a href="" class="help">帮助中心</a>
</p>
</div>
</div>
<header>
<div class="header-logo"></div>
<div class="header-reserch">
<a href="">医院</a>
<input type="text" placeholder="请输入搜索内容">
</div>
</header>
<nav>
<div class="wrap">
<a href="">首页</a>
<a href="">按医院挂号</a>
<a href="">按科室挂号</a>
<a href="">按疾病挂号</a>
<a href="">最新公告</a>
<a href="" class="right">社会知名医院</a>
</div>
</nav>
<div class="content">
<div class="hot">热门科室</div>
<div class="hot-content">
<div class="wrap">
<a href="">神经外科</a>
<a href="">妇科</a>
<a href="">产科</a>
<a href="">儿科</a>
<a href="">骨科</a>
<a href="">眼科</a>
<a href="">耳鼻喉</a>
<a href="">肿瘤外科</a>
<a href="">肿瘤综合科</a>
<a href="">皮肤美容</a>
<a href="">心理咨询科</a>
<a href="">中医科</a>
</div>
<a href="" class="whole">展开全部</a>
</div>
<div class="menu-list">
<div><p></p>内科<span>></span></div>
<div><p></p>外科<span>></span></div>
<div><p></p>妇产科<span>></span></div>
<div><p></p>生殖中心<span>></span></div>
<div><p></p>儿科<span>></span></div>
<div><p></p>骨外科<span>></span></div>
<div><p></p>眼科<span>></span></div>
<div><p></p>口腔科<span>></span></div>
<div><p></p>耳鼻咽喉头颈科<span>></span></div>
<div><p></p>肿瘤科<span>></span></div>
<div><p></p>皮肤性病科<span>></span></div>
<div><p></p>男性学科<span>></span></div>
<div><p></p>皮肤美容<span>></span></div>
<div><p></p>烧伤科<span>></span></div>
<div><p></p>精神心理科<span>></span></div>
<div><p></p>中医科<span>></span></div>
<div><p></p>中西医结合科<span>></span></div>
<div><p></p>传染病科<span>></span></div>
<div><p></p>结核病科<span>></span></div>
<div><p></p>介入医学科<span>></span></div>
<div><p></p>康复医学科<span>></span></div>
<div><p></p>运动医学科<span>></span></div>
<div><p></p>麻醉医学科<span>></span></div>
<div><p></p>职业病科<span>></span></div>
<div><p></p>地方病科<span>></span></div>
<div><p></p>营养科<span>></span></div>
<div><p></p>医学影像学<span>></span></div>
<div><p></p>病理科<span>></span></div>
<div><p></p>其他科室<span>></span></div>
</div>
<div class="menu-content">
<div><p>内科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>外科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>妇产科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>生殖中心</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>儿科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>骨外科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>眼科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>口腔科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>耳鼻咽喉头颈科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>肿瘤科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>皮肤性病科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>男性学科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>皮肤美容</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>烧伤科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>精神心理科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>中医科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>中西医结合科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>传染病科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>结核病科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>介入医学科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>康复医学科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>运动医学科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>麻醉医学科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>职业病科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>地方病科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>营养科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>医学影像学</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>病理科</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
<div><p>其他科室</p>
<a>心血管内科</a><a>神经内科</a><a>消化内科</a><a>内分泌科</a>
<a>免疫科</a><a>呼吸科</a><a>肾病内科</a><a>血液科</a><a>感染内科</a>
<a>过敏反应科</a><a>老年病科</a>
</div>
</div>
</div>
<footer>
Copyright © 2017慕课网版权所有
</footer>
<script>
//此处填写jQuery代码
// var pNum = $('.menu-list div p').length;
// console.log(pNum);
// for(var i=0;i<pNum;i++){
// console.log($('.menu-list div').text(i));
// }
$('.menu-list div p').each(function(){
console.log($(this).index);
$(this).css({'background-position' : '0 ' + -20*($(this).index) + 'px'});
})
</script>
</body>
</html>
老师 这些图标可以放在JQ中写么 写在CSS中太多了
1回答
-
好帮手慕粉
2020-02-08
同学你好，放在jq中也是一样的道理，还要分别获取元素，再为其设置背景图片的位置，建议同学还是通过css样式实现呢。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题