导航栏边框没有改变颜色
[英]navigation bar border isn't changing colour
问题描述
I want to change the colour of the border on my navigation bar but it ain't working for me. 
我想更改导航栏上边框的颜色，但对我来说不起作用。 Here's my code: 这是我的代码：
<!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>
what did i do wrong? 我做错了什么？ Is it something in the css part or the html? 是在css部分还是html中？ I would be very happy if you can help. 如果您能帮助我，我将非常高兴。 thanks. 谢谢。
4 个解决方案
解决方案1
1 2013-03-26 17:08:14
I'm assuming you mean the .nav class. 我假设您的意思是.nav类。 If so, you have: 如果是这样，您将：
border:3px solid white;
border-width:0px;
Make sure it has a width and you'll see the colour you set. 确保它具有宽度，您将看到设置的颜色。
解决方案2
0 2013-03-26 17:07:47
You have a border-width:0px; 你有一个border-width:0px; in your style for .nav which is making your border not appear. 以.nav的样式显示，因此不会显示边框。 Remove that line (you set your width in the shorthand border definition anyway) and it should work. 删除该行（无论如何，您都可以在速记border定义中设置宽度），它应该可以工作。
It's handy for these kind of things to use a developer tool such as Chrome's "Inspect Element" to help you work out what style's breaking it. 使用诸如Chrome的“ Inspect Element”之类的开发人员工具来进行此类操作非常方便，以帮助您确定破坏样式的方式。
(IE has "Developer tools" and Firefox has something similar built in, or you can install firebug) （IE具有“开发人员工具”，而Firefox具有内置的类似功能，或者您可以安装firebug）
解决方案3
0 2013-03-26 17:08:18
That's because on .nav you've specified border-width:0; 这是因为您在.nav上指定了border-width:0; . 。
That's effectively rendering your border with no width, even though you specified 3px in your border style. 即使您在border样式中指定了3px ，也可以有效地呈现没有宽度的border 。
Take that off and it works. 把它拿下来，它的工作原理。
DEMO: http://jsfiddle.net/cVNwn/ 演示： http : //jsfiddle.net/cVNwn/
解决方案4
0 2013-03-26 17:09:43
Remove border-width:0px; 删除border-width:0px; from your .nav and it should work 从您的.nav ，它应该工作
Demo: http://jsfiddle.net/zRQdj/ 演示： http ： //jsfiddle.net/zRQdj/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.