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て[ネットワーク]タブを開いた状態で開発者コンソールを表示し、ページを再読み込みして、style.cssが正しく読み込まれていることを確認します（200OKまたは300未変更のコードを返す必要があります正しく思い出してください）。Firebugを使用してFirefoxで同じ操作を実行できます。

于 2012-10-16T16:53:54.957 に答える
0

style.cssファイルは、Webサーバー上のhtmlファイルと同じディレクトリにある必要があります。

于 2012-10-16T15:21:23.253 に答える
0

問題が解決したかどうかはわかりませんが、ulタグを完成させる必要があります。変化する

<ul id="nav

に

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