Question

我正在使用HTML5 doc-type。我创建了一个span标记，并将文本颜色设置为红色，但在运行页面时没有应用任何内容。但奇迹是它在jsfiddle http://jsfiddle.net/r9bP8/2/

中工作

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

body{margin:0; padding:0; }
.wrapper{width:1024px; height:768px; position:relative; margin:0 auto; background:url(../images/.jpg) repeat top left}
header{
    display:block; padding:0 125px;
    background-color: #007DC4; text-align:center;
    overflow:auto
}
header a:first-child{float:left; padding:15px 0}
header a:last-child{float:right; padding:15px 0}
.logo{ padding-top:8px ; display:inline-block }

.container{width:801px; height:700px; background-color:#FFF; margin:0 auto;
    -webkit-box-shadow: 2px 2px  #e1e1e1,  -2px 0 2px #e1e1e1;   
    -moz-box-shadow: 2px 0 2px #e1e1e1,  -2px 0 2px #e1e1e1;   
    box-shadow: 2px 0 2px #e1e1e1,  -2px 0 2px #e1e1e1; 
}
.home_menu{
    width:500px; margin:0 auto; overflow:auto; position:relative
}
.test{ padding:35px 50px; width:150px; display:inline-block; float:left}
.test a{
    width:150px;
    float:left;  line-height:150px; 
    background-color:#0091ce ;
    border-radius:6px;  text-align:center;  vertical-align:middle;
}
.test span{
    color:#F66
}
</style>
</head>

<body>
<div class="wrapper">

<header>
<a href="#"><fhj</a>
<a href="#" class="logo">fh</a>
<a href="#">gj</a>
</header>

<div class="container">
<div class="home_menu">
<div class="test">
<a href="#"><img src="images/channels.jpg" width="59" height="60" alt="channels" style="vertical-align:middle" /></a><span>test</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="64" height="73" alt="" style="vertical-align:middle" /></a><span>uspan</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="99" height="78" alt="" style="vertical-align:middle" /></a><span>htu</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="76" height="49" alt="" style="vertical-align:middle" /></a><span>ggg</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="71" height="68" alt="" style="vertical-align:middle" /></a><span>tehhhst</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="70" height="68" alt="" style="vertical-align:middle" /></a><span>bgfg</span></div>
</div>

</div>

</div>
</body>
</html>

为什么在运行页面时它无效？

Answer 1

根据我的评论，我删除了复制时出现在test a和test span结束括号上的两个问号。（可能的字符编码问题？）

我还添加了省略的分号和样式表的类型。

<style type="text/css">
  body{margin:0; padding:0;}
  .wrapper{width:1024px; height:768px; position:relative; margin:0 auto; background:url(../images/.jpg) repeat top left;}
  header{
      display:block; padding:0 125px;
      background-color: #007DC4; text-align:center;
      overflow:auto;
  }
  header a:first-child{float:left; padding:15px 0;}
  header a:last-child{float:right; padding:15px 0;}
  .logo{ padding-top:8px ; display:inline-block; }

  .container{width:801px; height:700px; background-color:#FFF; margin:0 auto;
      -webkit-box-shadow: 2px 2px  #e1e1e1,  -2px 0 2px #e1e1e1;   
      -moz-box-shadow: 2px 0 2px #e1e1e1,  -2px 0 2px #e1e1e1;   
      box-shadow: 2px 0 2px #e1e1e1,  -2px 0 2px #e1e1e1; 
  }
  .home_menu{
      width:500px; margin:0 auto; overflow:auto; position:relative;
  }
  .test{ padding:35px 50px; width:150px; display:inline-block; float:left;}
  .test a{
      width:150px;
      float:left;  line-height:150px; 
      background-color:#0091ce;
      border-radius:6px;  text-align:center;  vertical-align:middle;
  }
  .test span{
      color:#F66;
  }
</style>

Answer 2

默认情况下，您现在可以设置自己的 EDIT

样式链接

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

文字装饰

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

跨度文本的颜色

2 个答案: