                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /企业网站综合布局实战

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

web前端端

2015-12-26

源自：企业网站综合布局实战 3-14

关注问题我要回答

1782

操作

收起

6 回答

郭GUO0
2016-02-16

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

0 回复有任何疑惑可以回复我~

收起回答

web前端端提问者
2016-02-15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>3.10新闻中心制作评测题</title>

/*在此定义相关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://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");

background-position:0 16px;

text-align:center;

float:left;

}

.top em{

background:url(" http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");

background-position:16px 0;

}

.a:link,.a:visited{

underline:none;

color:#000;

}

.a:hover,.a:active{

color:#F00;

}

</style>

</head>

<body>

<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

</li>

<li>06

<a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a>

</li>

</ul>

</div>

</body>

0 回复有任何疑惑可以回复我~

收起回答

qq_李秀琴_0
2016-01-29

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

0 回复有任何疑惑可以回复我~

收起回答

慕设计7942914
2016-01-22

display:blcok;写错啦

background-position的值最好用百分比

0 回复有任何疑惑可以回复我~

收起回答

web前端端提问者
2015-12-29

你看这里的代码

<!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://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");
    background-position:0 16px;
    text-align:center;
    float:left;
}
.top_em{
         background:url(" http://img1.sycdn.imooc.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 回复有任何疑惑可以回复我~

收起回答