我对css很新,我想学习有效地使用css但我现在有几个问题/问题,我想在我的菜单下制作灰色边框,但是当我放大和缩小边框时表现得如此奇怪?对不起,我的代码不是很干净。我怎样才能修饰我的代码以获得更好的信誉?
HTML
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:#d00000;
text-decoration:underline;
}
#home{
background-color:#0000CC;
}
span{
font-style:italic;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li><a href="#Home" id="home"><span>Home</span></a></li>
<li><a href="#link2">link2</a></li>
<li><a href="#link3">link3</a>
<ul>
<li><a href="#sub">sub</a></li>
<li><a href="#sub2">sub2</a></li>
</ul>
</li><!---End of DropDown Videos menu--->
<li><a href="#link4">link4</a></li>
<li><a href="#link5">link5</a></li>
</ul><!---End of nav elements--->
<br class="clearFloat">
</div><!---End of header--->
</div><!---End of wrapper--->
<div id="grey">
</body>
</html>
CSS
#wrapper{
float:center;
}
#grey{
border-bottom:250px solid #a0a0a0;
padding:0px;
margin-left:203px;
margin-right:387px;
}
#header{
margin:auto;
padding:0px;
clear:both;
}
#header ul{
margin:0px;
padding:0px;
line-height:30px;
}
#header li{
margin:0px;
padding:0px;
list-style: none;
float:left;
position:relative;
background-color:#000099;
border:1 solid #0000CC;
top:px;
right:-15%;
}
#header ul li a{
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#header ul ul li a{
color:#0000cc;
}
#header ul ul li{
right:0%;
}
#header ul ul{
margin:0px;
padding:0px;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
}
#header ul li:hover ul {
visibility:visible;
opacity:1 ;
}
#header ul li:hover {
background-color:blue;
}
#header ul li:hover a {
color:black;
}
#header ul ul li:hover a {
color:#d00000;
}
.clearfloat{
clear:both;
margin:0px;
padding:0px;
}
答案 0 :(得分:0)
如果没有完全重新编写代码,只需考虑为每个'li'添加一个底部边框... 移除您的ID ='灰色'并将您的边框底部添加到 #header li {} 。刷新但请注意您的“子”菜单现在每个都有一个底部边框。他们继承了它,所以你需要关闭它们......因此在 #header ul ul li 声明中添加border-bottom:none。
现在......如果我们快速修改你的代码......
<强> HTML 强>
<div id="wrapper">
<div id="header">
<div id="navwrapper">
<ul id="nav">
<li><a href="#Home" id="home"><span>Home</span></a></li>
<li><a href="#link2">link2</a></li>
<li><a href="#link3">link3</a>
<ul class="sub">
<li><a href="#sub">sub</a></li>
<li><a href="#sub2">sub2</a></li>
</ul>
</li>
<li><a href="#link4">link4</a></li>
<li><a href="#link5">link5</a></li>
</ul>
</div>
</div>
<强> CSS 强>
html, body { margin:10px;padding:0; }
#wrapper, #header, #navwrapper { margin: 0 auto 0 auto; }
#nav {
padding:0;
margin: 0 auto 0 auto;
line-height:30px;
height:30px;
list-style:none }
#nav li {
border-bottom: solid #a0a0a0 10px;
margin:0;
padding:0;
float:left;
background-color:#000099;
}
#nav a {
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#nav li:hover { background-color:blue; }
#nav li:hover .sub {
visibility:visible;
opacity: 1;
}
#nav .sub a { color:#00c; }
#nav .sub {
margin:0;
padding:0;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
list-style: none;
}
#nav .sub li { clear:both; border-bottom: none; }
在子菜单中使用更多命名约定比向下钻取css更安全。您还需要注意,任何顶级CSS声明都由其中的所有子进程继承。这样,如果你将 #nav li 声明为黑色,但希望所有'sub'列表元素都是蓝色的,则需要明确说明......在CSS文档中的初始声明之后。< / p>
希望这有助于......