为什么我这里只有显示出一个灰色的图片，蓝色的图片没有显示？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么我这里只有显示出一个灰色的图片，蓝色的图片没有显示？

来源：3-14 编程练习

web前端端

2015-12-26 09:29

为什么我这里只有显示出一个灰色的图片，蓝色的图片没有显示？

写回答关注

5回答

郭GUO0

2016-02-16 14:31:05

.top_em 什么鬼？改成 .top em 就好了

0 0
web前端端

2016-02-15 22:35:59

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.10新闻中心制作评测题</title>
<style type="text/css">

/*在此定义相关CSS样式*/
.toplist{
 width:300px;
 height:180px;
 border:1px solid #E8E8E8;
 margin:0 auto
 }
ul{
 list-style-type:none;
 padding:5px;
 font-size:13px;

}
em{
 width:20px;
 height:16px;
 color:#333;
 display:blcok;
 background:url("http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg");
 background-position:0 16px;
 text-align:center;
 float:left;
}
.top em{
 background:url(" http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg");
 background-position:16px 0;
 }
.a:link,.a:visited{
 underline:none;
 color:#000;
 }
.a:hover,.a:active{
 color:#F00;
 }

</style>
</head>

<body>
<div class="topList">
<ul>
<li class="top">01
<a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a>
</li>
<li class="top">02
<a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a>
</li>
<li class="top">03
<a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a>
</li>
<li>04
<a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a>
</li>
<li>05
<a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a>
</li>
<li>06
<a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a>
</li>
</ul>
</div>
</body>

0 0
qq_李秀琴_0

2016-01-29 18:59:15

你把.top em写成.top_em了，改过来你试试

0 0
慕设计7942914

2016-01-22 22:01:41

display:blcok;写错啦
background-position的值最好用百分比

0 0

web前端端: 2015-12-29 16:40:23

你看这里的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.10新闻中心制作评测题</title>
<style type="text/css">

/*在此定义相关CSS样式*/
.toplist{
         width:300px;
         height:180px;
         border:1px solid #E8E8E8;
         margin:0 auto
        }
ul{
    list-style-type:none;
    padding:5px;
    font-size:13px;
   
}
em{
    width:20px;
    height:16px;
    color:#333;
    display:blcok;
    background:url("http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg");
    background-position:0 16px;
    text-align:center;
    float:left;
}
.top_em{
         background:url(" http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg");
         background-position:16px 0;
       }
.a:link,.a:visited{
                    underline:none;
                    color:#000;
                }
.a:hover,.a:active{
                    color:#F00;
                    }

</style>
</head>

<body>
<div class="topList">
<ul>
<li class="top"><em>01</em>
<p><a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a></p>
</li>
<li class="top"><em>02</em>
<p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>
</li>
<li class="top"><em>03</em>
<p><a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a></p>
</li>
<li><em>04</em>
<p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>
</li>
<li><em>05</em>
<p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a></p>
</li>
<li><em>06</em>
<p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>
</li>
</ul>
</div>
</body>

0 0

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157043 学习 · 1984 问题

查看课程

相似问题

为什么只显示em背景只显示蓝色

回答 2

为什么我的颜色显示不对？还有上一节图片轮播一直没显示，我是按照视频来敲得啊

回答 3

为啥我的loading图片不显示

回答 6

图片显示不出来

回答 5

为什么我的放大镜图片不显示？？？？

回答 1

打开慕课网App查看更多内容