2

我一般在 Windows 中使用 Notepad++ 编写 HTML 和 CSS（我是初学者）。但是，我也很喜欢使用 Linux 并且经常在 Ubuntu 中工作。我在 Ubuntu 中使用 BlueFish 编辑器。

我的问题是，在 BlueFish 中，当我输入简单的 CSS 样式并将它们链接到 HTML 文档并进入浏览器进行预览时，除了编写的 HTML（段落、文本、图像等）之外，什么都没有。

这就是我对 HTML 的了解：我只需要知道我是否正确链接，如果是，当我创建“style.css”文档时为什么它不能正常工作。

<!DOCTYPE HTML>
<!-- This is a mockup page -->
<html>
    <head>

        <link rel="stylesheet" href="style.css" type="text/css"/>
        <title>Daily News</title>

    </head>

    <body>

    <ul id="nav

        <li><a href="#" >Home</a></li>
        <li><a href="#" >About</a></li>
        <li><a href="#" >Services</a></li>
        <li><a href="#" >Contact</a></li>

    </ul>

    <div id="p1">
    <h4>Coding is fun</h4>
<p>Morbi posuere fermentum urna non iaculis. Vivamus posuere felis sed orci luctus vel tempor nunc ultrices. Sed accumsan mauris ac orci condimentum id posuere tellus tincidunt. Aliquam pellentesque tortor ac magna porttitor luctus. Fusce nec augue in est tempus mollis ac ut libero. Vestibulum eget mi eu orci vestibulum ullamcorper sed non ligula. Nulla facilisi. Sed consectetur, libero imperdiet condimentum mattis, nisl tortor fringilla tortor, in consequat erat libero eget diam. Ut tortor erat, tincidunt vel cursus ut, varius sit amet est. </p>
    <h4>Open Source is for the better good</h4>
<p>Morbi posuere fermentum urna non iaculis. Vivamus posuere felis sed orci luctus vel tempor nunc ultrices. Sed accumsan mauris ac orci condimentum id posuere tellus tincidunt. Aliquam pellentesque tortor ac magna porttitor luctus. Fusce nec augue in est tempus mollis ac ut libero. Vestibulum eget mi eu orci vestibulum ullamcorper sed non ligula. Nulla facilisi. Sed consectetur, libero imperdiet condimentum mattis, nisl tortor fringilla tortor, in consequat erat libero eget diam. Ut tortor erat, tincidunt vel cursus ut, varius sit amet est. </p>
    <h4>Ubuntu 12.10 is coming out next week</h4>
<p>Aenean commodo libero at purus varius at bibendum lacus gravida. Nullam sollicitudin, justo eget hendrerit pharetra, massa est ullamcorper sem, vitae commodo nulla risus eget tortor. Curabitur viverra hendrerit ornare. Donec eu nisl erat. Suspendisse sed bibendum metus. Praesent luctus euismod odio ut semper. Suspendisse molestie vulputate sapien eleifend hendrerit. Nullam gravida cursus mattis. </p>

<div id="right_sidebar"></div>
    </div>
    <div id="footer">

<footer>Webpage designed by me</footer>
    </div>
</body>

</html>

*我也开始从 Codeyear.com 学习网上任何其他好的资源来学习 HTML CSS Javascript？

谢谢你

4

3 回答 3

1

好的，我稍微清理了您的 HTML。请记住，您的缩进应该是一致的 - 您的关闭标签应该与您的打开标签对齐，等等。

<!DOCTYPE HTML>
<!-- This is a mockup page -->
<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <title>Daily News</title>
    </head>

    <body>
        <ul id="nav>
            <li><a href="#" >Home</a></li>
            <li><a href="#" >About</a></li>
            <li><a href="#" >Services</a></li>
            <li><a href="#" >Contact</a></li>
        </ul>

        <div id="p1">
            <h4>Coding is fun</h4>
            <p>Morbi posuere fermentum urna non iaculis. Vivamus posuere felis sed orci luctus vel tempor nunc ultrices. Sed accumsan mauris ac orci condimentum id posuere tellus tincidunt. Aliquam pellentesque tortor ac magna porttitor luctus. Fusce nec augue in est tempus mollis ac ut libero. Vestibulum eget mi eu orci vestibulum ullamcorper sed non ligula. Nulla facilisi. Sed consectetur, libero imperdiet condimentum mattis, nisl tortor fringilla tortor, in consequat erat libero eget diam. Ut tortor erat, tincidunt vel cursus ut, varius sit amet est. </p>

            <h4>Open Source is for the better good</h4>
            <p>Morbi posuere fermentum urna non iaculis. Vivamus posuere felis sed orci luctus vel tempor nunc ultrices. Sed accumsan mauris ac orci condimentum id posuere tellus tincidunt. Aliquam pellentesque tortor ac magna porttitor luctus. Fusce nec augue in est tempus mollis ac ut libero. Vestibulum eget mi eu orci vestibulum ullamcorper sed non ligula. Nulla facilisi. Sed consectetur, libero imperdiet condimentum mattis, nisl tortor fringilla tortor, in consequat erat libero eget diam. Ut tortor erat, tincidunt vel cursus ut, varius sit amet est. </p>

            <h4>Ubuntu 12.10 is coming out next week</h4>
            <p>Aenean commodo libero at purus varius at bibendum lacus gravida. Nullam sollicitudin, justo eget hendrerit pharetra, massa est ullamcorper sem, vitae commodo nulla risus eget tortor. Curabitur viverra hendrerit ornare. Donec eu nisl erat. Suspendisse sed bibendum metus. Praesent luctus euismod odio ut semper. Suspendisse molestie vulputate sapien eleifend hendrerit. Nullam gravida cursus mattis. </p>

            <div id="right_sidebar"></div>
        </div>

        <div id="footer">
            <footer>Webpage designed by me</footer>
        </div>
    </body>
</html>

至于为什么您的 CSS 可能没有显示 - 请记住，CSS 文件必须相对于链接到它的 HTML 页面正确放置。这是一个模拟目录结构，例如，基于您<link>在上面代码中的标签：

/
/style.css
/index.html

现在，如果 style.css 在它自己的文件夹中，它应该如下：

/
/css/styles.css
/index.html

在后一种情况下，链接标签将读取<link rel="stylesheet" href="css/styles.css" type="text/css" />

我不太明白 Bluefish 会如何干扰未加载的 CSS 文件。如果您使用的是 Chrome 或 IE，请按F12打开开发人员控制台并打开 Network 选项卡，然后重新加载页面并查看 style.css 是否已正确加载（如果我应该返回 200 OK 或 300 Not Modified 代码正确回忆）。您可以在 Firefox 中使用 Firebug 执行相同的操作。

于 2012-10-16T16:53:54.957 回答
0

您的 style.css 文件需要与您的 html 文件位于 Web 服务器上的同一目录中。

于 2012-10-16T15:21:23.253 回答
0

我不知道它是否解决了问题，但你应该完成ul标签。改变

<ul id="nav

至

<ul id="nav">
于 2012-10-16T15:59:48.800 回答