布局

在你的示例中, 编号段落并没有自己的容器。

你的样式表无法为这些段落画出边框，因为没有选择器指向它们。

为了解决这个问题, 你可以在段落之外添加一个<div> 。这个标签是唯一的，可以指定一个id属性来标识:

<h3>Numbered paragraphs</h3>
<div id="numbered">
  <p>Lorem ipsum</p>
  <p>Dolor sit</p>
  <p>Amet consectetuer</p>
  <p>Magna aliquam</p>
  <p>Autem veleum</p>
</div>

现在可以通过样式表在每个列表周围画出边框了:

ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
}

运行结果如下:

文本左边的border通过像素来指定大小。

文本右边的border通过 ems来指定大小。

在你的浏览器中，修改字体大小，会发现右边的border会自己修正大小而左边的不会。:

标题居中:

h3 {
  border-top: 1px solid gray;
  text-align: center;
}

输出结果:

在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时，其后的元素不会继承该样式。

在你的示例中，list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。

为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:

ul, #numbered {float: left;}
h3 {clear: left;}

为了放置两个元素，一个在另外一个上方, 创建一个父容器来包含两个子元素:

<div id="parent-div">
  <p id="forward">/</p>
  <p id="back">\</p>
</div>

在你的样式表里，将父容器的position设置为 relative。无需为它设置任何具体变动。 将子元素的position属性设置为 absolute:

#parent-div {
  position: relative;
  font: bold 200% sans-serif;
}

#forward, #back {
  position: absolute;
  margin:0px; /* no margin around the elements */
  top: 0px; /* distance from top */
  left: 0px; /* distance from left */
}

#forward {
  color: blue;
}

#back {
  color: red;
}

输出结果如下,反斜杠显示在斜杠上方

修改示例文档, doc2.html, 在文档末尾添加一个标签, 注意在</body>之前。

<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">

如果你在之前的教程中没有下载过该图片, 现在下载, 将它与示例文件放在同一目录下:

预测一下你的图片将会出现在哪里，然后刷新浏览器验证一下。

在样式表中添加一条规则，将图片显示在文档右上角。

刷新浏览器并把窗口拉小。 查看图片是否在右上角，拖动容器大小，再次查看。

(A) The oceans

• Arctic
• Atlantic
• Pacific
• Indian
• Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum