Question

我正在做一个示例网页，但结果并没有按照我的计划进行。应该发生的是一个黑色矩形标题框应该显示。我将为您提供示例代码。

HTML CODE / learningcss.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="div.css" rel="stylesheet" type="text/css"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Tutorial 1</title>
</head>

<p>
We are creating this page to see how to make a better looking website.
</p>

<p>
We are creating this page to see how to make a better looking website.
</p>

<div id="header">
This is a paragraph
</div id="header">

<body>

<div id="column 2">
<h1>The Header</h1>
</div>

<div id="Column 2">
This is a basic CSS<br>
<br>
Tokyo<br>
</div>

<div id="Column 3">
<h1><a href="<a href="http://gymforgeeks.userecho.com/http://gymforgeeks.userecho.com/">
This is GymForGeeks
</h1>
<p>
This is just a sample page using CSS.
</p>
<p>
Yet another sample text content.
</p>
</div>

<div id="footer">
Copyright Queensborough 
</div>

</body>
<body>
<footer>
  <p>Posted by: Mike</p>
  <p>This is a test: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>
</body>

</html>

div.css

#Header {

background:#000;
height:100px
}
#header {
    color: white
}

Answer 1

您必须关闭仅有</div>而不是</div id="header">

的已打开div

CSS是区分大小写的，所以你必须使用#header而不是#Header

您可以将这两个定义结合起来：

#header {
background:#000;
height:100px;
color: white;
}

希望我能帮助一点。

我进一步清理了你的烂摊子： http://codepen.io/anon/pen/qacAg

说明：

关闭</head>后，您必须打开<body>
这就是工作链接的样子：<a href="www.target.com">TEXT</a>
你应该只使用id的唯一区域或div不是多次 - 使用类而不是<div class="THECLASS">THE CONTENT</div>
不要在类或id名称中使用空格，它将创建多个类

Answer 2

您的代码完全错误：

1）body是/ head之后的起始元素，这是/ html之前的最后一个元素，只使用它一次。

2）当你关闭div时，不需要添加id。

3）Id应该是一个字符串

4）你严重使用href

5）你没有关闭你的CSS

请参阅：http://jsfiddle.net/7uggw2x6/1/

<强> HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
....
</head>

<body>

<p>We are creating this page to see how to make a better looking website.</p>

<p>We are creating this page to see how to make a better looking website.</p>

<div id="header">This is a paragraph</div>

<div id="column_1"><h1>The Header</h1></div>

<div id="column_2">This is a basic CSS<br><br>Tokyo<br></div>

<div id="column_3">
    <h1><a href="http://gymforgeeks.userecho.com">This is GymForGeeks</a></h1>
 <p>This is just a sample page using CSS.</p>
 <p>Yet another sample text content.</p>
</div>

<div id="footer">Copyright Queensborough</div>
<footer>
    <p>Posted by: Mike</p>
    <p>This is a test: <a href="mailto:someone@example.com">someone@example.com</a>./p>
 </footer>
 </body>
 </html>

<强> CSS

#header {
    background:#000;
    height:100px;
    color: white;
}

Answer 3

您应该在 CSS-File 中使用以下样式：

#header {
    background-color: #000;
    color: #FFF;
    height: 100px; 
}

您可以在www.w3schools.com了解HTML和CSS的基础知识。

我希望我能解决你的问题。

此致 t.koelpin

Answer 4

你有一些问题。你的HTML结构不正确。页脚元素进入内部身体标签。您必须为div设置一个结束标记，并且您的内容位于中间。

<!DOCTYPE html>
<html>
<head>
    <link href="div.css" rel="stylesheet" type="text/css"
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>CSS Tutorial 1</title>
    <!-- this section is for loading scripts, css and metadata -->
</head>
<body>
    <!-- this section is for content -->    
    <div class='header'>
        Header text
    </div>
    <footer>
       <!-- footer tags are HTML5 Tags and should be used with the HTML5 doctype -->
    </footer>
</body>
</html>

css

#header {
    background:#000;
    height:100px;
    color: white;
   }

Answer 5

这是HTML的有效版本：

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>CSS Tutorial 1</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <p>We are creating this page to see how to make a better looking website.</p>
    <p>We are creating this page to see how to make a better looking website.</p>

    <div id="header">This is a paragraph</div>

    <div class="column-2">
        <h1>The Header</h1>
    </div>

    <div class="column-2">This is a basic CSS<br><br> Tokyo<br></div>

    <div class="column-3">
        <h1><a href="<a href="http://gymforgeeks.userecho.com">This is GymForGeeks</h1>
        <p>This is just a sample page using CSS.</p>
        <p>Yet another sample text content.</p>
    </div>

    <div id="footer">Copyright Queensborough</div>

    <footer>
        <p>Posted by: Mike</p>
        <p>This is a test: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
    </footer>
</body>
</html>

你应该知道的一些事情：

您不应该有多个具有相同ID的元素
任何HTML页面只能包含1个body元素
id必须是字符串，不应包含空格。例如column-3
任何HTML代码（p，div，footer，span，..）必须位于<body></body>代码
如果要将相同的样式应用于多个元素，请使用类

为了使您的元素显示在列中，您需要使用网格框架（getbootstrap.com，960.gs，..）或创建自定义CSS来订购元素：

e.g。 style.css中：

.column-2 {
    float: left;
    width: 20%;
}

.column-3 {
    float: left;
    width: 30%;
}

这只是一个例子。在进入所需的网格之前，您需要进行一些挖掘。

CSS，HTML＆amp; DIV ID

5 个答案: