Question

我想更改导航栏上边框的颜色，但它对我不起作用。这是我的代码：

<!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中的东西？如果你能提供帮助，我会很高兴。感谢。

Answer 1

我假设你的意思是.nav类。如果是这样，你有：

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

确保它有宽度，你会看到你设置的颜色。

Answer 2

border-width:0px;的样式中有.nav，这样会使您的边框不显示。删除该行（无论如何，您都以简写border定义设置宽度），它应该有效。

使用开发者工具（例如Chrome＆＃34; Inspect Element＆＃34;）可以使用这些东西。帮助你找出打破它的风格。

（IE有＆＃34;开发人员工具＆＃34; Firefox内置了类似内容，或者你可以安装firebug）

Answer 3

那是因为在.nav您指定了border-width:0;。

即使您在3px样式中指定了border，也可以有效地渲染没有宽度的边框。

取消它并且它有效。

DEMO：http://jsfiddle.net/cVNwn/

Answer 4

从border-width:0px;移除.nav，它应该可以正常工作

演示：http://jsfiddle.net/zRQdj/

导航栏边框不会改变颜色

4 个答案: