个人中心
gpt4 book ai didi

html - 我的整个正文和页脚都变成了来 self 的导航栏的链接 (html/css)

转载 作者：行者123 更新时间：2023-11-28 17:28:32 26 4
gpt4 key购买 nike

我正在制作的网站页面上的 CSS 有问题。似乎我页面的整个正文和页脚都变成了指向我的导航栏选项之一的链接。我完全不明白为什么会这样。

/* CSS Document */

#containter {
    width: 900px;
}

#body {
    width: 350px;
    float: left;
    padding: 10px;
}

#nav {
    float: left;
    width: 203px;
    height: 400px;
    background-color:#f1f1f1;
    border: 1px solid #black;
}

#footer {
    clear: both;
    background-color:#f1f1f1;
    padding: 10px;
}

h2 {
    font-family:arial, helvetica, sans-serif;
    font-size: 2.3em;
    padding: 15px;
}

hr {
    color: grey;
    border-width: 5px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color:#f1f1f1;
    border: 1px solid black;
}

li {
    text-align: center;
    border-bottom: 1px solid black;
    font-family: arial;
    font-size: 18px;
}

li a {
    display: block;
    color: grey;
    padding: 0px 16px;
    text-decoration: none;
}

li:last-child {
    border-bottom:none;
}

li a.active {
    background-color: #grey;
    color:black;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.header img {
    float: left;
    width: 120px;
    height: 70px;
}

.header h1 {
    position: relative;
}
<!DOCTYPE html>

<html>
<head>
<title>Staff</title>

<link rel="stylesheet" type="text/css" href="css/staff_styles.css">

</head>

<body>

<div id="container">
    <div class="header">    
        <img src="http://i.imgur.com/Oz0Z7NG.gif" alt="Spinning Globe">
        <h2>Company, Inc.</h2>
    </div>
    <hr>

    <div id="nav">
        <ul>
            <li><a href="#home">Home</li>
            <li><a href="#aboutus">About Us</li>
            <li><a href="#staff">Staff</li>
            <li><a href="#contactus">Contact Us</li>
        </ul>
    </div>

    <div id="body">
        <p>
        body.
        <p>
    </div>
	
    <div id="footer">
        footer.
    </div>

</div>

</body>

</html>

最佳答案

您需要关闭打开<a> #nav > ul 中的标签

<div id="nav">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#aboutus">About Us</a></li>
        <li><a href="#staff">Staff</a></li>
        <li><a href="#contactus">Contact Us</a></li>
    </ul>
</div>

关于html - 我的整个正文和页脚都变成了来 self 的导航栏的链接 (html/css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38259340/

26 4 0
文章推荐： javascript - 使用 JavaScript 测试 CSS 颜色
文章推荐： html - 垂直居中图像和文本
文章推荐： css - 我的文件不是从网络服务器加载的，但我重命名了它，没问题。为什么会这样？
文章推荐： python - 我可以在形状匀称的多边形中设置点的顺序吗？