CSS、HTML&；分区ID_Html_Css - Fatal编程技术网

CSS、HTML&；分区ID

html css

CSS、HTML&；分区ID,html,css,Html,Css,我正在做一个示例网页，但结果并不像我计划的那样。应该会出现一个黑色的矩形标题框。我会给你示例代码 HTML代码/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">

我正在做一个示例网页，但结果并不像我计划的那样。应该会出现一个黑色的矩形标题框。我会给你示例代码

HTML代码/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而不是#header

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

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

希望我能帮点忙

我把你的烂摊子收拾得更干净了一点：

说明：

关闭
后，必须打开
这是工作链接的外观：
您应该只将id用于唯一区域或div，而不是多次-使用类代替内容


不要在类或id名称中使用空格，这样会创建多个类

您的代码完全错误：
1） body是/head之后的起始元素，它是/html之前的最后一个元素，并且只使用一次
2） 关闭div时，无需添加id
3） Id应该是一个字符串
4） 你用a字很糟糕
5） 您没有关闭css
见此：
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-color: #000;
    color: #FFF;
    height: 100px; 
}

您可以在学习HTML和CSS的基础知识
我希望我能解决你的问题
问候
t、 koelpin您有一些问题。html的结构不正确。footer元素进入内部
身体标签。你必须为你的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>

这是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>

这只是一个例子。您需要进行一些挖掘，直到到达所需的网格。
文档中只能有一个
元素-。另外，你的HTML是无效的。什么是无效的？请解释一下。我知道这是无效的，因为我向社区寻求帮助。这只是一个开始。您可能会发现一个有用的方法。通过任何验证器运行它，您都会看到问题。一对：你有多个主体元素，代码在两者之外，你的ID有空格，你的链接语法是错误的。非常感谢！我真的觉得你的答案很有用。只是一个问题，为什么当我预览它时，它实际上并没有显示在列中？您需要向这些类添加CSS样式，以便它们的行为类似于列。我将用一个例子来编辑我的答案。
<!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>

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

<!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>

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

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