2

谢谢大家！谢谢。如前所述，问题出在我有 CSS 代码的地方。我最初没有 ul 和 li 前缀的点/句点，那是绝望的最后一分钟行为。:-) 我确实阅读了 W3S、StackO/f、HTMLDog、Tizag 和所有其他很棒的网站 b4 提问。但你现在被我困住了。

另一个问题。我应该打开一个新问题吗？这个问题是指原始代码块。

我的线条颜色没有改变。但是，如果我对每一行进行编码，颜色就会改变。我想知道如何更改 li CSS 块中的颜色。

<!DOCTYPE html>
<HTML>



 <HEAD>
    <TITLE>Why I love learning HTML - Part 2</TITLE>
    </HEAD>

    Colors
    <BR>
    My favorite colors are:
    <BR>
    <UL>
    <LI><FONT SIZE=2 COLOR="red" >Navy</FONT>
    <LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Olive</FONT>
    <LI><FONT SIZE=2 COLOR="red" >Purple</FONT>
    <LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Teal</FONT>
    </UL

    </BODY>
    </HTML>

这是我第 5 周的 HTML&CSS 课程。当我谷歌一个问题时，总是弹出堆栈溢出网站。所以我加入了，我有一个问题。我的 CSS 代码作为代码显示在我的网页上。代码的 UL 和 LI 部分不读取类 .ul 和 .li。我看了很长时间的代码，不知道哪里出了问题。谢谢你的帮助

  <head>
    <meta charset="utf-8" />
        <title>Homepage</title>
        <style type="text/css">
        </style>
    </head>



 <body>
      .ul {
    margin:0;
        padding:0;
        color:#ff0000;
   }




 .li {
      display:inline;
      padding:0;
      margin:0;
      color:#000099;
   }
        <!-- Site navigation menu -->
     <ul>
        <li><a href="index.html">Home page</li></a> 
        <li><a href="EdEx.html">Education and Experience</li></a>
        <li><a href="pubs.html">Publications and Committees</li></a>
        <li><a href="links.html">Links</li></a>
    </ul>


    <h1>can't find the errors</h1>

   </body>
</html>
4

5 回答 5

6

首先，欢迎来到 HTML 和 CSS 的世界。我会直接说您发布的代码存在几个问题：

1.把你的CSS放在正确的地方

您的 CSS 代码目前没有放在<style type="text/css">顶部的声明中，而是放在文档的body. 这将作为文本输出到屏幕。

要解决此问题，只需将其全部移动到style您的该元素中head：

<head>
    <style type="text/css">
        /* Styling goes here. */
    </style>
</head>

（出于渲染目的，样式不应在文档之外声明head。）

2. 修复你的选择器

然而，一旦你解决了这个问题，你的选择器仍然不会以你的元素为目标。这是因为您在 CSS 选择器前加上.(.ul和.li)。A.前缀class选择器。

要定位您的ul和li元素，您只需删除.：

ul { ... }
li { ... }

3. 验证您的 HTML

附带说明一下，您需要注意结束 HTML 标记。您的结束</a>标签必须在您的<li>标签内。改变：

<li><a href="...">...</li></a>

到：

<li><a href="...">...</a></li>
于 2013-10-09T14:32:07.007 回答
1

你需要包含你的CSS

<style> </style>

另外，请确保尽可能将其放在头部

于 2013-10-09T14:31:06.740 回答
0

因为CSS 选择器以 '.' 开头 是上课的。
使用ul,li并将您的 css 样式包含在<style></style>.

于 2013-10-09T14:31:20.540 回答
0

那是因为您将 CSS“代码”作为文本放在 HTLM 中，而不是放在空<style>标签中。

于 2013-10-09T14:31:25.347 回答
0

进行内联样式的正确方法是在标记中使用 style 属性：

   <ul style="margin:0; padding:0; color:#ff0000;">

但是不建议使用上述方法，因为随着您网站中页面数量的增加，以及大量内联样式，维护成为一场噩梦。

您正在尝试做的是嵌入式样式，它不起作用，因为您需要在标签内包含样式指令。

顺便说一句，使用 id 总是更好的主意。就目前的情况而言，这种样式将应用于您的应用程序中的每个无序列表，这通常不是您想要的。如果您给列表一个 id，那么您可以像 #myId {} 这样引用它，然后样式将被限制在该列表中。

最后，推荐的做法是使用外部样式表，使用 HTML 链接标签：

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

这是您在正确位置嵌入样式的原始代码：

<head>
<meta charset="utf-8" />
    <title>Homepage</title>
    <style type="text/css">
    ul {
        margin:0;
        padding:0;
        color:#ff0000;
    }

    ul li {
        display:inline;
        padding:10;
        margin:0;
        color:#000099;
    }
    </style>
</head>
<body>

    <!-- Site navigation menu -->
    <ul>
       <li><a href="index.html">Home page</li></a> 
       <li><a href="EdEx.html">Education and Experience</li></a>
       <li><a href="pubs.html">Publications and Committees</li></a>
       <li><a href="links.html">Links</li></a>
   </ul>
</body>
于 2013-10-09T14:46:17.577 回答