清单 21. CSS3 示例 #4
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
article p.next-to-aside {
width: 500px;
}
article > section figure {
margin-left: 180px;
margin-bottom: 30px;
}
article > section > menu {
margin-left: 120px;
}
aside p {
position:relative;
left:0px;
top: -100px;
z-index: 1;
width: 200px;
float: right;
font-style: italic;
color: #99f;
}
|
视频部分元素
<article>的最后一部分是
video。示例视频是 ogg 格式，将在页面加载的同时自动地连续循环播放，同时为用户提供了暂停和播放控件。在许多新的实例中，ogg 视频采用扩展名
ogv（
v表示视频），如清单 22 所示。
<audio>标记的工作原理与此相同。
清单 22. <article> 和 <section> 示例
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<section>
<header>
<h1>This is a video section</h1>
</header>
<p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv"
controls autoplay loop>
<div class="no-html5-video"><p>This video will work in
Mozilla Firefox or Google Chrome only. </p>
</div>
</video></p>
</section>
</article>
|
清单 23 显示了
video部分的 CSS3 定义。
清单 23. CSS3 示例 #5
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
article > section video {
height: 200px;
margin-left: 180px;
}
article > section div.no-html5-video{
height: 20px;
text-align: center;
color: #000090;
font-size: 13px;
font-style: italic;
font-weight: bold ;
background-color: #99f;
}
|
页面的页脚和结束部分如清单 24 所示。
清单 24. <footer> 标记示例
双击代码全选
|
1
2
3
4
5
|
<footer>
<p>Copyright: 2011 Acme United. All rights reserved.</p>
</footer>
</body>
</html>
|
页脚的 CSS3 如清单 25 所示。
清单 25. CSS3 示例 #5
双击代码全选
|
1
2
3
4
5
6
|
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
|
结束语
随 着 Web 页面的完成，本系列的第 1 部分也就此结束。本文的目标是介绍新的 HTML5 时代。HTML5 不仅仅是对 HTML4 的版本升级：它代表一种全新的数字化通信方式。通过结合使用 CSS3 和 JavaScript，HTML5 为开发人员提供了他们所需的全部内容。如果您愿意了解庞大的 HTML5 可以为您提供哪些帮助，您将加入日益增长的 HTML5 多媒体 Web 设计师和开发人员的队伍中。本系列的下一期文章将介绍如何对 HTML5 表单进行编码和格式化。
下载
|
描述 |
名字 |
大小 |
下载方法 |
|
样例 HTML、CSS3 文件 |
HTML5Fundamentals.zip |
10KB |
HTTP |
(责任编辑：12图资源库)
