医院简介区的几个图标，位置调不对。什么时候使用插入图片，什么时候以背景图

医院简介区的几个图标，位置调不对。什么时候使用插入图片，什么时候以背景图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>城市医院预约平台</title>
<link rel="stylesheet" type="text/css" href="./css/layout.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 id="top" class="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;
<a href="#">登录</a>
<a href="#">注册</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">帮助中心</a>
</p>
</div>
</div>
 
 
<div id="header" class="header">
<div class="wrap clearfix">
<a class="logo" href="index.html"><img src="./图片素材/logo.png"></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">&nbsp;</a>
 
</div>
</div>
 
</div>
<div id="nav" class="nav">
<div class="wrap">
 
<div class="link menu">首页</div>
<a href="hospital.html" 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-caption">
<div class="caption-left">
<p>
<span>北京协和医院&nbsp;&nbsp;</span>
<span class="second">关注医院</span>
</p>
 
</div>
<div class="caption-right">
<p>
<span>等级 :</span>
<span>三级甲等</span>
</p>
<p>
<span>区域 :</span>
<span>东城区</span>
</p>
<p>
<span>分类 :</span>
<span>中国医科院所属医院</span>
</p>
</div>
</div>
<div class="banner-details">
<div class="left-picture">
<img src="./图片素材/hospital-1.jpg">
</div>
<div class="mid-details">
<div>[东院]北京市东城区帅府园一号[西园]北京市西城区大木仓胡同41号</div>
<div>http：//www.divumch.cn/</div>
<div>东院咨询台：010-69155564；西园咨询台：010-69158010</div>
<div>东院：106,108,110,111,116,684,685到东单路口北；41,104快，814到东单路</div>
<div>口南；1,52,728,802到西单路口西；20,25,37,39，到东单路口东；</div>
<div>103,104,420,803到新东安市场；地铁1、5号线到东单。西院：68到薛才胡同东</div>
<div>口；更多乘车路线详见须知</div>
</div>
<div class="right-address">
<img src="./图片素材/map-1.png">
</div>
</div>
</div>
<div id="content" class="content"></div>
<div id="footer" class="footer">Copyright © 2017慕课网版权所有</div>
<script type="text/javascript" src="js/ui.js"></script>
</body>
</html>
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: 950px;
    height: 330px;
    margin: 0 auto;
    background-color: #f7f7f7;
}
.banner-caption{
    width: 100%;
    height: 79px;
    border-bottom: 1px solid #dcdddd;
}
.banner-details{
    width: 100%;
    height: 250px;
}
 
.footer{
    height: 70px;
    padding: 25px 0;
    background-color: #eceef2;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
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(../图片素材/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: 0px;
    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 .right{
    float: right;
}
.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;
}
 
/*#banner模块内样式*/
.banner-caption{
    position: relative;
}
.caption-left{
    position: absolute;
    top: 40px;
    left: 0;
}
.caption-left .second{
    font-size: 14px;
    color: #f29600;
}
.caption-right{
    position: absolute;
    top: 40px;
    right: 0;
}
.caption-right p{
    margin-left: 14px;
}
.caption-right span{
    font-size: 14px;
}
.caption-right span:nth-child(odd){
    color: #0000ff;
}
.left-picture{
    float: left;
    width: 200px;
    padding-top: 10px;
}
.mid-details{
    float: left;
    width: 450px;
    font-size: 12px;
    line-height: 20px;
    padding: 10px 0px 60px 50px;
}
.mid-de
.mid-details div:nth-child(1){
    background:url(../图片素材/icon-web.png)0 0px no-repeat;
}
.mid-details div:nth-child(2){
    background:url(../图片素材/icon-web.png)0 -21px no-repeat;
}
.mid-details div:nth-child(3){
    background:url(../图片素材/icon-web.png)0 -42px no-repeat;
}
.mid-details div:nth-child(4){
    background:url(../图片素材/icon-web.png)0 -63px no-repeat;
}
.right-address{
    float: right;
    width: 245px;
    padding-top: 10px;
}
.footer{
    line-height: 70px;
    text-align: center;
    font-size: 12px;
    color: #666;
}
哎呦啊狗蛋 2019-05-28
源自：实战：挂号平台首页   5-12 项目作业
0
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
樱桃小胖子 回答被采纳获得+3积分 2019-05-29 10:50:55

同学上传的代码不全，导致运行效果错乱（使用课程源码中的layout.css、base.css也不行），建议上传完整代码（包括layout.css、base.css以及js），以便于快速定位问题并帮你解答

http://img1.sycdn.imooc.com//climg/5cedf33800010b3419190966.jpg

祝学习愉快！

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

医院简介里小图标不对。什么时候时候以图片插入，什么时候时候以背景图插入
3 0 1
关于此处图片相对定位的问题
0 0 3
一个div中加入多个背景图 如何控制每个背景图的位置
0 0 4
背景图片的显示方式
0 1 3
老师为什么我的网页背景图加载不出来？
18 1 3

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

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

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

22 4

2-11检查

78 1

老师，这样对吗

80 1

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

56 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码