Question

我正在为我和我的朋友们创建一个网站，我正在尝试创建用于导航的方框（登录，注册，我的帐户等），但我似乎一路上搞砸了。起初我认为HTML和CSS文件没有链接，但似乎并非如此。框没有显示，只有链接。

这是我正在讨论的HTML文件的一部分：

<div class="nav">
    <div class="container">
        <ul>
            <li><a href="#">My account</a></li>
        </ul>
    </div>
</div>

这是完整的css文件：

a {   
    color: #CC0000; 
}

.nav {    
    background-color: #9A9A9A;    
    border-radius: 3px;
}

我知道CSS和HTML文件是链接的，因为页面上的链接是红色的。我想我错过了什么，但我不确定是什么。

Answer 1

这是您创建基本导航栏的方法。

dabblet

上的演示

HTML：

<body>
<!--Navigation-Bar-Container-->
<div class="nav-container">
    <!--Navigation-Bar-Item-Wrapper-->
    <div class="nav">
        <!--Items-->
        <div id="menu-item-1" class="menu-item">Item 1</div>
        <div id="menu-item-2" class="menu-item">Item 2</div>
        <div id="menu-item-3" class="menu-item">Item 3</div>
        <div id="menu-item-4" class="menu-item">Item 4</div>
        <div id="menu-item-5" class="menu-item">Item 5</div>
        <hr />
    </div>
</div>
<!--Content-->
</body>

CSS：

body {
    background: url(http://s25.postimg.org/b6q25p4p7/black_thread.png) repeat black;
}
hr {
    color: #777777;
}
.nav-container {
    top: 20px;
    position: relative;
    width: 100%;
    height: 30px;

}
.nav {
    width: 100%;
    height: 30px;
    maring: 0 auto;
    text-align: center;
}
.menu-item {
    display: inline-block;
    width: 60px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #777777;
}
.menu-item:hover {
    background-color: black;
    cursor: pointer;
    border-radius: 2px;
}

Answer 2

我认为您的问题不是因为您的代码不起作用，而是您是初学者并且不知道从哪里开始。没关系，但我建议您通过this one之类的css导航教程开始，然后在有更多代码后再回来查看更具体的问题。

另外，既然你是新来的 - 如果它解决了你的问题，别忘了接受答案。

您的主要问题可能是您看到导航链接在屏幕上延伸。这里有一些未经测试的代码可能会帮助您更接近您正在寻找的内容。

a{
display:block;
color: #CC0000;
}

li{
float:left;
width:100px;
border-radius: 3px;
background-color:##9A9A9A;
}

a:hover{
background-color:#c00;
color:#000;
}

盒子没有出现

2 个答案:

dabblet

HTML：

CSS：