Fatal编程技术网
  • html/
  • Html Href导航栏链接

Html Href导航栏链接

html css

Html Href导航栏链接,html,css,blogs,navbar,Html,Css,Blogs,Navbar,我刚开始学习HTML，决定尝试建立一个简单的博客。我决定要一个导航栏，上面有指向其他HTML文件的链接。我认为我做得很好，直到我运行它，发现只有“Home”链接有效（这是我放了href标签的HTML文件），其他4个链接显示为链接，但不可点击。所有文件都位于同一文件夹中 <head> <title>Music Project</title> <link href="MusicProject.css" rel="stylesheet" />

我刚开始学习HTML，决定尝试建立一个简单的博客。我决定要一个导航栏，上面有指向其他HTML文件的链接。我认为我做得很好，直到我运行它，发现只有“Home”链接有效（这是我放了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;
}


音乐项目

    

  • 

  • 

  • 

  • 

  • 


#标题{
背景色：#888888；
高度：380px；
边际：0px；
填充：0px；
}
身体{
背景色：#C0；
边际：0px；
填充：0px；
}
#主要{
溢出：自动；
}
#内容{
浮动：左；
}
#侧面{
浮动：左；
}
#导航{
高度：42px；
背景色：#888888；
}
#导航ul{
列表样式类型：无；
高度：30px；
填充：0px；
边际：0px；
}
#李国荣{
浮动：左；
利润率：10px；
宽度：246px；
文本对齐：居中；
字体系列：“Arial”；
字体大小：23px；
颜色：#00004B；
}
#海军ulli a{
显示：内联；
宽度：246px；
}
如前所述，您需要将
和
放在
标记中

这将帮助您：

<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>



音乐项目
#标题{
背景色：#888888；
高度：380px；
边际：0px；
填充：0px；
}
身体{
背景色：#C0；
边际：0px；
填充：0px；
}
#主要{
溢出：自动；
}
#内容{
浮动：左；
}
#侧面{
浮动：左；
}
#导航{
高度：42px；
背景色：#888888；
}
#导航ul{
列表样式类型：无；
高度：30px；
填充：0px；
边际：0px；
}
#李国荣{
浮动：左；
利润率：10px；
宽度：246px；
文本对齐：居中；
字体系列：“Arial”；
字体大小：23px；
颜色：#00004B；
}
#海军ulli a{
显示：内联；
宽度：246px；
}

    

  • 

  • 

  • 

  • 

  •

这里有一个链接可以帮助您学习基础知识

如前所述，您需要将
和
放在
标记中

这将帮助您：

<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>



音乐项目
#标题{
背景色：#888888；
高度：380px；
边际：0px；
填充：0px；
}
身体{
背景色：#C0；
边际：0px；
填充：0px；
}
#主要{
溢出：自动；
}
#内容{
浮动：左；
}
#侧面{
浮动：左；
}
#导航{
高度：42px；
背景色：#888888；
}
#导航ul{
列表样式类型：无；
高度：30px；
填充：0px；
边际：0px；
}
#李国荣{
浮动：左；
利润率：10px；
宽度：246px；
文本对齐：居中；
字体系列：“Arial”；
字体大小：23px；
颜色：#00004B；
}
#海军ulli a{
显示：内联；
宽度：246px；
}

    

  • 

  • 

  • 

  • 

  •

这里有一个链接可以帮助您学习基础知识

嗨，欢迎来到Stack Overflow。通常，你不会在标签中实现锚定链接，试着把它放在标签中，看看它是否适合你。加上@choz所说的，你的图像覆盖了你拥有的导航链接，所以你现在不能点击它们。尝试增加
#标题的高度或将其全部删除。@choz通常是这样吗？那不呢？是你的朋友。嗨，欢迎来到Stack Overflow。通常，你不会在标签中实现锚定链接，试着把它放在标签中，看看它是否适合你。加上@choz所说的，你的图像覆盖了你拥有的导航链接，所以你现在不能点击它们。尝试增加
#标题的高度或将其全部删除。@choz通常是这样吗？那不呢？是你的朋友。也可以查看此链接了解更多信息。自1999年以来，任何人都不应该在新网页上使用过渡doctype。元标记和链接标记没有结束斜杠。“header”div没有任何用途，“align”已弃用，并且h1标记无效。更不用说没有内容元素了。你是对的，我会解决这个问题。我错了，我错点击了CS3。也请查看此链接了解更多信息。自1999年以来，任何人都不应该在新网页上使用过渡doctype。元标记和链接标记没有结束斜杠。“header”div没有任何用途，“align”已弃用，并且h1标记无效。更不用说没有内容元素了。你是对的，我会解决这个问题。我错了，我错点击了CS3。