1

ナビゲーション バーの境界線の色を変更したいのですが、うまくいきません。これが私のコードです：

<!DOCTYPE html>
<html>
      <head>
        <title> site </title>
      </head>
    <style type="text/css">
body 
    {
      background-color:#75b5d6;
      color:white;
      font-family:"Arial";
      text-align:center;
    }
      a:link
    {
      color:white;
    }
      a:visited
    {
      color:white;
    }
      a:hover
    {
      color:white;
    }
      a:active
    {
      color:white;
    }
.nav
    {
      border:3px solid white;
      border-width:0px;
      list-style:none;
      margin:2;
      padding:2;
      text-align:center;
      background-color:orange;
      font-family:"Bookman Old Style";
    }
    .nav li{
    display:inline;
    }
.nav a
    {
    display:inline-block;
    padding:10px;
    }
h1
    {
      font-size:40;
      font-family:"Lucida Handwriting";
    }
h2
    {
      font-size:27.5;
      text-decoration:underline;
    }
p
    {
      font-size:12;
    }
    </style>
      <body>
        <h1> Kevril.net </h1>
        <ul class="nav">
        <li><a href="x">Home</a></li>
        <li><a href="x">site1</a></li>
        <li><a href="x">site2</a></li>
        </ul>
        <h2>Welcome</h2>
        <p>Hellow</p>
      </body>
</html>

私は何を間違えましたか？それはcss部分またはhtmlの何かですか？お役に立てれば幸いです。ありがとう。

4

4 に答える 4

1

.nav クラスのことだと思います。もしそうなら、あなたは持っています：

  border:3px solid white;
  border-width:0px;

幅があることを確認すると、設定した色が表示されます。

于 2013-03-26T17:08:14.737 に答える
0

あなたborder-width:0px;のスタイルに.navは、境界線が表示されない原因があります。borderその行を削除すると（とにかく省略形の定義で幅を設定します）、機能するはずです。

このような場合、Chrome の「Inspect Element」などの開発者ツールを使用して、どのスタイルがそれを壊しているかを調べると便利です。

（IEには「開発者ツール」があり、Firefoxには同様のものが組み込まれているか、firebugをインストールできます）

于 2013-03-26T17:07:47.553 に答える
0

これは、 on.navを指定したためですborder-width:0;。

3pxスタイルで指定したにもかかわらず、幅のない境界線を効果的にレンダリングしていますborder。

それを外すとうまくいきます。

デモ: http://jsfiddle.net/cVNwn/

于 2013-03-26T17:08:18.080 に答える
0

border-width:0px;あなたから削除する.navと、動作するはずです

デモ: http://jsfiddle.net/zRQdj/

于 2013-03-26T17:09:43.510 に答える