首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >导航栏的Href链接

导航栏的Href链接
EN

Stack Overflow用户
提问于 2015-09-23 09:50:42
回答 1查看 16K关注 0票数 1

我刚刚开始学习HTML,并决定尝试建立一个简单的博客。我决定我想要一个导航栏,其中包含指向其他HTML文件的链接。我本以为我做得很完美,直到我运行它,发现只有"Home“链接有效(这是我放入href标签的HTML文件),其他4个链接显示为链接,但不能点击。所有文件都位于同一文件夹中。

代码语言:javascript
复制
<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;
}
EN

回答 1

Stack Overflow用户

发布于 2015-09-23 10:21:41

如前所述,您需要将<header><content>放在<body>标记中。

这应该会对你有所帮助:

代码语言:javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32729749

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档