导航栏边框不会改变颜色

我想更改导航栏上边框的颜色，但它不适用于我。这是我的代码：导航栏边框不会改变颜色

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

来源

2013-03-26 Kevril

你有border-width:0px;在你的风格.nav这是让你的边界不会出现。删除该行（无论如何您都要在简写border定义中设置宽度），它应该可以工作。

使用开发人员工具（如Chrome的“检查元素”）来帮助您计算出哪种风格会打破它，这些功能很方便。

（IE具有“开发工具”和Firefox也有类似的内置东西，也可以安装萤火虫）

来源

2013-03-26 17:07:47 n00dle

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

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

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

来源

2013-03-26 17:08:14 DiscoInfiltrator

这是因为在.nav上已指定border-width:0;。

尽管您在border样式中指定了3px，但它能够有效地呈现无边框的边框。

取而代之，它的工作原理。

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

来源

2013-03-26 17:08:18 mattytommo

从.nav删除border-width:0px;，它应该工作

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

来源

2013-03-26 17:09:43 Eli

导航栏边框不会改变颜色

回答

相关问题