Question

我只是想为朋友创建一个网站，但我几个月没有做过任何开发，所以我现在有点生气。 / p>

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

我拥有的HTML是:(代码更新于25/09/2013 @ 17:40）

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

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

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

干杯！

编辑25/09/2013

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

screenshot

正如您所看到的，图像会显示（虽然不再是中心位置，已按照建议删除了中心标记 - 稍后会使用CSS对其进行排序。但是，导航栏不显示在这个页面，我不知道为什么会这样......有人知道我应该怎么做吗？

Answer 1

您的HTML有点拙劣......您可能想要查看<head>和<body>等标记的用途。以下HTML将为您提供所需的效果。

See this working demo.

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

我试图以这样的方式缩进事物，以便您可以轻松记住HTML文档的布局。随着您的网页变得越来越复杂，您可以考虑将CSS放在一个单独的文件中 - 比如stylesheet.css - 并将以下内容添加到<head>部分：

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

祝你好运！

HTML 5-向页面添加导航栏

1 个答案:

See this working demo.