13.11　综合实例

13.11　综合实例

根据本章介绍的CSS3样式，结合前面章节介绍的页面布局的方法，制作图13-16所示的页面效果。

图13-16　综合实例

首先，完成HTML的结构内容部分：

（1）新建页面，在＜title＞标签中输入“综合实例”作为页面标题。

（2）观察整个页面内容，根据语义选择使用哪个标签。为了方便设置整个页面内容的样式，使用id为wrapper的div将所有元素包围起来。

（3）页面最上方的导航条使用header和nav；下方主体内容用id为content的div包围起来。

HTML部分代码如下：

新建样式表文件“master.css”，在HTML的＜head＞标签中链接外部样式表，代码如下：

在“master.css”中依次设置各部分样式。

（1）首先载入Web字体，代码如下：

（2）设置网页整体样式，添加页面背景图片，将wrapper宽度设为950 px，并将其设为水平居中，代码如下：

（3）设置页首中的图片以及导航条样式，并为导航条添加圆角和阴影，代码如下：

（4）为主体区域中的卡片添加圆角，并添加阴影，代码如下：

（5）设置卡片中图片、标题、文字及按钮样式，文字使用了Web字体，图片的透明度设为0.8，鼠标悬停时透明度为1，代码如下：