0

HTML5 doc-type を使用しています。スパン タグを作成し、テキストの色を赤にしましたが、ページを実行してもスパンに何も適用されません。しかし、奇跡はそれが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と右中括弧に表示されていた 2 つの疑問符を削除しました。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

デフォルトでは、独自の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;}
于 2012-09-25T11:05:30.550 に答える