css 导航栏的Href链接

rjee0c15 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(149)

我刚开始学习HTML，我决定尝试建立一个简单的博客。我决定我想要一个带有链接到其他HTML文件的导航栏。我认为我已经做得很完美了，直到我运行它，发现只有“主页”链接可以工作（这是我放了href标签的HTML文件），其他4个链接显示为链接，但不可点击。所有文件都位于同一文件夹中。

<head>

<title>Music Project</title>

<link href="MusicProject.css" rel="stylesheet" />

    <div id="header">
    <h1 align="center" style="margin-top: -155px"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
    </div>
    <div id="nav">
<ul>
<li><a href="Music Project.html">Home</a></li>
<li><a href="Artist.html">Artists</a></li>
<li><a href="album.html">Mixtapes/Albums</a></li>
<li><a href="suggestions.html">Suggestions</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</head>

#header {
    background-color: #888888;
    height:380px;
    margin:0px;
    padding:0px;

    }
body {
    background-color: #C0C0C0;
    margin:0px;
    padding:0px;
}
#main {
    overflow: auto;
}
#content {
    float:left;
}
#side {
    float:left;
}
#nav {
    height: 42px;
    background-color: #888888;
    }
#nav ul {
    list-style-type:none;
    height:30px;
    padding:0px;
    margin:0px;
        }
#nav ul li {
    float:left;
    margin:10px;
    width:246px;
    text-align:center;
    font-family:"Arial";
    font-size: 23px;
    color: #00004B;
}
#nav ul li a {
    display: inline;
    width: 246px;
}

css

来源：https://stackoverflow.com/questions/32729749/href-links-for-navigation-bar

1条答案

按热度按时间

azpvetkf1#

如前所述，您需要将<header>和<content>放置在<body>标记中。
这应该能帮到你：

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Music Project</title>
    <link href="MusicProject.css" rel="stylesheet">

    <style>
        #header {
            background-color: #888888;
            height: 380px;
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #C0C0C0;
            margin: 0px;
            padding: 0px;
        }

        #main {
            overflow: auto;
        }

        #content {
            float: left;
        }

        #side {
            float: left;
        }

        #nav {
            height: 42px;
            background-color: #888888;
        }

            #nav ul {
                list-style-type: none;
                height: 30px;
                padding: 0px;
                margin: 0px;
            }

                #nav ul li {
                    float: left;
                    margin: 10px;
                    width: 246px;
                    text-align: center;
                    font-family: "Arial";
                    font-size: 23px;
                    color: #00004B;
                }

                    #nav ul li a {
                        display: inline;
                        width: 246px;
                    }
    </style>
</head>
<body>
    <header>
        <div id="header">
            <h1 style="margin-top: -155px; text-align:center;"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
        </div>
        <div id="nav">
            <ul>
                <li><a href="Music Project.html">Home</a></li>
                <li><a href="Artist.html">Artists</a></li>
                <li><a href="album.html">Mixtapes/Albums</a></li>
                <li><a href="suggestions.html">Suggestions</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </header>

    <content>
         <!-- Page content here  -->
    </content>
</body>
</html>

Fiddle
下面的链接可帮助您了解基本知识。Link

赞(0）回复(0）举报 2023-01-18

我来回答

css 导航栏的Href链接

1条答案

相关问题

热门标签

最新问答