Fatal编程技术网
  • html/
  • HTML5-向页面添加导航栏

HTML5-向页面添加导航栏

html

HTML5-向页面添加导航栏,html,navbar,Html,Navbar,我正在尝试为一个朋友创建一个网站，但实际上我已经有几个月没有做任何开发了，所以我现在有点生疏了 我已经开始把一个基本页面放在一起，用作网站所有页面的模板，但是我在让水平导航栏显示在徽标下方的页面上时遇到了一些问题，我只是想知道是否有人可以向我解释为什么它没有显示 我的HTML是：（代码更新25/09/2013@17:40） 温馨的心-家 #纳瓦尔{ 列表样式类型：无； } #纳瓦尔里酒店{ 列表样式类型：无； 显示：内联块； } 保险商实验室{ 列表样式类型：无； 保证金：0； 填充：0； }

我正在尝试为一个朋友创建一个网站，但实际上我已经有几个月没有做任何开发了，所以我现在有点生疏了

我已经开始把一个基本页面放在一起，用作网站所有页面的模板，但是我在让水平导航栏显示在徽标下方的页面上时遇到了一些问题，我只是想知道是否有人可以向我解释为什么它没有显示

我的HTML是：（代码更新25/09/2013@17:40）


温馨的心-家
#纳瓦尔{
列表样式类型：无；
}
#纳瓦尔里酒店{
列表样式类型：无；
显示：内联块；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}

    

  • |
    • 

  • |
    • 

  • |
    • 

  • |
    • 

  •
目前，在浏览器中查看页面时，徽标图像会按预期显示在页面顶部，但导航栏（我尝试使用div和水平列表创建）根本不会显示

我只是想知道是否有人能向我解释为什么会这样，以及我需要做些什么才能让它展示出来

干杯

编辑2013年9月25日

我对代码进行了编辑，以显示按照建议所做的更改，下面是在Chrome中查看页面时的屏幕截图（在Firefox中显示完全相同）：

如您所见，将显示图像（虽然不再是中心，但按照建议删除了“中心”标记，稍后将使用CSS对其进行分类。但是，导航栏根本不显示在页面上，我也不知道为什么会出现这种情况……有人知道我应该怎么做吗？

您的HTML有点糟糕……您可能需要查看标记的用途，如
和
。以下HTML将为您提供所需的效果

祝你好运！

头部（和中间）的图像对初学者无效。
标记不是用于页面内容，而是用于基本页面标题（显示在页面所在选项卡/窗口中的
标记），用于放入各种其他数据，如
s、
s、
s和
s。页面内容应包含在
标记中。因此，请将
和
标记移到那里。另外，
是一个不推荐使用的标记，因此不要使用它。请使用CSS样式将图像居中。嘿，谢谢非常感谢你的回答。我已经尝试了你建议的更改，但是在我的浏览器中查看页面时仍然有相同的问题…知道为什么吗？是否有其他可能会干扰的代码？你使用的是哪个浏览器，你能提供一个屏幕截图吗？没有任何其他可能会干扰的代码-到目前为止，我只有一个页面的e代码，这是我的问题。我尝试过使用Chrome和Firefox，但两者都有相同的问题-提供了屏幕截图。在编辑中，您似乎删除了
，因此样式表中的
#navbar ul
和
#navbar ul li
选择器将不再适用于菜单。您应该获得ri
ul{…}
您在底部的语句，然后从前两个选择器中删除
#navbar
，这样它们就可以分别读取
ul
和
ul li
。除此之外，我将您的代码复制并粘贴到一个新的HTML文档中，并在Chrome中打开它，所有内容都显示为它的样式。一定有什么问题e从某处干扰你的内容。 
<!DOCTYPE HTML>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul{
    list-style-type: none;
}
#navbar ul li{
    list-style-type: none;
    display: inline-block;
}
ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
</style>
</head>
<body>
<img src = "images\masterPageTop.jpg" width = "700" height = "800" alt = "Cosy Hearts Banner" />

<ul>
    <li><a href = "index.html">Home</a> | </li>
    <li><a href = "products.html">Products</a> | </li>
    <li><a href = "aboutUs.html">About Us</a> | </li>
    <li><a href = "contactUs.html">Contact Us</a> | </li>
    <li><a href = "termsAndConditions.html">Terms and Conditions</a></li>
</ul>



</body>



</html>

<!DOCTYPE html>
<html>
<head>
    <title>Cosy Hearts- Home</title>
    <style type = "text/css">
        #navbar ul {
            list-style-type: none;
        }
        #navbar ul li {
            list-style-type: none;
            display:inline-block;
        }
    </style>
</head>
<body>
    <center>
        <img src="images\masterPageTop.jpg" width="700" height="800" alt="Cosy Hearts Banner" />
    </center>
    <div id="navbar">
        <ul>
            <li><a href="index.html">Home</a> | </li>
            <li><a href="products.html">Products</a> | </li>
            <li><a href="aboutUs.html">About Us</a> | </li>
            <li><a href="contactUs.html">Contact Us</a> | </li>
            <li><a href="termsAndConditions.html">Terms and Conditions</a></li>
        </ul>
    </div>
</body>
</html>

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