0

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

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

我为此拥有的 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 中显示完全相同）：

截屏

如您所见，图像已显示（尽管不再是中心，但已按照建议删除了“中心”标签-稍后将使用 CSS 对其进行排序。但是，导航栏根本不显示在页面上，我可以'不告诉这是为什么......有人知道我该怎么做吗？

4

1 回答 1

0

您的 HTML 有点拙劣……您可能需要查看 和 之类的标签的<head>用途<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>

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

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

祝你好运！

于 2013-09-23T17:53:47.630 回答