0

我对 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;

}
4

1 回答 1

0

如果不完全修改您的代码，只需考虑为每个“li”添加一个底部边框...删除您的 id='grey' 并将您的边框底部添加到您的#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声明为黑色但希望所有“子”列表元素为蓝色，则需要明确说明...在 CSS 文档中的初始声明之后。

希望这有帮助...

于 2013-06-24T15:37:10.223 回答