HTML5 & CSS3 新手指南 - 第四部分（共 12 部分）

James Jensen

5.00/5 (8投票s)

2014年4月10日

CPOL

20分钟阅读

18787

布局你的第一个网页

在之前的文章中，我们已经了解了 HTML5 和 CSS，并且尝试了几种不同的方法来更改文本字体和装饰。在本文中，我们将构建一个完整的网页，并深入探讨 CSS 的概念模型。

我们将学习以下内容

从基础开始
仅默认设置
盒子模型
尺寸、定位、浮动、对齐
表格

从基础开始

创建一个网站就像创作一件艺术品。有一些规则，但并没有什么能真正阻止你创造任何你想要的东西。浏览器页面是你的画布，你的画笔是 HTML5，你的颜料是 CSS。

但是，即使是最好的艺术家也需要在脑海中有一些创作的想法。更多人会创建草图，构建原型，并准备大量材料。草图背后的想法是“规划”。以下是我们开始这个过程的方法：

创造愿景
绘制草图
尝试并保存好的内容

前两个步骤已经在上一篇文章中提到过，第三个步骤是你可能会一遍又一遍地重复，直到满意为止。

创造愿景

愿景可以是任何东西，例如，从关于单体的知情白皮书到复杂的交互式游戏。在本文中，我们将创建一个个人主页。是的，这个页面将完全围绕你、你喜欢的东西等等。

嘿，如果你不喜欢个人主页的想法，你可以随意提出你自己的想法。网页设计的重点应该是你的满意度。本文将提供框架。

绘制草图

对于这个网站，本文将演示如何创建具有易于识别的部分和功能的网页。多年来，人们已经习惯了某些东西，这就是我们在设计中将牢记的。

我们将创建一个 PC 浏览器网页，而不是智能手机网页。请记住，我们只是在初步尝试。以下是我们想要创建内容的草图：

是的，这确实只是一张手绘草图。我们可以使用 CAD 工具等，但在粗略勾勒设计时，这并非真正必要。

请注意，有三个区域：页眉 (header)、导航 (nav) 和内容 (content)。页眉位于页面顶部，导航栏沿左侧延伸，内容占据其余空间。内容的详细草图将在稍后给出。

尝试并保存好的内容

从现在开始，我们将进行编码、测试、评估和重复。欢迎来到编程世界。

首先，我们必须创建 HTML5 网页的最外层结构，所以请打开你的编辑器并输入以下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>My First Web Page</title>
        <style type="text/css">
            /* All the styling will go here */ 
        </style>
    </head>
    <body>
        <!-- All of the content will go here --> 
    </body>
</html>

你可以随意删除 body 和 style 元素中的注释。它们只是占位符。页面标题也可以是你喜欢的任何其他名称。

我们还没有决定需要多少页面，所以我们将暂缓任何决定，直到我们获得页面模型。

页眉、导航和内容

网上大部分网页由页眉、导航区域和内容组成。页眉不一定在顶部或跨越整个页面，导航也不一定在左侧。这是非常传统的设计。

HTML5 为网页的这些部分提供了语义化元素。

<header></header>
<nav></nav>

让我们将这两个元素放入我们的网页中，看看它的样子。

<body>
    <header></header>
    <nav></nav>
</body>

嗯，什么都没显示。页面是空白的！那么，我们从中了解到什么？我们发现语义化元素默认可能不显示任何内容。但是，我们有 CSS。所以，我们应该输入一些 CSS 定义来帮助。

在 style 元素中，输入以下内容：

    header {
        border: 1px solid blue;
        background-color: lightgray;
    }
    nav {
        border: 1px solid red;
        background-color: lightblue;
    }

现在我们已经为这两个元素定义了边框和背景颜色。在浏览器中重新加载网页，我们可以看到这些元素的位置。稍后，如果需要，我们可以去除边框和颜色。

不幸的是，你看到的是页面顶部的两条线。为了填充这些区域，我们需要内容。要快速扩展元素，请在页眉和导航内容区域输入一些文本。

<body>
    <header>Header</header>
    <nav>Navigation</nav>
</body>

现在当你重新加载网页时，你会在页眉元素中看到“Header”字样，在导航元素中看到“Navigation”字样。

成功！

但是导航元素紧挨着页眉元素下方，占据了整个浏览器窗口的宽度。我们需要将导航元素做得更窄。在你的 style 中为导航元素输入此内容：

    width: 120px;

重新加载页面，你将看到导航元素现在只有 120 像素宽。但是，你可能会问，高度呢？嗯，我们可以将其添加到 style 元素中的 nav 选择器：

    height: 100%;

这将确保导航部分随着网页内容而增长，而不是根据窗口大小。尽管如此，现在添加它是个好主意，所以继续输入吧。

标题

现在让我们处理页眉。在草图中，我们左边有一个图片，中间有文字，页眉右下角有一个较小的区域留给页面标题。现在，页面标题部分是为了显示我们在多页网站中的位置。我们将放置一些东西，以防万一我们需要它，并知道我们可以随时将其删除。

所以，我们有三个部分。嗯。我们如何将页眉空间分成这样？

首先，让我们尝试将一些内联元素放入页眉元素中。我们知道内联元素会从左到右堆叠，所以我们应该没问题。删除页眉部分中的“Header”一词，然后输入：

    <header>
        <img id="siteimage" src="somepicture.png" />
        <span id="sitename">My Vanity Page</span>
        <span id="sitepagetitle">Page Title</span>
    </header>

如果你需要图片，请使用这张图片 somepicture.png

重新加载页面。

嗯，这确实不是我们想要的，所以我们必须做些别的。

仔细观察草图，你应该会注意到图像在左边，网站标题在中间，页面标题在右边。我们真正需要做的是将这些东西分开，这样图片靠左，页面标题靠右，网站标题浮动在中间。

图片已经靠左了，但其他两部分需要处理。

我们需要稍微思考一下。:-( 显然我们需要 CSS 来实现这种布局，所以让我们看看 CSS 是如何工作的，然后我们可以确定我们需要做什么。

仅默认设置

在我们深入研究属性和模型的检查之前，我们应该先看看可以分配给任何 CSS 属性的两个默认值。

initial
inherit

级联样式表 (Cascading Style Sheets) 的“级联”操作始于浏览器。当浏览器显示网页时，它将使用一套默认值，有时称为定义表，用于字体、字号、颜色等。所有属性都有一个默认值，如果文档没有额外的样式信息，将使用这些默认值。

我们在上面创建页眉和导航元素时，看到了使用初始设置的作用。我们什么都没看到，因为这些元素默认没有边框和背景颜色。

然而，当这是期望的效果时，可以使用“initial”值在 CSS 文档中设置默认值。

<p style="color: red;">Initial settings are built into the browser, but
    they <em style="color: initial;">can be changed</em> with style sheets.</p>

在上面的示例中，color 属性被设置为整个段落的红色。但是，em 元素指定其颜色为“initial”，从而从浏览器的定义表中获取值。

一些元素的属性设置为其父元素中相应属性的值。这称为继承，这也是级联的工作方式。元素从其父元素继承许多属性，父元素又从它们的父元素继承，依此类推，直到我们达到浏览器中的初始设置。

参考上面的例子，如果 em 元素没有声明颜色为“initial”，那么它将从其父元素（在此示例中为段落）继承颜色（红色）。

但是，有些属性不被继承。CSS 没有规定所有属性都应该被继承，因此它提供了一个标准的属性值，可用于强制继承：值为“inherit”。

有了这些信息，让我们来看看 CSS 模型，W3C 称之为“盒子模型”。

盒子模型 (边框、轮廓、外边距、内边距)

CSS 基于“盒子模型”来制定布局和显示，通过定义外边距、边框、内边距和内容。下图演示了该模型：

内容位于盒子的最中心。围绕内容，我们看到三层。内边距是围绕内容的空白。边框紧挨着内边距的外面。外边距是最外层，包含围绕其他所有内容的空白。轮廓不是真正的层，但它可以像边框一样渲染在边框的外面。

这些层中的每一层都通过 CSS 属性来表示。每一层还可以细分为四个部分：顶部、右侧、底部、左侧。这样我们就有了顶边框、右外边距、左内边距等。这些层的默认值通常都为零，这意味着元素没有内边距、外边距或边框，除非另外指定。

实际宽度

CSS 属性width和height仅描述内容的宽度和高度，而不是其周围所有东西的。元素的实际尺寸包括内边距、边框宽度和外边距值。因此，当一个元素具有如下 CSS 定义时：

width: 200px;
height: 100px; 
border: 1px solid brown;      /* 1 pixel wide each side, solid line, color brown */
padding: 8px 8px 8px 8px;     /* 8 pixels padding each side */
margin: 3px 3px 3px 3px;      /* 3 pixels margin each side */

元素在浏览器页面上的实际宽度为 224px。你可以使用以下公式：

True width = 
    element width property +
    left padding + right padding +
    left border width + right border width +
    left margin + right margin

代入数字，得到：

224px = 
    200px +
    8px + 8px +
    1px + 1px +
    3px + 3px

我们不将轮廓包含在此计算中，因为轮廓不包含在任何尺寸计算中。它可以显示，但浏览器在确定尺寸和位置时会忽略它。

尺寸、定位、浮动、对齐

HTML5 文档中的元素按其在文档中的定义顺序显示。默认情况下，它们会从左到右、从上到下排列。块级元素会通过换行将其与前一个元素分隔开。内联元素会水平堆叠，当一行内容超出时，会移动到该行第一个元素下方。

因为块级元素是垂直堆叠的，所以它们默认会占据网页的整个宽度。它们的高度也根据其内容进行调整。

我们在网页中看到了这一点，但让我们看看我们可以做什么来改变它。

维度

CSS 元素的尺寸由其宽度和高度定义，这对应于称为“width”和“height”的 CSS 属性。这些属性的值定义了内边距内内容的宽度和高度（参照盒子模型）。

    nav {
        width: 120px;
        height: 100%;
    }

我们可以说，以百分比表示的值是相对值，而带有特定符号（如 px 或 em）的值是静态值。例如，我们的导航元素具有 120 像素的静态宽度和 100% 的相对高度。

定位

使用position属性的关键字值或定义元素顶部、底部、右侧或左侧位置的值，元素的定位也可以是相对的或静态的。

以下是 position 属性的值：

relative
absolute
static
fixed

Relative 定位将元素相对于其正常位置进行放置。添加“top: 25px;”之类的属性会将元素向下移动 25 像素，而不是它通常所在的位置。如果未定义 top、left、right 和 bottom 属性，则元素会按照 position 属性设置为“static”的方式进行定位。

Absolute 定位根据 left、top、right 和 bottom 属性的值将元素放置在页面的精确位置。此位置相对于元素的第一个非静态定位的祖先元素。

Static 定位是默认值。此属性值指示元素按照其在文档中的定义顺序显示。

Fixed 定位告诉浏览器将元素相对于浏览器放置。这意味着，例如，滚动不会影响该元素。

那么，我们的页眉部分呢？

没有指定，页眉内容被定位为静态元素。也许我们可以绝对定位它们。这肯定是有意义的，但当我们在不知道浏览器窗口宽度的情况下，中间和右侧的绝对位置究竟在哪里？

显然，绝对定位不是答案。

浮动和对齐

改变流动顺序的一种方法是为 float 属性设置一个值。告诉一个元素浮动会使其他元素围绕它流动，而 float 值指定元素如何被锚定。

例如，当我指定“float: left”时，这意味着元素将靠左对齐，并且文档中在它后面的元素将围绕该元素的右侧浮动。

好了，图片已经靠左对齐了，所以让我们尝试将页面标题浮动到右边：

    #sitepagetitle {
        float: right;
    }

这有所改进，但我们需要修复一些问题。首先，让我们将网站标题居中。现在，我们应该怎么做？

我们可以告诉页眉使用 text-align 属性将其文本对齐到中心。我们试试：

    <header>
        text-align: center;
        ...
    </header>

嗯。这绝对不是我们想要的。指定文本居中对齐也会影响 img 元素，因为它是一个内联元素。因此，我们无法像块级元素那样给它一个绝对位置。然而，如果我们将其浮动到左边：

    #siteimage {
        float: left;
    }

好了，这完全是个失败。我们必须找到一种方法将图像放在左边并保持页眉尺寸正确。看起来我们要么找到一种方法来居中文本网站名称，要么将 img 元素更改为块级元素。真是一团糟。也许如果我们只是给页眉设置尺寸……

     header {
        text-align: center;
        height: 60px;
        ...
    }

不错。我们强制页眉高度与图像高度匹配，但页面标题需要移到底部，并且网站标题的字体应该更大、更好看。

为了将页面标题文本移到底部，我们可以将 span 标签更改为 div 标签，然后从那里继续。内联元素在定位和对齐方面受到限制。因为 div 是块级元素，所以移动元素会更容易。

然后，因为我们要更改该 div 的位置，所以需要将页眉的位置属性值更改为“relative”。这是必要的，因为页眉的子元素必须在页眉的位置属性为“relative”的情况下才能正确进行定位。

完成这些之后，我们可以将页面标题 div 的 position 属性设置为“absolute”，然后将其固定在右下角。所以，让我们完成这些：

    <head>
        ...
            * {
                font-family: Segoe UI, Arial, sans; /* Changes font on all elements */
            }
            header {
                ...
                position: relative;      /* change this to fix page title position  */
            }
            ...
            #sitepagetitle {
                float: right;
                position: absolute;      /* this will anchor the page title div  */
                bottom: 0;               /* to the bottom-right corner of the    */
                right: 2px;              /* header element                       */
                font-size: small;        /* Make this less noticeable            */
            }
            ...
            #sitename {
                font-size: 24px;         /* Make this more noticeable            */
                font-weight: bold;
            }
    ...
        <header>
            ...
            <div id="sitepagetitle">Page Title</div>
        </header>

这很好，并且几乎与我们草图完全一致。一旦你在浏览器中看到这个，就去改变窗口的大小。无论窗口有多宽，页面标题文本始终会保持在右下角，图像始终会悬挂在左边，网站标题文本始终会悬挂在中间。

嗯，它并不是窗口的真正中间。因为 img 元素浮动在左边，所以文本居中的计算发生在图像右边缘（加上任何外边距）和窗口右边缘（减去任何内边距）之间。

绝对居中文本的一种方法是将其——仅此文本——放入一个块级元素中，并使该块级元素跨越页眉的宽度。以下是一种实现方法：

    <style type="text/css">
        ...
        #sitename {
            ...
            width: 100%;          /* keep it the width of the header */
            position: absolute;   /* by default, it will snap left   */
        }
    </style>
    <header>
        ...
        <div id="sitename">My Vanity Page</div>  /* change span to div */
        ...
    </header>

现在文本绝对是居中了。如果我们让 sitename div 的边框可见，你会看到它们占据了整个页眉元素的宽度。

也许下一步我们可以做的是制作一个导航菜单的模型。当导航栏是垂直元素时，最简单的制作方法是创建一个 ul 元素。

    <nav>
        <ul>
            <li>My Story</li>
            <li>Links</li>
            <li>Music</li>
            <li>Video</li>
        </ul>
    </nav>

是的，这看起来……还可以。在屏幕上看到这个布局后，似乎导航链接更好的解决方案是让它们在页眉下方水平排列。很多网站也是这样做的，所以我们不会做一些奇怪的事情。

首先，让我们去掉 nav 元素的宽度限制。我们可以直接删除该定义。既然我们在这里，我们也应该删除高度的规范。而且……请耐心等待……删除边框定义。CSS 定义中的 nav 选择器现在应该如下所示：

    nav {
        background-color: lightblue;
    }

刷新浏览器应该会显示如下：

显示

好了，没有画什么草图，我们可以轻松想象一排菜单项，以“我的故事”开始，然后是“链接”，等等。我们有一个列表，但它碰巧是垂直排序的。看起来我们可能需要一些新的东西，比如一排按钮。

嗯，我们可以保留 ul 元素，同时也可以有一排按钮。我们只需要用一些巧妙的 CSS 属性告诉浏览器如何显示列表。我们将使用的第一个属性是“display”。

display 属性告诉浏览器在显示元素时需要使用哪种类型的盒子。块级元素的 display 默认值为“block”。内联元素的 display 默认值为“inline”。但是，我们可以用 display 属性改变这一切。

这些是你最可能使用的常见值：

none
inline
block
inline-block

还有其他几个，但这四个应该涵盖了你所需要的一切。

none 值会完全从显示的网页中移除元素及其后代。它的作用类似于“visibility: hidden;”，但与 visibility 属性不同，所有子元素都会被移除，而不管它们的 display 或 visibility 设置如何。

将 display 设置为inline 会告诉浏览器像显示内联元素一样显示该元素，而不是块级元素。元素的内容与前面的元素内联放置，而不是整个盒子结构。

我们为导航输入的 ul 元素通常会显示每个 li 元素为一个块级项目。也就是说，每个 li 元素的内容会单独显示在一行。

但是，我们可以通过向 CSS 文档添加一个新定义来改变这种行为，使其在一行中排列：

    <style type="text/css">
        ...
        nav ul > li { 
            display: inline;
        }
        ...
    </style>

等等，有点不对劲。

选择器和特异性

当你定义 CSS 属性时，你是通过使用选择器将它们分配给元素的。选择器是左括号（'{'）前面的文本，它匹配元素。到目前为止，你已经看到了一种通过名称、id 值或 class 值匹配元素的方法。

CSS 还可以基于其他因素定位特定元素。以下是一些例子：

    li { display: inline; }          /* matches element type               */
    ul > li { display: inline; }     /* matches li children of ul elements */
    nav ul > li { display: inline; } /* matches li children of             */ 
                                     /* ul descendants of nav elements     */ 
    li,em { color: blue; }           /* matches li or em elements          */

我们有这么多方法来定位 CSS 中的元素，是因为我们有时需要更具体地定位。如果上面示例中的所有 CSS 选择器都使用了，那么浏览器只会使用其中一个来设置 display 属性。浏览器使用的规则由选择器的特异性决定。

通常，你越具体，浏览器选择你想要的规则的可能性就越大。此外，你可能不希望页面上的所有 li 元素都显示为内联元素，而只是导航中的那些元素。

现在，我们可以为导航元素中的所有 li 项目设置 class 属性为一个特定的值，然后将其用作类选择器，但使用“nav ul > li”更紧凑，也酷得多。

因此，有了文件中新的 CSS 定义，nav 元素看起来如下：

这样看起来好多了，但所有东西都挤在一起了。我分不清我应该有一个“我的故事”链接还是“我的故事链接”。我们需要在视觉上将它们区分开。让我们在它们之间留出一些空间，并使它们的颜色与背景不同。同时，我们也应该确保它们都具有相同的宽度。

    nav ul {
        margin: 0;
        padding: 0;                    /* remove all space around the ul and li bits */
    }
    nav ul > li {
        display: inline;               /* show li elements in left-right order       */
        background-color: #9DC8C6;     /* make the li elements a little darker       */
        padding: 4px;                  /* put some space around the li text          */
        text-align: center;            /* center the text so the spacing is even     */
        width: 80px;                   /* make them the same width                   */

    }

嗯，这几乎看起来是正确的。我们为 li 元素设置了宽度，从 ul 中移除了内边距和外边距，这样页眉和导航内容之间就不会有空间，我们居中了文本，但仍然有些地方不对。

li 元素的宽度不同，浅蓝色背景也不够高。所以，我们将尝试对 li 元素的 display 做另一件事。我们将 display 属性更改为“inline-block”。

    ...
    nav ul > li {
        display: inline-block;
        ...

inline 和 inline-block 之间的区别在于，“inline”渲染元素为一个内联元素，而“inline-block”渲染元素为一个块级元素。相似之处在于，使用“inline”或“inline-block”设置时，元素会作为内联元素显示。渲染操作构建对象，显示操作将其放置在特定位置。

现在它看起来真的很酷。我们只需要内容和页脚。内容稍后会出现，但我们可以轻松设置一个标准的页脚。

    <footer>My Vanity Page Copyright 2014, Me [9999 hits]</footer>

好吧，这看起来很糟糕。我们需要一种方法来格式化页脚中的信息并使其简单。

表格

表格是一种简单而有效的方法，可以在你不太关心精确测量时，将数据制成表格并格式化项目为列。

现在不要误会我的意思。我们可以用 CSS 很好地实现精确度，但如果你想快速完成某些事情，表格是获得简单格式的好方法。

<footer>
    <table> 
        <tr>
            <td>My Vanity Page</td> 
            <td>Copyright 2014, Me</td> 
            <td>[9999 hits]</td> 
        </tr> 
    </table> 
</footer>

嗯，它仍然看起来很糟糕，但我们可以快速用一些 CSS 来修复它：

    footer table {
        margin-top: 2em;
        width: 100%;
    }

table 元素会将其单元格均匀地分布在其宽度上。它还会继承其容器的文本对齐方式，在本例中就是默认的“left”。我们真正想做的是让左单元格的文本靠左，右单元格的文本靠右，中间文本居中。

我们只需要在一个地方使用它——页脚——并且每个三个单元格都需要不同的东西。我们这里要做的是为每个单元格分配一个唯一的 id 值，并在 CSS 中进行修复。

    #footleft {
        width: 25%;
        text-align: left;
    }
    #footcenter {
        text-align: center;
    } 
    #footright {
        width: 25%;
        text-align: right;
    } 
    ... 
     <tr>
        <td id="footleft">My Vanity Page</td> 
        <td id="footcenter">Copyright 2014, Me</td> 
        <td id="footright">[9999 hits]</td> 
    </tr> 
    ...

我们使用了“footleft”、“footright”和“footcenter”的 id 值。现在看起来很棒。它也能很好地重置尺寸：

我建议你现在将此文件另存为“vanity_template.html”。我们可以将它用作多个页面的模板文件。我们需要对导航和页脚中那个奇怪的点击计数器进行一些调整，但它基本上已经完成了。

你已经创建了你的第一个 HTML5 网页，其中包含大量 CSS。如果你没有按照文章的步骤进行，可以从这里复制全部代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>My First Web Page</title>
        <style type="text/css">
            * {
                font-family: Segoe UI, Arial, sans;
            }
            header {
                background-color: lightgray;
                text-align: center;
                height: 60px;
                position: relative;
            }
            nav {
                background-color: lightblue;
            }
            nav ul {
                margin: 0;
                padding: 0;
            }
            nav ul > li {
                display: inline-block;
                background-color: #9DC8C6;
                padding: 4px;
                text-align: center;
                width: 80px;
            }
            #sitepagetitle {
                float: right;
                position: absolute;
                bottom: 0;
                right: 2px;
                font-size: small;
            }
            #siteimage {
                float: left;
            }
            #sitename {
                font-size: 24px;
                font-weight: bold;
                width: 100%;
                position: absolute;
            }
            footer table {
                margin-top: 2em;
                width: 100%;
            }
            #footleft {
                width: 25%;
                text-align: left;
            }
            #footcenter {
                text-align: center;
            }
            #footright {
                width: 25%;
                text-align: right;
            }
        </style>
    </head>
    <body>
        <header>
            <img id="siteimage" src="somepicture.png" />
            <div id="sitename">My Vanity Page</div>
            <div id="sitepagetitle">Page Title</div>
        </header>
        <nav>
            <ul>
                <li>My Story</li>
                <li>Links</li>
                <li>Music</li>
                <li>Video</li>
            </ul>
        </nav>
        <footer>
            <table> 
                <tr>
                    <td id="footleft">My Vanity Page</td> 
                    <td id="footcenter">Copyright 2014, Me</td> 
                    <td id="footright">[9999 hits]</td> 
                </tr> 
            </table> 
        </footer> 
    </body>
</html>

摘要

在本章中，我们深入研究了创建实际网页的过程。我们经历了设计、测试、优化和重复的过程，直到我们敲定了一个看起来不错的文件。生成的代码相当简短，HTML5 部分也非常简洁。在下一篇文章中，我们将探讨如何在文档中添加一些音频和视频，以及一些很酷的 CSS 效果。

本系列中的其他文章

历史

2014-04-09：首次发布。