医院简介里小图标不对。什么时候时候以图片插入，什么时候时候以背景图插入
来源：5-12 项目作业
哎呦啊狗蛋
2019-05-29 11:13:13
<!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;
margin: 10px 0px 60px 50px;
}
.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;
}/* 搜索 */
.ui-search{
background: url(../图片素材/ui-search.jpg) center no-repeat;
font-size: 14px;
color: #fff;
position: relative;
}
.ui-search-selected{
width: 70px;
height: 38px;
line-height: 38px;
position: absolute;
left: 0;
top: 0;
text-indent: 14px;
}
.ui-search-select-list{
display: none;
position: absolute;
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-select-list a{
display: block;
color: #A5a2a2;
text-align: center;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width: 208px;
height: 26px;
position: absolute;
top: 5px;
left: 73px;
line-height: 26px;
font-size: 13px;
color: #A5A2A2;
}
.ui-search-submit{
display: block;
position: absolute;
right: 0;
top: 1px;
width: 40px;
height: 36px;
}// ui-search 定义
$.fn.UiSearh = function(){
var ui = $(this);
$('.ui-search-selected',ui).on('click',function(){
$('.ui-search-select-list').show();
return false;
});
$('.ui-search-select-list a',ui).on('click',function(){
$('.ui-search-selected').text( $(this).text() );
$('.ui-search-select-list').hide();
return false;
});
$('body').on('click',function(){
$('.ui-search-select-list').hide();
})
}
// 页面的脚本逻辑
$(function () {
$('.ui-search').UiSearh();
});写回答
1回答
-
你好，同学的意思是显示的位置不对是吗？
这是因为图片作为了背景图片，是整个div的背景，而文字在div中，所以文字会显示在背景上面，可以设置文本缩进解决这个问题，参考：
关于img和背景图片：
1、如果是固定的图片一般使用背景图片较多，img适用于动态的图片，也是随时更换的时候，可以通过src属性进行更换，比较方便。
2、背景图片占据的是设置容器的空间，如果还有文字的话，文字会覆盖在背景上；而img会占据自己的位置。
使用img或者背景图片都不是固定的，可以视情况而定。
祝学习愉快！
0
相似问题
为什么老师写css的时候那么快？
回答 2
关于伪元素插入背景图
回答 2