0

我正在使用 HTML5 文档类型。我创建了一个跨度标记并将文本颜色设为红色，但在我运行页面时它没有应用任何跨度。但奇迹是它在 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>

为什么在运行页面时它不起作用？

4

2 回答 2

0

根据我的评论，我删除了复制时出现在大括号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>
于 2012-09-25T11:39:32.713 回答
-1

这是默认设置现在你设置自己的编辑

样式链接

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;}
于 2012-09-25T11:05:30.550 回答