老师问什么我的background里url没起作用呢
来源：5-11 编程练习
TechnicalTopSales
2020-02-10 15:44:21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css\index.css">
<link rel="stylesheet" type="text/css" href="css\base.css">
</head>
<body>
<div id="top" class="top">
<div class="wrap">
<p class="call">010-114/1116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台
请
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">帮助中心</a>
</p>
</div>
</div>
<div id="header" class="header">
<div class="wrap">
<a class="logo" href="#"><img src="css\img\logo.png"></a>
<div class="search"></div>
</div>
</div>
<div id="nav" class="nav">
<div class="wrap">
<div class="link menu">全部科室
<div class="menu-list"></div>
</div>
<a href="#" 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="wrap">
<div class="caption">北京协和医院
<a href="#">关注医院</a>
<span class="banner-small-text">
<span style="color: #0000ff;">等级：</span>三级甲等
<span style="color: #0000ff;">区域：</span>东城区
<span style="color: #0000ff;">分类：</span>中国医科院所属医院
</span>
<line>
</div>
<img src="css\img\hospital-1.jpg" alt="北京协和医院" class="banner-hospital1">
<div class="banner-left-text">
<p class="banner-text-line1">[东院]北京市东城区帅府园一号
[西院]北京市西城区大木仓胡同41号
</p>
<p class="banner-text-line2">http://www.pumch.cn/</p>
<p class="banner-text-line3">东院咨询台：010-69155564；西院咨询台：010-69158010</p>
<p class="banner-text-line4">
东院：106，108，110，111，116，684，685到单口路北；41，104快，814到东单路口南；1，52，728，802到单东路口西；20，25，37，39到单东路口东；
103，104，420，803到新东安市场；地铁1，5号线到东单。西院：68到辟才胡同东口；更多乘车路线详见须知
</p>
</div>
<img src="css\img\map-1.png" alt="地图" class="banner-map">
</div>
</div>
<div id="content" class="content">
<div class="wrap">
<div class="content-caption">
<a href="#1" class="content-caption content-caption_focus ">预约挂号</a>
<a href="#1" class="content-caption">医院介绍</a>
<a href="#1" class="content-caption">预约须知</a>
<a href="#1" class="content-caption">停诊信息</a>
<a href="#1" class="content-caption">查询取消</a>
</div>
<div class="content-list"></div>
<div class="content-rules"></div>
</div>
</div>
<div class="footer" id="footer">
</div>
</body>
</html>
--------------------------------------------------------------------------------
p{
margin: 0;
padding: 0;
display:inline-block;
}
/* #top模块样式 */
.top {
line-height:30px ;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background: url(css\img\icon-call.png) no-repeat center left;
}/* 老师，为什么此处用相对路径没有显示并且报错呢？ ↑↑*/
.top .welcome{
float: right;
}
.top a {
color: #2da5e1;
padding-left: 10px;
text-decoration: none;
}
/* header模块样式 */
.header .wrap .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 .wrap .link{
color: #fff;
padding-left: 75px;
text-decoration: none;
position: relative;
top:6px;
display: inline-block;
}
.nav .wrap .right{
float: right;
}
/* banner部分的模块样式 */
.banner .caption{
border-bottom:1px solid #dcdddd ;
font-size: 20px;
float: left;
width: 960px;
height: 35px;
margin-left: -180px;
padding: 5px 0 5px 0;
}
.banner .caption a{
font-size: 13px;
color: #f29600;
text-decoration: none;
}
.banner .caption .banner-small-text{
float: right;
font-size: 13px;
padding-top: 10px;
}
.banner .banner-left-text{
width: 430px;
height: 190px;
color: #868686;
font-size: 12px;
position: relative;
top: -50px;
left: 70px;
}
.banner .banner-hospital1{
width: 200px;
height: 150px;
float: left;
position: relative;
left: -950px;
top: 60px;
}
.banner .banner-map{
width: 252px;
height: 165px;
float: right;
position: relative;
top: -125px;
right: 230px;
}
.content .content-caption{
width: 960px;
height: 20px;
border-bottom: 1px solid #60bff2;
margin-left: 5px;
}
-------------------------------
body{
margin: 0;
padding: 0;
}
.clearfix:after{
display: block;
content: "";
height: 0;
line-height: 0;
clear: both;
}
.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: 802px;
margin: 0 auto;
height: 250px;
padding: 9px 0 0 198px;
background-color: #f7f7f7;
position: relative;
top: 35px;
}
.content{
width: 802px;
margin: 0 auto;
height: 458px;
padding: 9px 0 0 198px;
background-color: #f2fbff;
position: relative;
top: 75px;
}
.footer{
width: 802px;
margin: 0 auto;
height: 70px;
padding: 9px 0 0 198px;
background-color: #f2fbff;
position: relative;
top: 155px;
}
2回答
-
同学你好，可以按照下方排查
1）查看路径是否正确。
2）查看元素是否设置了宽高。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
好帮手慕糖
2020-02-10
同学你好，老师的路径与你的不一致，是直接在img这个文件夹下的，如果同学确认路径正确的话，可以不修改。
不过有一点需要注意，引号虽然说不说必须的，但是在使用背景图片的时候，是需要使用“/”的，是用“\”不能显示。例：
但是若是img标签引入的图片的话，“/”或者“\”都是可以的。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题