医院简介区的几个图标，位置调不对。什么时候使用插入图片，什么时候以背景图
来源：5-12 项目作业
哎呦啊狗蛋
2019-05-28 20:22:06
<!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">欢迎来到城市医院预约挂号统一平台 请
<a href="#">登录</a>
<a href="#">注册</a>
<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"> </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>北京协和医院 </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;
}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;
}写回答
1回答
-
同学上传的代码不全，导致运行效果错乱（使用课程源码中的layout.css、base.css也不行），建议上传完整代码（包括layout.css、base.css以及js），以便于快速定位问题并帮你解答
祝学习愉快！
0
相似问题
医院简介这一块的雪碧图要怎么实现?
回答 2
怎么获取对应的图片
回答 3