当我删除CSS中菜单边框的代码(不是标题)时,没有任何变化。我正在尝试删除菜单中项目的边框,因为我想输入不适合每个项目边框的图片。我删除#navigation li { border:1px solid#89cFF0;没有任何变化。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="videos.css" />
<link rel="stylesheet" type="text/css" href="vines.css" />
<title>Puppy Power</title>
</head>
<body>
<div id="wrap">
<div id="page">
<header></header>
<div id="dog logo">
</div>
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a>
<ul class="sub">
<li><a href="vines.html">Vines</a></li>
<li><a href="#">Pugs</a></li>
<li><a href="#">Failing Dogs</a></li>
<li><a href="#">Crazy Dogs</a></li>
<li><a href="#">Funny Dogs</a></li>
</ul>
</li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="hero"><h1><b>HERO</b></h1></div>
<div id="topvideo"><h1><b>TOP VIDEO</b></h1></div>
<div id="topphoto"><h1><b>TOP PHOTO</b></h1></div>
<div id="toparticles"><h1><b>TOP ARTICLE</b></h1></div>
<div id="content"><h1><b>CONTENT</b></h1></div>
<div id="footer"><h1><b>FOOTER</b></h1></div>
<div>
</body>
</html>
#wrap {
width: 900px;
margin: 0 auto;
}
#page {
max-width: 850px;
min-width: 900px;
min-height: 1550px;
max-height: 1600px;
}
* {
margin: 0px;
padding: 0px;
}
#navigation {
border: 1px solid #89cFF0;
width: 813px;
height: 187px;
margin-left: 5px;
margin-bottom: 0px
}
#navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
top: 159px;
left: 80px;
}
.sub {
display: none;
}
ul.sub {
position: absolute;
bottom: 15px;
right: 79px;
}
#navigation li {
text-align: center;
float: left;
list-style-type: none;
}
#navigation a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
border: 1px solid #89cFF0;
}
#navigation li:hover > a {
background-color: #89cFF0;
}
#navigation li:hover > ul.sub{
display: block
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 0px 0px 0px 5px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 10px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 5px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 5px;
text-align: center;
}
然后我删除了边框,但它仍然存在....
#wrap {
width: 900px;
margin: 0 auto;
}
#page {
max-width: 850px;
min-width: 900px;
min-height: 1550px;
max-height: 1600px;
}
* {
margin: 0px;
padding: 0px;
}
#navigation {
border: 1px solid #89cFF0;
width: 813px;
height: 187px;
margin-left: 5px;
margin-bottom: 0px
}
#navigation li {
position: absolute;
text-align: center;
top: 159px;
left: 80px;
}
#navigation , .sub {
list-style-type: none;
}
.sub {
display: none;
}
ul.sub {
position: absolute;
bottom: 15px;
right: 79px;
}
#navigation li {
text-align: center;
float: left;
list-style-type: none;
}
#navigation li:hover > a {
background-color: #89cFF0;
}
#navigation li:hover > ul.sub{
display: block
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 0px 0px 0px 5px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 10px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 5px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 5px;
text-align: center;
}
答案 0 :(得分:0)
border: none;
应该这样做。你确定CSS没有被缓存吗?尝试按Ctrl + f5重新加载页面。
答案 1 :(得分:0)
首先:您的单独CSS代码与HTML代码下方的CSS代码不同...例如#navigation li
具有绝对定位。
但是没关系。
您正在为菜单中的每个元素应用2个不同的边框。
首先:
#navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
top: 159px;
left: 80px;
}
第二
#navigation a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
border: 1px solid #89cFF0;
}
如果要删除该边框,则必须在两个类中删除它。