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

那是因为.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 回答