HTML5-和-CSS3-设计模式高级教程-四-HTML5 和 CSS3 设计模式高级教程（四）十六、表格列布局浏览

HTML5 和 CSS3 设计模式高级教程（四）

原文：Pro HTML5 and CSS3 Design Patterns

协议：CC BY-NC-SA 4.0

十六、表格列布局

浏览器有许多内置的功能来自动调整表格中列的大小。本章介绍了如何利用这些自动功能来包覆提取列、将它们调整到特定的宽度、按比例调整它们的大小、按内容比例调整它们的大小、均匀调整它们的大小、灵活调整它们的大小以及减小或增大它们的大小。

表格布局模型

有四种类型的表格:收缩表、大小表、拉伸表和固定表。每种类型的表格都有唯一的列布局，只有它可以创建。

包膜表格的主要用途是收缩列以适合其内容。调整大小或拉伸表格的主要目的是按比例划分各列的宽度。固定表格的主要用途是将其列设置为固定宽度，并加速表格的呈现。

收缩表格收缩以适应其内容。这为他们提供了收缩列以适应内容宽度的独特能力。收缩包装的表格可以比其容器更窄，并且不会扩展超过其容器的宽度。当您需要灵活的布局以适应不同的设备、屏幕分辨率和视口尺寸时，包膜表格是最佳选择。以下独特的布局适用于包膜表格:包膜列、大小列、内容大小相等的列和比例相反的列。

调整大小和拉伸的表格在它们的列之间按比例划分它们的宽度，同时确保没有列比它的内容窄。对列进行布局时，调整大小和拉伸的表格的工作方式完全相同。唯一的区别是，调整大小的表格可以比它的容器更窄或更宽，而拉伸的表格可以拉伸到它的容器的宽度。以下布局适用于拉伸表格:按内容比例的列、按大小比例的列、按百分比比例的列、等大小的列和弹性列。

固定桌子是尺寸或拉伸桌子的变体。它们可以调整大小或拉伸，但不能收缩。它们不同于调整大小和拉伸的表格，因为它们在对列进行布局时会忽略内容的宽度。这可以防止单元格内容对列宽产生任何影响。因为固定表格会忽略内容，所以它们的呈现速度比其他类型的表格快得多。对于收缩、调整大小和拉伸的表格，浏览器必须等待整个表格下载完毕，这样才能在开始呈现表格之前计算出每个单元格中内容的最小和最大宽度。一旦下载了第一行，就可以渐进地呈现固定表。固定表可以调整列的大小，使其比内容小，比表宽大。固定表对大列和小列有独特的支持。固定表格支持除按内容比例排列的列之外的所有按大小排列和拉伸的表格布局。这些布局包括大小成比例的列、百分比成比例的列、大小相等的列和伸缩列。

浏览器选择的布局算法类型取决于表格的类型和分配给其单元格的宽度的类型。换句话说，给一个单元格赋值auto、100px或20%会有很大的不同。不仅宽度不同，而且宽度的类型也不同:自动、固定或百分比。这些不同类型的宽度与表格类型相结合，导致浏览器使用不同的算法来调整列的大小。

分配给width的值auto创建一个自动宽度。分配给width的度量单位，如像素或 ems，创建一个固定宽度。分配给width的百分比，如 50%，创建一个百分比宽度。

最后，浏览器检查分配给所有行中同一列的所有单元格的width,以确定列宽和列宽的类型。在列宽设计模式中解释了浏览器如何协调同一列中不同的单元格宽度。此外，为不同的列分配不同类型的宽度会导致浏览器在同一个表格中使用多种布局算法。混合列布局设计模式中解释了浏览器如何组合列布局。

尽管浏览器会检查非固定表格中所有单元格的宽度来确定列宽，但您只需为第一行中的单元格指定一个宽度。

以下设计模式是通过将四种类型的表格与三种类型的宽度结合起来而创建的。

使用列布局

多年来，设计人员和开发人员一直使用许多自动的强大的列布局功能来布局非表格内容。事实上，这种广泛的使用促使浏览器厂商比任何其他功能都更注重增强这些功能。这也促使主要的浏览器供应商确保栏布局工作一致并且没有错误。

尽管您可以使用列布局来展示非表格数据，但我不推荐这样做，因为这会导致内容不易访问。

本章的目的是向您展示如何编排表格数据。表格数据需要样式和布局。本章中的每个例子都展示了如何使用浏览器内置的许多强大的自动算法来自动布局列。

章节大纲

列宽展示了当不同行的同一列中的单元格具有不同的宽度、不同类型的宽度、不同的最小内容宽度和不同的最大内容宽度时，浏览器如何计算列宽。这种模式适用于经过包膜、调整大小和拉伸的表格。
收缩列展示了如何收缩列以适合其内容的宽度。此模式适用于包膜表格。
调整列的大小展示了如何给列分配固定的宽度，同时保持表格的宽度在最小或最大值范围内。此模式适用于包络处理表或固定表。
内容成比例的列展示了如何自动地将表格的宽度按比例分配到它的列中。与内容较窄的列相比，内容较宽的列被分配较宽的宽度。这种模式适用于调整大小和拉伸的表格。当内容将其拉伸到容器的宽度时，它也适用于包膜表格。
大小成比例的列展示了如何自动将表格的宽度按比例分配给每一列的宽度到它的列中。在这种设计模式中，浏览器不一定要以指定的宽度呈现列。相反，它根据分配给其他列的宽度成比例地呈现一列。这种模式适用于按大小排列、拉伸和固定的表格。当指定的单元宽度将表格拉伸到其容器的宽度时，它也适用于收缩包装表格。
按百分比分配的列展示了如何将表格的宽度按比例分配给每列宽度的百分比。在这种设计模式中，浏览器不一定要按照表格宽度的指定百分比来呈现列。相反，它根据分配给其他列的百分比按比例呈现一列。这种模式适用于按大小排列、拉伸和固定的表格。 ** 反比列展示了如何根据内容的比例来调整列的大小。例如，单元格的大小可以是其内容宽度的两倍。此模式适用于包膜表格。* 相等内容大小的列展示了如何在相等地调整所有列的同时，自动将一个表格缩小到其最小宽度。换句话说，它将所有列设置为相同的宽度，同时使用最小的宽度来显示每个单元格的内容。它创建具有统一列的紧凑表。它最适用于包含数字和短文本的表格。此模式适用于包膜表格。* 大小相等的列展示了如何为每个单元格自动将表格的宽度分成相等的比例。这种模式适用于按大小排列、拉伸和固定的表格。* 尺寸过小的列展示了如何创建比其内容更窄的列。这种模式适用于固定表。* Flex Columns 展示了如何在固定宽度或百分比宽度的列旁边创建动态大小的列。这些列填充大小或百分比单元格未占据的空间。随着表格容器的增大或缩小，flex 列也会增大或缩小。这种模式在应用于拉伸的和固定的表时最有用，但也适用于调整大小的表。* 混合列布局展示了如何组合固定宽度、百分比宽度和自动宽度的列来创建额外的布局。它显示了浏览器如何根据表格是收缩、调整大小、拉伸还是固定来为固定宽度、百分比宽度和自动宽度列分配不同的优先级。*

*### 列宽

HTML

Column Width

Percentage widths trump fixed widths, which trump auto widths.

<**td class="a i">auto** <**td class="b i">75px** **** **** ****

auto	auto	auto	auto
auto	75px	75px	75px
auto	auto	150px	150px	150px
auto	auto	auto	10%	10%
auto	auto	auto	auto	50%

CSS

`.i { background-color:black; color:white; font-weight:bold; } .auto-layout { table-layout:auto; } .sized { width:700px; }

.a { width:auto; } .b { width:75px; } .c { width:150px; } .d { width:10%; } .e { width:50%; }

/* Nonessential styles are not shown */`

列宽

收缩圆柱

HTML

Shrinkwrapped Columns

auto

auto (less content - less width)

auto (extra content turns shrinkwrapped columns into content-proportioned columns)

CSS

`table { border-collapse:collapse; } td { overflow:hidden; }

.auto-layout { table-layout:auto; } .shrinkwrap { width:auto; }

/* Nonessential styles are not shown */`

收缩圆柱

调整大小的列

HTML

Sized Columns

Shrinkwrapped Table

200px

300px

Fixed Table

200px

300px

Maximum-width Sized Columns

200px

300px

Minimum-width Sized Columns

200px

300px

CSS

`.auto-layout { table-layout:auto; } .fixed-layout { table-layout:fixed; } .shrinkwrapped { width:auto; } .min-width1 { width:1px; } .min-width2 { width:700px; } .sized1 { width:200px; } .sized2 { width:300px; }

/* Nonessential styles are not shown */`

调整大小的列

内容比例栏

HTML

Content-Proportioned Columns

Sized Table

auto	auto (more content - more width)

Stretched Table

auto (same content - same width)

Shrinkwrapped Table

auto (less content - less width)

auto (extra content turns shrinkwrapped columns into content-proportioned columns)

CSS

`.auto-layout { table-layout:auto; } .fixed-layout { table-layout:fixed; } .sized { width:700px; } .stretched { width:100%; } .shrinkwrapped { width:auto; } .auto-width { width:auto; }

/* Nonessential styles are not shown */`

内容比例栏

大小匀称的柱子

HTML

Size-Proportioned Columns

Sized or Stretched Table

100px

300px

Shrinkwrapped Table

1000px

3000px

Fixed Table

100px

300px

CSS

`.auto-layout { table-layout:auto; } .fixed-layout { table-layout:fixed; } .sized { width:700px; } .stretched { width:100%; } .shrinkwrapped { width:auto; } .size1 { width:1000px; } .size2 { width:3000px; } .size3 { width:100px; } .size4 { width:300px; }

/* Nonessential styles are not shown */`

大小匀称的柱子

比例百分比列

HTML

Percentage-Proportioned Columns

Sized or Stretched Table

50%

20%

80%

20%

80%

20%

50%

CSS

`.auto-layout { table-layout:auto; } .fixed-layout { table-layout:fixed; } .sized { width:700px; } .stretched { width:100%; } .p1 { width:20%; } .p2 { width:80%; } .p3 { width:50%; }

/* Nonessential styles are not shown */`

比例百分比列

反比列

HTML

Inverse-proportioned Columns

Shrinkwrapped Table

20%

50%

CSS

`.auto-layout { table-layout:auto; } .shrinkwrapped { width:auto; }

.p1 { width:20%; } .p2 { width:50%; }

/* Nonessential styles are not shown */`

反比列

相等内容大小的列

HTML

Equal Content-Sized Columns

Shrinkwrapped Table

2=50%

50%

CSS

`.auto-layout { table-layout:auto; } .shrinkwrapped { width:auto; }

.p2 { width:50%; } /* 2 columns / .p3 { width:33.5%; } / 3 columns / .p4 { width:25%; } / 4 columns / .p5 { width:20%; } / 5 columns / .p6 { width:16.5%; } / 6 columns / .p7 { width:14.1%; } / 7 columns / .p8 { width:12.3%; } / 8 columns / .p9 { width:11%; } / 9 columns / .p10 { width:10%; } / 10 columns */

/* Nonessential styles are not shown */`

相等内容大小的列

大小相等的列

HTML

Sized, Stretched, or Fixed Table

<table class="auto-layout sized">

2=50% 50% `

CSS

`.auto-layout { table-layout:auto; } .fixed-layout { table-layout:fixed; } .sized { width:700px; } .stretched { width:100%; }

/* Nonessential styles are not shown */`

大小相等的列

过小的列

HTML

Undersized Columns

Fixed Table

18px

auto

Sized Table — cannot be undersized

18px

auto

CSS

`td { overflow:hidden; }

.fixed-layout { table-layout:fixed; } .auto-layout { table-layout:auto; }

.sized { width:700px; } .stretched { width:100%; }

.undersized { width:18px; } .flex { width:auto; }

/* Nonessential styles are not shown */`

过小的列

伸缩列

HTML

Flex Columns

Sized, Stretched, or Fixed Table

200px

20%

100px

auto flex

Sized or Stretched — Oversized

200px

20%

500px

auto flex

Fixed — Oversized

200px

20%

500px

auto flex

CSS

`.fixed-layout { table-layout:fixed; } .auto-layout { table-layout:auto; } .sized { width:700px; } .stretched { width:100%; } .flex { width:auto; } .sized1 { width:200px; } .sized2 { width:100px; } .sized3 { width:500px; } .p1 { width:20%; } .fixed-layout .p1{ padding:0; }

/* Nonessential styles are not shown */`

伸缩列

混合列布局

HTML

Mixed Column Layouts

Shrinkwrapped, Stretched, or Sized Tables

500px

10%

auto

500px

200px

40%

10%

auto

500px

200px

80%

20%

auto

Fixed Table

500px

200px

80%

20%

auto

CSS

`.fixed-layout { table-layout:fixed; } .auto-layout { table-layout:auto; } .shrinkwrapped { width:auto; } .stretched { width:100%; } .flex { width:auto; } .sized1 { width:500px; } .sized2 { width:200px; } .p1 { width:10%; } .p2 { width:20%; } .p3 { width:40%; } .p4 { width:80%; } .fixed-layout .p2 { padding:0; }

/* Nonessential styles are not shown */`

混合列布局

十七、布局

本章展示了如何创建流畅的布局，它可以自动适应不同的设备、字体、宽度和缩放因子。这些设计模式是可访问的、模块化的、易于定制的。动态模式使用开源 JavaScript 库将事件处理程序附加到元素上。这允许您创建动态效果，而无需在文档中添加一行 JavaScript 代码！这些库使用 CSS 选择器来决定处理哪些元素来响应事件，它们可以修改元素的 class 属性，这样样式表就可以完全控制事件如何动态地样式化元素。

章节大纲

流体布局概述探讨创建流体布局时的问题和解决方案。
Outside-in Box 展示了如何调整一个盒子的外宽而不是内宽的大小。
浮动部分展示了如何使用流体布局来渲染列中的部分。
浮动分割器展示了如何可预测地分离和整合浮动和内容。
流体布局展示了如何创建自动适应任何显示的布局。
反向浮动展示了如何将内容移动到容器的两侧。
事件样式展示了如何将事件分配给元素，而无需在文档中添加代码。它展示了事件如何修改类来改变元素的样式。
Rollup 展示了如何通过鼠标点击来折叠和打开部分。
标签菜单展示了如何创建一个标签界面，当点击时加载新页面。
Tabs 展示了如何创建一个选项卡式的界面，当用户点击一个选项卡时，该界面可以动态地将内容切换进和切换出显示屏，而无需加载新的页面。
弹出菜单展示了如何创建一个点击或悬停时打开的菜单。
Button 展示了如何使用 JavaScript 创建按钮并处理它们的事件。
布局链接展示了如何使用链接作为布局的一部分，比如面包屑。
多栏展示了如何在多栏中分发内容。
模板展示了如何使用字母字符和位置属性定义位置。
布局示例展示了如何组合和扩展这些设计模式。

流体布局概述

HTML

Fluid Layout Overview

Navigation

20% of container's width.

Main

40% of container's width.

News

20% of container's width.

CSS

`body { max-width:1000px; margin-left:auto; margin-right:auto; }

div { background-color:gold; margin-right:10px; padding:5px; border-left:1px solid gray; border-right:2px solid black; border-top:1px solid gray; border-bottom:2px solid black; }

#nav { float:left; width:20%; min-width:170px; } #main { float:left; width:40%; min-width:170px; } #news { float:left; width:20%; min-width:170px; }

/* Nonessential rules are not shown. */`

流体布局概述

由外向内框

HTML

Outside-in Box

Before

Float

Absolute

Static

After

Float

Absolute

Static

CSS

。{宽度:100%之前；保证金:5px 填充:5px 边框:5px 纯黑；}

`.after { width:100%; } .after .oi { margin:5px; padding:5px; border:5px solid black; display:block; }

.float { float:left; } .absolute { position:absolute; } .static { position:static; }

/* Nonessential rules are not shown. */`

由外向内框

HTML

Outside-in vs. Inside-out Design

Two floats with 50% width and no margins, borders, or padding

Float1

Float2

Two floats with 50% width and 1px border

Float1

Float2

Two floats with 45% width and 5% left margin

Float1

Float2

Two floats with 49.5% width and 5px left margin

Float1

Float2

CSS

`body { max-width:1200px; } div { min-width:100px; }

.ex1 { float:left; width:50%; } .ex2 { float:left; width:50%; border:1px solid; } .ex3 { float:left; width:45%; margin-left:5%; } .ex4 { float:left; width:49.5%; margin-left:5px; }

/* Nonessential rules are not shown. */`

由外向内与由内向外设计

流体布局从外向内设计。这是因为您从视口的宽度开始，并使用百分比、最小宽度和最大宽度在元素之间划分其宽度。

问题是width属性设置了元素的内部宽度。填充、边框和边距围绕元素的内部宽度，从而增加其外部宽度*。因为 CSS 没有 outer-width 属性，所以 CSS 要求你从里面的到外面的进行设计。结果是边距、边框和填充会破坏流畅的布局设计。*

*例如，您可能想要将两个元素浮动到左侧，并将每个元素分配给width:50%，以便它们并排放置，并平均分配视口的宽度。示例中的前两个部分展示了这是如何工作的。无论您如何调整视口的大小，这些元素都会并排放置(直到它们的最小宽度不再允许它们适合视口的宽度)。

如果您给这两个并排的浮动分配任何边距、边框和填充，浮动将不再适合视窗的宽度。例如，如果在每个元素周围指定一个 1 像素的边框，则它们的总外部宽度会超出视口宽度 4 个像素(每个元素的左侧和右侧各 1 个像素)。当浮动不能并排放入它们的容器时，它们会换行到下一行。这不是你想要的！示例中的第二组划分显示了一个微小的 1 像素边框如何打破流体布局。无论你如何调整视窗大小，浮动将而不是并排。

要将两个元素的边距、边框和填充放入它们的容器中，必须减少每个元素的百分比宽度，但是减少多少呢？如果为边距和填充指定百分比，只需从指定给宽度的百分比中减去它们各自的百分比。例如，如果为两个元素各指定 5%的左边距，则可以为每个元素指定 45%的宽度。示例中的第三组划分证明了这一点。无论您如何调整视口的大小，这些元素都将并排放置(直到它们的最小宽度使它们无法适应视口)。

根据 CSS 规范，浏览器会忽略分配给边框的百分比，这意味着您必须使用固定的度量来创建边框。为边距和填充指定百分比也不常见，因为边距和填充不随视口调整大小时通常看起来更好。您可以调整示例的大小，以对比百分比边距和固定边距的行为。

在流体布局中，给元素分配固定的边距、边框和填充与分配给其width的百分比不兼容。随着视口缩小，百分比会缩小元素的宽度，但其固定的边距、边框和填充不会缩小。例如，假设视窗宽度为 1000 像素，包含两个并排的子元素，每个子元素的左边距为 5 像素，则可用宽度为 990 像素，即 99%，即(1000 px–5px–5px)/1000 px。如果你要在两个元素之间平均分配，你可以给每个元素分配width:49.5%。给定 100 像素的视口宽度，可用宽度为 90 像素，即 90%，即(100 像素–5px–5px)/100 像素。为了在两个元素之间平均分配，你可以给每个元素分配width:45%。因此，将固定的边距、边框和填充与百分比宽度混合在一起在流体布局中不起作用。在本例中，第四组分割设置为 49.5%，左边距设置为 5 个像素。这张截图是以 750 像素的宽度拍摄的，宽度不足以让它们并排放置；但是如果你把浏览器窗口放大到 1000 像素或者更多，它们就合适了。

请注意，Internet Explorer 7 和早期版本并不完全遵守规则。当浮动两个设置为width:50%的元素时，Internet Explorer 猜测您希望它们并排，所以它打破规则，将它们并排放置。所有其他主流浏览器都运行正常。此外，Internet Explorer 6 有错误，有时会导致浮动而不是被并排放置。例如，在第三组划分中，Internet Explorer 6 将第二个浮动移动到第一个之下。Internet Explorer 7 修复了这些错误。

由外向内的设计模式解决了所有这些问题(包括 Internet Explorer 的问题)。因此，这是创建流畅布局的基本设计模式。另一种方法是在百分比上努力，直到你找到在大多数浏览器上都能工作的东西，并且在大多数时候看起来接近你想要的。

浮动节

HTML

Floating Section

Navigation Section

25% of container's width.

Main Section

75% of container's width minus 80-pixel left margin, 1-pixel left border, 2-pixel left border, and 80-pixel left padding.

CSS

`.oi { background-color:gold; border-left:1px solid gray; border-right:2px solid black; border-top:1px solid gray; border-bottom:2px solid black; }

#nav { float:left; width:25%; min-width:170px; } #nav .oi { min-height:150px; margin:0; padding:5px; }

#main { float:left; width:75%; min-width:170px; } #main .oi { min-height:150px; margin-left:80px; padding:5px; padding-left:80px; }

/* Nonessential rules are not shown. */`

浮动节

浮动分频器

HTML

Float Divider

First Row of Floats

Float 1

Float 2

Float 3

Second Row of Floats

Float 4

Float 5

Float 6

CSS

`.float { float:left; }

.float-divider { clear:both; height:20px; margin-bottom:20px; border-bottom:5px solid black; font-size:1px; line-height:1px; }

/* Nonessential rules are not shown. */`

浮动分频器

流体布局

HTML

Fluid Layout

main - 100%

nav - 20%

content - 60%

head - 35% detail - 65%

news - 20%

CSS

`.float-divider { clear:both; display:block; height:1px; font-size:1px; line-height:1px; } .oi1 { background-color:white; margin:0; padding:5px; } .oi2 { background-color:gold; margin:5px; padding:5px; } .oi3 { background-color:yellow; margin:5px; padding:5px; }

#main { max-width:700px; } #nav { float:left; width:20%; min-width:75px; } #content { float:left; width:60%; min-width:150px; } #news { float:left; width:20%; min-width:115px; } #nav .oi2 { min-height:43px; } #content .oi3 { display:block; } #head { float:left; width:35%; min-width:75px; } #detail { float:left; width:65%; min-width:75px; }

/* Nonessential rules are not shown. */`

流体布局

对立浮动

HTML

<h1 id="title">Opposing Floats <div id="search">

Search:

This right float shrinks no smaller than its minimum width and grows no larger than its maximum width.

**Home » Floating Layout

**Postheader message 1

<p class="breadcrumbs">Home » Floating Layout

<p class="post-msg">Postheader message 2

CSS

`.float-divider { clear:both; display:block; height:1px; font-size:1px; line-height:1px; }

.breadcrumbs { float:left; max-width:350px; margin-left:10px; } .post-msg { float:right; max-width:350px; margin-right:10px; }

#title { float:left; min-width:280px; max-width:350px; margin-left:0; } #search { float:right; min-width:280px; max-width:350px; margin-right:0; }

/* Nonessential rules are not shown. */`

对立浮动

事件造型

HTML

页. js

$(document).ready(function(e){ $('.rollup-trigger').click(function(e){ $(this).closest('.rollup').children().not('.rollup-trigger').toggleClass('hidden'); $(this).parent().removeClass('hidden'); }); });

活动风格

HTML

Rollup

Main

<div class="oi rollup"> <h3 class="rollup-trigger">FAQ Don't roll me up. <dl class="rollup"> <dt class="rollup-trigger">QUESTION: How do rollups work? <dd class="hidden">ANSWER: When the user clicks on a heading or button, the content rolls up or down.

<span class="rollup-trigger"> List

list item 1
list item 2

<span class="rollup-trigger"> Roll me up

CSS

`.rollup-trigger { cursor:pointer; } .rollup-trigger:hover { color:firebrick; }

span.rollup-trigger { font-size:0.65em; padding-left:8px; background:url("hide.gif") no-repeat left top; }

span.rolledup { background:url("show.gif") no-repeat left top; }

.hidden { position:absolute; top:-99999px; left:-99999px; width:1px; height:1px; overflow:hidden; }

/* Nonessential rules are not shown. */`

HTML 标题

页. js

Tab 菜单

HTML

Tab Menu

**
Tab 1
Tab 2
Tab 3
Tab 4

Tab 1 content: A click on one of these tabs loads a new page.

CSS

`ul.tabs a:link, ul.tabs a:visited, ul.tabs a:active { text-decoration:none; color:maroon; } ul.tabs a:hover { text-decoration:underline; color:black; } ul.tabs a { display:block; }

ul.tabs { float:left; width:100%; padding:0; margin:0; border-bottom:1px solid gold; margin-bottom:10px; }

ul.tabs li { float:left; width:25%; list-style-type:none; }

ul.tabs .tab-label { border:1px solid gold; margin:0; cursor:pointer; padding-bottom:2px; padding-top:2px; background:white url("g1.jpg") repeat-x left bottom; font-weight:normal; text-align:center; font-size:1.1em; }

ul.tabs li.selected .tab-label { position:relative; border-bottom:none; top:1px; padding-bottom:4px; padding-top:5px; border-top:2px solid gold; margin-top:-5px; background:white url("g2.jpg") repeat-x left top; font-weight:bold; }

#main { border:1px solid gold; border-top:none; }`

Tab 菜单

HTML(为方便起见，再次显示相同的代码)

Tab Menu

**
Tab 1
Tab 2
Tab 3
Tab 4

Tab 1 content: A click on one of these tabs loads a new page.

CSS(为方便起见，再次显示相同的代码)

`ul.tabs a:link, ul.tabs a:visited, ul.tabs a:active { text-decoration:none; color:maroon; } ul.tabs a:hover, ul.tabs a:focus { text-decoration:underline; color:black; } ul.tabs a { display:block; }

ul.tabs { float:left; width:100%; padding:0; margin:0; border-bottom:1px solid gold; margin-bottom:10px; }

ul.tabs li { float:left; width:25%; list-style-type:none; }

ul.tabs .tab-label { border: 1px solid gold; margin:0; cursor:pointer; padding-bottom:2px; padding-top:2px; background:white url("g1.jpg") repeat-x left bottom; font-weight:normal; text-align:center; font-size:1.1em; }

ul.tabs li.selected .tab-label { position:relative; border-bottom:none; top:1px; padding-bottom:4px; cursor:auto; padding-top:5px; border-top:2px solid gold; margin-top:-5px; background:white url("g2.jpg") repeat-x left top; font-weight:bold; }

#main { border:1px solid gold; border-top:none; }`

选项卡

HTML

Tabs

Tab 1


Tab 1 Content
This is the message of tab 1. More message...

Tab 2
<div id="section2" class="tab-content"><div class="oi2">
Tab 2 Content
This is the message of tab 2.

CSS

`/* All rules from the Tab Menu design pattern apply to Tabs. Only additional rules that apply to this design pattern are shown here. */

ul.tabs { position:relative; }

ul.tabs .tab-content { position:absolute; width:100%; height:6em; border:1px solid gold; border-top:none; left:-99999px; overflow:auto; }

ul.tabs li**.selected** .tab-content { left:0; }

ul.tabs li .oi2 { margin:10px; padding:10px; }

ul.tabs .tab-label a { display:block; text-decoration:none; color:black; }

ul.tabs .hover, ul.tabs .tab-label:hover { text-decoration:underline; }

/* Nonessential rules are not shown. */`

选项卡

HTML 标题

页. js

$(document).ready(function(e){ $('ul.tabs li').click(function(e){ $('ul.tabs li.selected').removeClass('selected'); $(this).addClass('selected'); }); $('ul.tabs li .tab-label').mouseover(function(e){ $(this).addClass('hover'); }); $('ul.tabs li .tab-label').mouseout(function(e){ $(this).removeClass('hover'); }); $('ul.tabs .tab-label a').click(function(e){ e.preventDefault(); $(this).blur(); }); });

弹出菜单

HTML

**<div class="menu"><h3>Dropdown</h3>** **<ul class="dropdown hidden">** **<li><a href="#">menu item</a></li>** <li **class="separator"**><a href="#">menu item</a></li> <li **class="flyout-trigger"><h4>submenu</h4>** **<ul class="submenu hidden">** <li><img src="award.gif" alt="award" /><a href="#">menu item</a></li> <li><a href="#">menu item</a></li></ul></li></ul></div>

CSS

`.menu { float:left; position:relative; z-index:1; cursor:pointer; font-size:0.8em; white-space:nowrap; } .menu a { text-decoration:none; color:black; }

.menu h3 { float:left; margin:0; padding:1px 5px; background:url("g1.jpg") repeat-x left bottom white; } .menu h4 { display:inline; margin:0; } .menu ul { position:absolute; margin:0; padding:0; padding-bottom:5px; background:url("g3.jpg") repeat-x left bottom white; }

.menu li { margin:0; padding:2px 25px; list-style-type:none; color:black; } .menu li img { margin-left:-22px; padding-right:5px; } .menu li.separator { margin-top:5px; border-top:1px solid gray; padding-top:5px; } .menu li.flyout-trigger { background:url("flyout1.gif") no-repeat right center; } .menu li.flyout-trigger.hover { background:url("flyout2.gif") no-repeat right center firebrick; } .menu h3.hover { background:url("g2.jpg") repeat-x left top white; } .menu li.hover { background-color:firebrick; color:white; } .menu li.hover > a { color:white; } .menu ul.dropdown { top:100%; clear:left; } .menu ul.submenu { left:100%; margin-top:-1.5em; margin-left:-0.3em; } .menu .hidden { left:-99999px; top:-99999px; } .menu h3,.menu ul { border-left:1px solid yellow; border-right:1px solid orange; border-top:1px solid yellow; border-bottom:1px solid orange; }

/* Nonessential rules are not shown. */`

弹出菜单

HTML 标题

页. js

$(document).ready(function(e){ $('.menu').click(function(e){ $('.dropdown', $(this)).toggleClass('hidden'); }); $('.menu').mouseover(function(e){ $('.dropdown', $(this)).removeClass('hidden'); }); $('.menu').mouseout(function(e){ $('.dropdown', $(this)).addClass('hidden'); }); $('.menu li, .menu h3').mouseover(function(e){ $(this).addClass('hover'); }); $('.menu li, .menu h3').mouseout(function(e){ $(this).removeClass('hover'); }); $('.menu li.flyout-trigger').mouseover(function(e){ $('> .submenu', $(this)).removeClass('hidden'); }); $('.menu li.flyout-trigger').mouseout(function(e){ $('> .submenu', $(this)).addClass('hidden'); }); });

按钮

HTML

Button

Change Me! Link`

CSS

`form { margin:20px 0; } .button { margin:0; padding:3px 10px; font-size:1em; color:black; cursor:pointer; background:url("g1.jpg") repeat-x left bottom; border-left:1px solid yellow; border-right:1px solid orange; border-top:1px solid yellow; border-bottom:1px solid orange; }

.button:hover, .button.hover { background:url("g2.jpg") repeat-x left top; border-left:1px solid orange; border-right:1px solid yellow; border-top:1px solid orange; border-bottom:1px solid yellow; }

a.button { padding:5px 10px; line-height:2em; text-decoration:none; }

#submit2 { width:32px; height:32px; border:none; cursor:pointer; background:url("go.jpg") no-repeat left top; } #submit2:hover, #submit2.hover { background-position:1px 1px; }`

按钮

HTML 标题

页. js

$(document).ready(function(e){ $('#form1').submit(function(e){ if(!confirm('Are you sure?')){e.preventDefault();} }); $('#message').click(function(e){ alert('Hi There'); }); $('#button').click(function(e){ alert('Hi There'); }); $('#link').click(function(e){ if(!confirm('Jump here?')){e.preventDefault();} }); $('#change').click(function(e){ try{ var result = prompt('Enter content:', $(this).text() ); if ( result ) $(this).text( result ); }catch(ex){ e.preventDefault(); } }); $('#submit4').click(function(e){ $('#form1').submit(); }); $('#reset2').click(function(e){ $('#form1').reset(); }); }); }); Button (Continued)

布局链接

HTML

Layout Links

<div id="preheader"><a class="skiplink" href="#main">Skip to main content <div id="header">

header

Home » Layout Links » Breadcrumbs <**span class="sequential"**> « Previous | Next »

body

Main content goes here. <**a class="outlink"** href="#">External Link

»** More Info

footer **Topˆ

CSS

`a:link, a:visited, a:active { text-decoration:none; color:maroon; } a:hover { color:black; text-decoration:underline; }

.morelink { font-size:0.8em; font-weight:bold; text-align:right; } .toplink { font-size:0.7em; font-weight:normal; vertical-align:top; } .outlink { padding-right:15px; font-style:italic; background:url("external.gif") no-repeat top right; }

/* Nonessential rules are not shown. */`

布局链接

多栏布局

HTML

Multi-column Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin posuere mauris sed in ...

CSS

`.multi { column-count:3; -moz-column-count:3; -webkit-column-count:3; -ms-column-count:3; }

/* Nonessential rules are not shown. */`

多栏布局

模板布局

HTML

Template Layout

Apple

Bear

Castle

Deer

CSS

`#template { display: “ab” “cd” 20% * 20%; } #d { position: a; } #c { position: b; } #b { position: c; } #a { position: d; }

/* Nonessential rules are not shown. */`

模板布局

布局示例

HTML 结构元素

Layout Example

Search:

Site Map

Links

News

About us

CSS 结构样式

#preheader .part1 { float:left; margin-left:10px; } #preheader .part2 { float:right; margin-right:10px; } #header { float:left; width:100%; } #title { float:left; width:50%; margin-top:7px; } #search { float:right; margin-top:2px; } #postheader .breadcrumbs { float:left; margin-left:10px; } #postheader .sequential { float:right; margin-right:10px; } #body { float:left; width:100%; } #nav { float:left; width:25%; min-width:160px; } #main { float:left; width:50%; min-width:300px; } #extras { float:left; width:25%; min-width:160px; } #footer { clear:both; padding-top:40px; }

布局示例

在狭窄视窗中显示的布局示例，显示时没有样式表

十八、首字下沉

本章讨论创建首字下沉的设计模式。首字下沉极大地改变了文档第一个字母的样式，以表示它是文档的开始。有时它用在较长文件的主要部分的开头。有时它会设计一个单词的样式，而不仅仅是第一个字母。

通常，首字下沉会放大并降低第一个字母，以便字母的顶部与后面文本的顶部对齐，但是首字下沉的样式没有限制。

本章中的设计模式是按照从最简单到最复杂的顺序组织的。

章节大纲

对齐首字下沉展示了如何通过放大和垂直对齐来创建一个简单的首字下沉。
首字母首字下沉展示了如何在不插入额外标记的情况下创建首字下沉。
悬挂首字下沉展示了如何使用悬挂缩进来创建首字下沉。
填充的图形首字下沉展示了如何给首字下沉添加左填充，以便为显示横幅、抓图或装饰的背景图像腾出空间。
浮动首字下沉展示了如何将首字下沉浮动到左侧，这样首字下沉下方的文本会在首字下沉下方换行。
浮动图形首字下沉展示了如何在首字下沉文本上显示图形。它非常适合屏幕阅读器，当图像不可用时，它显示首字下沉的样式文本版本。这是允许首字下沉下方的文本在首字下沉下方换行的最佳图形首字下沉设计模式。
首字下沉展示了如何使用绝对定位将首字下沉移动到块的左边界。块的所有行都缩进。
显示了如何在首字下沉文本上显示一个图形。它非常适合屏幕阅读器，当图像不可用时，它显示首字下沉的样式文本版本。这是防止首字下沉下方的文本在首字下沉下方换行的最佳图形首字下沉设计模式。

对齐首字下沉

HTML

`**

A**ligned Drop Cap Variation 1. Text is large, bold, and aligned at the baseline. Subsequent lines are not indented.

A**ligned Drop Cap Variation 2. The drop cap is aligned to the middle of the text. Subsequent lines are not indented. The drop cap pushes down the second line a little bit.

A**ligned Drop Cap Variation 3. The drop cap is offset to the top of the text. Subsequent lines are not indented. The drop cap pushes down the second line quite a bit.

CSS

`.aligned-dropcap1 { font-size:40px; line-height:normal; font-weight:bold; ** vertical-align:baseline;** }

.aligned-dropcap2 { font-size:40px; line-height:0.8em; font-weight:bold; vertical-align:middle; background-color:gold; padding:0 2px; }

.aligned-dropcap3 { font-size:40px; line-height:normal; font-weight:bold; font-style:italic; vertical-align:-0.45em; color:white; background-color:black; background-image:url("marble.jpg"); padding:0 4px; border:1px solid black; }`

对齐首字下沉

首字母首字下沉

HTML

first-letter can create an aligned drop cap. The problem is that browsers have a hard time aligning pseudo elements.

first-letter can be used to create a floating drop cap. The problem is that the drop cap cannot be positioned up or down.

**first-letter can be used to create a hanging drop cap in the margin. The drop cap can even be replaced by a background image. The problem is that the drop cap cannot be positioned up or down.

CSS

`.dropcap1:first-letter { font-size:60px; vertical-align:0px; font-weight:bold; }

.dropcap2:first-letter { float:left; margin-left:-3px; margin-right:3px; position:relative; top:-2000px; / DOES NOT WORK / font-size:60px; line-height:normal; font-weight:bold; }

.dropcap3 { padding-left:105px; text-indent:-104px; margin-top:50px; }

.dropcap3:first-letter { padding:40px 50px; font-size:1px; line-height:1px; color:white; background-image:url("f.jpg"); background-position:center center; }`

首字母首字下沉

挂落帽

HTML

**<p class="hanging-indent"><span class="hanging-dropcap">H</span>anging** Drop Cap. This drop cap hangs in the margin. No text flows back under the backdrop when it flows past the bottom of the drop cap. The drop cap can be lowered and raised without affecting the line height. Using <code>top</code> and <code>left</code>, you can adjust the position of the drop cap and the position of the text next to the drop cap.</p>

CSS

`.hanging-indent { padding-left:50px; text-indent:-50px; margin-top:-25px; }

.hanging-dropcap { position:relative; top:0.55em; left:-3px; font-size:60px; line-height:60px; font-weight:bold; }`

挂落帽

带衬垫的图形首字下沉

HTML

Padded Drop Cap

Padded Aligned Drop Cap. Text is large, bold, and aligned at the baseline. Subsequent lines are not indented.

Padded Floating Drop Cap. The drop cap is floated to the left and then offset to the right using padding-left. It has a background image rendered in the padding area. Subsequent lines are indented for as long as the drop cap is on their left.

CSS

`.padded-dropcap1 { padding-left:39%; font-size:80px; line-height:normal; font-weight:bold; vertical-align:middle; background:url("rose.jpg") no-repeat -65px 0 white; }

.padded-dropcap2 { padding-left:275px; padding-right:10px; float:left; position:relative; top:-0.25em; margin-bottom:-0.2em; margin-left:-3px; margin-right:3px; color:black; background:url("grabber.jpg") no-repeat 5px 20px white; font-size:84px; line-height:normal; font-weight:bold; }`

带衬垫的图形首字下沉

浮动落帽

HTML

Floating Drop Cap

**F**loated Drop Cap Variation 1\. This drop cap is lowered without affecting the height of the line. Using top, margin-left, margin-right, and margin-bottom, you can adjust the position of the drop cap and the position of the text next to the drop cap.

**F**loated Drop Cap Variation 2. Notice how the drop cap has been moved up and to the right, and the text has moved to the right.

CSS

`.floating-dropcap1 { float:left; position:relative; top:-0.25em; margin-left:-3px; margin-right:3px; margin-bottom:-0.6em; font-size:80px; line-height:normal; font-weight:bold; }

.floating-dropcap2 { float:left; position:relative; top:-0.35em; margin-left:20px; margin-right:5px; margin-bottom:-0.7em; font-size:80px; line-height:normal; font-weight:bold; color:white; background-color:black; padding:0 20px; background-image:url("marble.jpg"); border-left:2px groove black; border-right:2px ridge black; border-top:2px groove black; border-bottom:2px ridge black; }`

浮动落帽

浮动图形首字下沉

HTML

Floating Graphical Drop Cap

F**loating Graphical Drop Cap. The letter F has been covered by the dropcap image. Screen readers read the text and visual users see the image. If the browser cannot display the dropcap image, the text becomes visible. The text can be styled so that it looks good if it ever becomes visible. Because the drop cap is floated, the text wraps around the bottom of the drop cap when it clears the drop cap's bottom margin.

CSS

`.floating-dropcap { float:left; position:relative; top:5px; margin-left:80px; margin-right:12px; margin-bottom:0px; width:100px; height:90px; line-height:80px; text-align:right; font-size:100px; font-weight:bold; color:black; background-color:white; }

.floating-dropcap span { position:absolute; ** width:100px; height:90px; left:0; top:0; margin:0;** ** background-image:url("f.jpg");** ** background-repeat:no-repeat; }**`

浮动图形首字下沉

边际落差

HTML

Marginal Drop Cap

M**arginal Drop Cap. The marginal drop cap indents the text to the right and uses absolute positioning to move the drop cap into the margin created by the indent. All text stays to the right of the drop cap. In other words, text does not wrap back under the drop cap when it extends below the drop cap.

CSS

`.indent { position:relative; margin-left:72px; margin-top:20px; }

.marginal-dropcap { position:absolute; left:-77px; top:-16px; font-size:80px; font-weight:bold; color:black; background-color:white; }`

边际落差

边缘图形首字下沉

HTML

<h1>Marginal Graphical Drop Cap</h1> **<p class="indent"><span class="graphic-dropcap">M<span>arginal** Graphical Drop Cap. The letter M has been covered by the dropcap image. Screen readers read the text and visual users see the image. If the browser cannot display the dropcap image, the text becomes visible.</p>

CSS

`.indent { position:relative; margin-left:120px; margin-top:20px; }

.graphic-dropcap { position:absolute; left:-120px; top:6px; ** width:100px; height:90px;** ** line-height:70px; padding-left:16px; text-align:right;** font-size:80px; font-weight:bold; color:black; background-color:white; }

.graphic-dropcap span { position:absolute; ** width:100px; height:90px; left:0; top:0; margin:0;** ** background-image:url("g.jpg");** ** background-repeat:no-repeat; }**`

边缘图形首字下沉

当浏览器无法加载或显示图像时，边缘图形首字下沉示例是什么样子的

十九、标注和引用

本章讨论创建标注和引用的设计模式。

标注是从文档中抽出的关键点，用来吸引读者的注意力，以便他或她阅读文档并在阅读后记住该点。标注在文档中重复两次:一次作为文档正文的一部分，另一次作为标注显示。标注会突出显示，这样读者就不会错过。因为标注是从文档的文本中提取的，所以它通常是一个行内元素，尽管它也可能是一个块元素。

我将标注和引用组合在一起，因为它们密切相关。标注也称为引用引用，因为它们是从文档中提取的引用。拉报价和报价是有区别的。引用(或标注)要求同一文本在一个文档中重复两次，而引用只出现一次。此外，一个报价通常包括引用，而拉报价没有。最后，引用在视觉上和语义上属于内容的一部分，而标注在视觉上和语义上与内容分开，并且通常被移动到文档的左侧或右侧或边缘。在本章的其余部分，我将把引用称为标注，以避免与常规引用混淆。

章节大纲

左侧浮动标注展示了如何创建一个标注并将其浮动到左侧。
右浮动标注展示了如何创建一个标注并将其向右浮动。
居中标注展示了如何创建标注并将其居中。
左边距标注展示了如何使用左边距设计模式在左边距创建标注。
右边距标注展示了如何使用右边距设计模式在右边距创建标注。
Block Quote 展示了如何创建一个引用自动居中并带有图形背景引用样式的 Block Quote。
内联块报价展示了如何将内联报价呈现为块报价。
内嵌引用展示了如何创建带有引用的内嵌引用。

左浮动标注

HTML

Left Floating Callout

A callout makes the key point stand out to the reader.

** Makes the key point stand out**

You can float a callout to the left using float:left. You can use width to set the callout's width. You can use margin to put distance between the callout and text outside the callout. You can use padding to put space between the callout's internal text and its borders. You can use position:relative and top to adjust the vertical position of the callout.

CSS

**.callout-left { float:left; width:200px; padding:6px;** ** margin:10px 40px 10px 30px;** ** position:relative; top:10px;** font-size:22px; line-height:normal; font-weight:bold; text-align:center; color:black; background-color:gold; border-left:1px solid black; border-right:1px solid black; border-top:6px solid black; border-bottom:6px solid black; }

左浮动标注

右浮动标注

HTML

Right Floating Callout

The main feature of the floating callout is that text can wrap under and over it because it is a float.

** Wraps under and over**

You can float a callout to the right using float:right. You can use width to set the callout's width. You can use margin to put distance between the callout and text outside the callout. You can use padding to put space between the callout's internal text and its borders. You can use position:relative and top to adjust the vertical position of the callout.

CSS

**.callout { float:right; width:200px; padding:6px;** ** margin:10px 30px 10px 40px;** ** position:relative; top:10px;** font-size:22px; line-height:normal; font-weight:bold; text-align:center; color:black; background-color:gold; border-left:1px solid black; border-right:1px solid black; border-top:6px solid black; border-bottom:6px solid black; }

右浮动标注

居中标注

HTML

Center Callout

display:block clears text on each side of the callout. width sets the callout's width. margin-top and margin-bottom set the distance above and below the center callout.

** Centered Callout!**

margin-left:auto and margin-right:auto center the callout in its parent terminal block element.position:relative and left adjust the horizontal position of the callout away from center.

CSS

**.callout { display:block; width:300px; margin:20px auto; padding:6px;** ** position:relative; left:0%;** font-size:22px; line-height:normal; font-weight:bold; text-align:center; color:black; background-color:gold; border-left:1px solid black; border-right:1px solid black; border-top:6px solid black; border-bottom:6px solid black; }

居中标注

左边距标注

HTML

Left Marginal Callout

** Text does not wrap under...** The main feature of the marginal callout is that text does not wrap under or over the callout because the callout is in the margin. You can indent the block to make room for the callout on the left. You can use absolute positioning to pull the callout out of the text and move it into the left margin.

CSS

`.left-marginal { position:relative; width:470px; margin-left:230px; }

.callout { position:absolute; left:-220px; width:160px; margin-top:5px; line-height:normal; text-align:center; padding:5px 0; font-size:22px; font-weight:bold; color:black; background-color:gold; border-left:1px solid black; border-right:1px solid black; border-top:6px solid black; border-bottom:6px solid black; }`

左边距标注

右边界标注

HTML

Right Marginal Callout

** Text does not wrap under...**

The main feature of the marginal callout is that text does not wrap under or over the callout because the callout is in the margin. You can indent the block to make room for the callout on the right. You can use absolute positioning to pull the callout out of the text and move it into the right margin.

CSS

`.right-marginal { position:relative; width:490px; margin-right:230px; }

.callout { position:absolute; right:-200px; width:160px; margin-top:5px; line-height:normal; text-align:center; padding:5px 0; font-size:22px; font-weight:bold; color:black; background-color:gold; border-left:1px solid black; border-right:1px solid black; border-top:6px solid black; border-bottom:6px solid black; }`

右边界标注

块报价

HTML

Block Quote

**
**A block quote contains one or more paragraphs, and a citation.     A block quote is not repeated twice in the document like a callout.

**
**This example includes an embedded, decorative division so it can display     a graphical closing quote.
  ****Pro HTML5 and CSS3 Design Patterns

CSS

`blockquote { width:500px; margin:10px auto; position:relative; left:0%; text-align:justify; line-height:1.3em; color:black; padding-top:40px; padding-left:40px; background:url("dq1.jpg") no-repeat top left; }

blockquote div { padding-bottom:10px; padding-right:40px; background:url("dq2.jpg") no-repeat bottom right; }

blockquote p { margin:0; margin-bottom:10px; }

blockquote cite { display:block; text-align:right; font-size:0.9em; }`

块报价

行内块引用

HTML

Inline Block Quote

This quote is embedded in a paragraph, but looks like a block quote.

An inline block quote is marked up with inline elements, but looks like a block quote because its elements are rendered using display:block. **

**I embedded a decorative span in this example to display a graphical closing quote.

** **Pro HTML5 and CSS3 Design Patterns

CSS

`.blockquote { display:block; width:500px; margin:10px auto; position:relative; left:0%; text-align:justify; line-height:1.3em; color:black; padding-top:40px; padding-left:40px; background:url("dq1.jpg") no-repeat top left white; }

.blockquote span { display:block; padding-bottom:20px; padding-right:40px; background:url("dq2.jpg") no-repeat bottom right; }

.blockquote cite { display:block; text-align:right; font-size:0.9em; }`

行内块引用

行内报价

HTML

Inline Quote

**** "A quote should be followed by a citation." **(**Pro HTML5 and CSS3 Design Patterns**)**

** ** "If you embed a quote inside <q> most browsers will automatically insert double quotes — whether or not you want them!" **(** Pro HTML5 and CSS3 Design Patterns**)**

CSS

.quote { letter-spacing:0.07em; } .quote cite { font-size:0.9em; }

行内报价

二十、警报

本章讨论创建警报的设计模式。警告通过将重要信息从内容中分离出来，向读者指出这些信息。警报有两种基本类型:动态和静态。本章中的前三个设计模式是动态警告，它在用户与文档交互时动态显示信息。本章中的其余警报是静态警报，它们总是显示在文档中。警报设计模式是一个 HTML 模式，它基本上是一个标题，后跟警报消息。Alert 之后的设计模式将它与其他设计模式相结合，演示了如何将现有的设计模式结合起来创建新的设计模式。

章节大纲

JavaScript Alert 展示了如何基于事件动态弹出警报。
工具提示提示展示了如何创建一个工具提示来向用户显示额外的信息。
弹出警告展示了如何弹出警告，向用户显示额外的信息。
Alert 显示了警报的基本 HTML 结构。
Inline Alert 展示了如何使用 Inline 元素制作一个警告。
悬挂提醒展示了如何通过使用不需要额外标记的悬挂缩进，将提醒的标题移动到左侧，将内容移动到右侧。
图形警告展示了如何将警告的标题移动到左侧，将内容移动到右侧，并用图像替换标题。
运行警报显示如何将警报标题运行到内容的第一行。
浮动警告展示了如何将警告浮动到内容的左侧或右侧，标题在左侧，内容在右侧。
左边距警告展示了如何使用绝对定位将警告移动到左边距。
右边距警告展示了如何使用绝对定位将警告移动到右边距。
表单验证展示了如何本地验证 HTML5 表单，并在用户输入错误时提醒用户。

JavaScript 预警

HTML

JavaScript Alert

A JavaScript alert pops up a dialog box when the user clicks it. Its presence can be signalled by a small image** alert **

or specially styled text, such as a ** ** dotted underline**.**

CSS

`*.alert-image { cursor:pointer; margin-left:3px; }

*.alert { cursor:pointer; border-bottom:1px dotted; font-style:normal; font-size:0.8em; }`

JavaScript 预警

工具提示警告

HTML

Tooltip Alert

A tooltip alert slips right into the flow of text. It is usually signalled by a small image****

or some type of text decoration, such as a dotted underline**.**

CSS

`*.tooltip-image { cursor:help; margin-left:3px; }

*.tooltip { cursor:help; border-bottom:1px dotted; font-style:normal; font-size:0.8em; }`

工具提示警告

弹出预警

HTML

Popup Alert

A pop-up can show tips and help.      tip     Pop-up help goes here.
    A pop-up can show the definition of a     word.     Pop-up definition goes here.
    A pop-up can preview the target of a     link       .

CSS

`*.popup-trigger { position:relative; }

*.popup { position:absolute; left:0; top:1em; z-index:1; padding:5px; text-align:center; }

*.popup-trigger *.popup { visibility:hidden; }

/* Nonessential rules are not shown */`

弹出预警

HTML 标题

页. js

`function initPage() { assignEvent( 'click', '.popup-trigger', applyToDescendants, '.popup', toggleVisibility );

assignEvent( 'mouseover', '.popup-trigger', applyToDescendants, '.popup', showElement );

assignEvent( 'mouseout', '.popup-trigger', applyToDescendants, '.popup', hideElement ); }

addEvent(window, 'unload', purgeAllEvents); addEvent(window, 'load', initPage);

//The functions addEvent() and assignEvents() are in chdp.js. //Full documentation for each function is found in the source code.`

弹出预警

预警

HTML

Alert

Text above the alert.

**Alert Heading

**This is the content of the alert. It contains important information you want to point out to the reader.

Text below the alert.

CSS

*.alert { margin:40px; padding-left:20px; padding-right:20px; border-top:1px solid black; border-bottom:1px solid black; background-color:gold; } *.alert h3 { font-size:1.3em; } *.alert p { letter-spacing:1.5px; line-height:1.5em; } *.alert.tip h3 { text-transform:uppercase; }

预警

行内预警

HTML

Inline Alert

An inline alert slips right into the flow of text. As such it can be broken across lines.

** ** ** **Alert: ** **brief message.

You can keep the alert's message brief and you can use white-space:nowrap to prevent it from breaking across lines. It is also important to make the line height large enough to prevent the alert's padding and border from overlapping neighboring lines.

CSS

`*.alert { white-space:nowrap; line-height:2.3em; margin:0 20px; padding:8px 20px 5px 20px; border-top:1px solid black; border-bottom:1px solid black; background-color:gold; }

*.alert *.heading { font-weight:bold; font-size:1.3em; }

*.alert *.content { letter-spacing:1.5px; font-style:normal; }

*.alert.tip *.heading { text-transform:uppercase; }`

行内预警

悬挂警戒

HTML

Hanging Alert

Text above the alert.

Tip

** **

**The Hanging Alert uses the Hanging Indent design pattern to hang the heading to the left and pad the content to the right. The Inline Decoration design pattern optionally decorates the Alert's heading.

Text below the alert.

CSS

`*.alert { padding-right:20px; padding-top:10px; padding-bottom:10px; border-top:1px solid black; border-bottom:1px solid black; margin:40px; }

*.alert h3 { display:inline; font-size:1.3em; text-transform:uppercase; }

*.alert.tip { text-indent:-80px; padding-left:80px; } *.alert.note { text-indent:-110px; padding-left:110px; } *.alert.caution { text-indent:-160px; padding-left:160px; }

*.alert.tip p { display:inline; margin-left:18px; } *.alert.note p { display:inline; margin-left:20px; } *.alert.caution p { display:inline; margin-left:20px; }

**.alert .decoration { border-left:15px solid gold; margin-right:-10px; font-size:0.7em; vertical-align:2px; }`

悬挂警戒

图形预警

HTML

Graphical Alert

Text above the alert.

Tip

**The Graphical Alert design pattern combines the Left Marginal design pattern and the Text Replacement design pattern to display a graphic on top of the heading.

Text below the alert.

CSS

`*.alert { position:relative; margin:20px 0 20px 120px; } *.alert h3 { margin:10px 0; font-weight:bold; font-size:1.3em; text-transform:uppercase; } *.alert p { margin:10px 0; }

*.alert.tip p { color:green; border:4px ridge green; padding:20px; }

*.alert.tip h3 { position:absolute; left:-100px; top:-15px; width:71px; height:117px; padding:0; overflow:hidden; }

*.alert.tip h3 em { position:absolute; left:20px; top:25px; }

*.alert.tip span { position:absolute; left:0; top:0; margin:0; width:71px; height:117px; background:url("tip.jpg") no-repeat; }`

图形预警

磨合预警

HTML

Run-In Alert

Text above the alert.

Caution

**The Run-In Alert runs the alert's heading into the text using display:inline on both the heading and the paragraph.

Text below the alert.

CSS

`*.alert { padding-right:20px; padding-top:10px; padding-bottom:10px; border-top:1px solid black; border-bottom:1px solid black; margin:40px; }

*.alert h3 { display:inline; font-size:1.3em; text-transform:uppercase; }

*.alert p { display:inline; margin-left:10px; letter-spacing:-0.8px }

*.alert.caution { color:red; border-top:3px double red; border-bottom:3px double red; }

*.alert *.decoration { border-left:15px solid gold; margin-right:-11px; font-size:0.7em; vertical-align:2px; }`

磨合预警

浮动预警

HTML

Floating Alert

Text above the alert.

Note

**The Floating Alert design pattern floats the entire alert. Internally it also floats the alert's heading to the left and its paragraph to the right.

Text below the alert.

Notice how the alert is removed from the flow. Also notice how the browser automatically shrinks the right margin of this text so that it does not collide with the left margin of the floated alert.

CSS

`*.alert { float:right; width:350px; margin-left:20px; border-top:1px solid black; border-bottom:1px solid black; }

*.alert h3 { float:left; width:50px; margin:10px 0; font-size:1.3em; text-transform:uppercase; }

*.alert p { float:right; width:250px; margin:10px 0; }

*.alert.note { color:blue; border-top:2px groove blue; border-bottom:2px ridge blue; }

*.alert *.decoration { border-left:15px solid gold; margin-right:-11px; font-size:0.7em; vertical-align:2px; }`

浮动预警

左边界警戒

HTML

Left Marginal Alert

Text above the alert.

Tip

**The Left Marginal Alert design pattern moves the entire alert into the left margin. Inside the alert itself, its heading is absolutely positioned to the left and its paragraph to the right.

Text below the alert.

Notice how the alert is removed from the flow and moves into the margin. Unlike the Floating Alert, you have to size the right or left margin to make room for the marginal alert.

CSS

***.main { position:relative; margin-left:400px; }** ***.alert { position:absolute; width:350px; left:-400px; height:190px;** border-top:1px solid black; border-bottom:1px solid black; } ***.alert h3 { position:absolute; left:0; top:15px; margin:0;** font-size:1.3em; text-transform:uppercase; } ***.alert p { position:absolute; left:80px; top:15px; margin:0; }** *.alert.tip { color:green; border-top:4px groove green; border-bottom:4px ridge green; } *.alert *.decoration { border-left:15px solid gold; margin-right:-11px; font-size:0.7em; vertical-align:2px; }

左边界警戒

右旁注

HTML

Text above the alert.

Tip

**The Right Marginal Alert design pattern moves the entire alert into the right margin. Inside the alert itself, its heading is absolutely positioned to the left and its paragraph to the right.

Text below the alert.

Notice how the alert is removed from the flow and moves into the margin. Unlike the Floating Alert, you have to size the right or left margin to make room for the marginal alert.

CSS

`*.main { position:relative; padding-right:400px; } *.alert { position:absolute; width:350px; right:0; height:190px; border-top:1px solid black; border-bottom:1px solid black; } *.alert h3 { position:absolute; left:0; top:15px; margin:0; font-size:1.3em; text-transform:uppercase; }

*.alert p { position:absolute; left:80px; top:15px; margin:0; } *.alert.tip { color:green; border-top:4px groove green; border-bottom:4px ridge green; } **.alert .decoration { border-left:15px solid gold; margin-right:-11px; font-size:0.7em; vertical-align:2px; }`

右旁注

表单验证

HTML

Form Validation

Please fill in form:

Email: URL: Number: `

CSS

input {margin-right: 10px;}