Question

我为我的网站创建了一个关于页面的小型PSD样机。但是我不知道如何编写HTML和CSS代码。

我目前有以下代码：

的index.html

<html>
<link rel=StyleSheet href="css.css"
type="text/css">
<head><title>title</title></head>
<body>
<div id=body>
</div>
<div id=header>
<h3><font title=Futura>Header</font></h3>
</div>
</body>

css.css

body {
  background-image: url("background.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
header {
    background-image: url("otherBackground.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

我想让身体的背景图像在它上面有标题的背景图像，然后在它上面有一些文字。

我怎么能实现这个目标？

Answer 1

您需要在“标题”

之前添加＃

#header { }

Answer 2

在这种情况下，您将需要利用嵌套并开始理解一般文档流程。您可以并且鼓励将HTML元素放在其他HTML元素中以建立父::子流并控制页面上元素的位置。请注意我是如何移动header div

中的body元素的

<html>
<link rel="StyleSheet" href="css.css"
type="text/css">
<head><title>title</title></head>
<body>
<div id="body">
<div id="header">
<h3><font title="Futura">Header</font></h3>
</div>
</div>

</body>

您还需要确保用引号括起元素属性。在您的css中，如果您要定位div，则需要通过在#前加上元素名称来指定。

一个不错的开始，但继续阅读教程 - 你会得到它的支持！

帮助编写小型网站HTML

2 个答案: