双击代码全选
|
1
2
3
4
5
6
7
|
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
|
HTML5 还包含一个
<menu>标记 —该标记一度令一些设计师和开发人员感到困惑。这是因为导航功能常常被称为 “导航菜单”。HTML 版本 4.01 不赞成使用
<menu>标记，但是 HTML5 重新启用了该标记并使用它增强交互性。它不应当用于实现主导航。唯一用于实现主导航的标记应当为
<nav>标记。您将在本示例后面的部分使用
<menu>标记。
导航的格式由 CSS3 实现。清单 17 中显示的每个
<nav>标记的定义都表示
<nav>标记内部的
<ul>和
<li>元素的特定状态。
清单 17. CSS3 示例 #2
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #99f;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #006;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
|
接下来是 Article 区。这个区由
<article>标记定义，包含其自己的
<header>信息。
<article>中的
<section>也包含它自己的
<header>标记。参见清单 18。
清单 18. <article> 和 <section> 示例
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<article>
<header>
<h1>
<a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
</h1>
</header>
<p> Primum non nocere ad vitam Paramus . . . </p>
<section>
<header>
<h1>This is the first section heading</h1>
</header>
<p>Scientia potentia est qua nocent docentp . . .>
</section>
|
清单 19 显示了呈现页面格式的 CSS3 标记。注意，
paragraph、
header和
section区的定义都是针对它们所在的
<article>标记定义的。这里定义的
<h1>标记使用了与为页面级
<h1>标记定义的
<h1>标记不同的格式。
清单 19. CSS3 示例 #3
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
article > header h1 {
font-size: 40px;
float: left;
margin-left: 14px;
}
article > header h1 a {
color: #000090;
text-decoration: none;
}
article > section header h1 {
font-size: 20px;
margin-left: 25px;
}
article p {
clear: both;
margin-top: 0px;
margin-left: 50px;
}
|
<article>中包含的第二个
<section>标记包含与第一个
<section>相同的基本信息，但是这一次将使用
<aside>、
<figure>、
<menu>以及
<mark>标记。参见清单 20。
<aside>标记在这里用于显示不属于文本流部分的信息。
<figure>标记包含一个 Stonehenge 图形。这个
<section>还包含
<menu>标记，您可以用来创建带有四个 Muse 名字的按钮。当单击其中一个按钮时，它将提供有关特定 Muse 的信息。
<mark>标记在
<p>标记的内部使用，用于突出显示
veni、vidi、vici。
清单 20. <article> 和 <section> 示例
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<section>
<header>
<h1>Second section with mark, aside, menu & figure</h1>
</header>
<p class="next-to-aside"> . . . <mark>veni, vidi, vici</mark>. Mater . . .</p>
<aside>
<p>This is an aside that has multiple lines. . . .</p>
</aside>
<menu label="File">
<button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button>
<button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia
</button>
<button type="button" onClick="JavaScript:alert
('Urania . . .')">Urania</button>
<button type="button" onClick="JavaScript:alert
('Calliope . . .')">Calliope</button>
</menu>
<figure><img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
<figcaption>Figure 1. Stonehenge</figcaption>
</figure>
</section>
|
本部分的 CSS3 包含了
<p>标记的新定义，该标记的宽度要比页面的宽度小一些。这种改变允许将旁白显示在右侧，而不会与文本相互重叠。清单 21 显示了标记。
(责任编辑：12图资源库)
