CSS制作特效导航菜单-网站制作基础

步骤1　使用鼠标右键单击“MyWebSite”站点列表项的根文件夹，选择弹出快捷菜单中的【新建文件】命令，将“untitled.html”默认的文件名改为“msgboard1.html”（留言板），按回车键确认修改。

步骤2　在网页中插入一个表格，在下面表格【属性】面板中的名称栏输入“tb_msg”；“行”栏输入1；“列”栏输入8；“宽”栏输入800像素；“填充”栏输入0；“间距”栏输入0；“边框”栏输入0，对齐为“居中对齐”，如图3-3-9所示。

图3-3-9　表格【属性】面板

步骤3　在表格的每个单元格中输入相关的文本内容，选中表格中的所有文字，在下面【属性】面板中的【链接】栏中输入“#”，普通文字将具有超链接效果，如图3-3-10所示。

图3-3-10　【设置文字超链接】

步骤4　选中表格的第一行，设置下方【属性】→【HTML】面板中的“水平”栏为“居中对齐”；“宽”栏输入100；“高”栏输入35，“背景颜色”栏选择颜色值为“#000”的颜色，如图3-3-11所示。

图3-3-11　表格【属性】-【HTML】面板

步骤5　用鼠标点击【格式】菜单中【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”的下拉列表中选择“ID”项，在“名称”栏目后的下拉列表框中输入“tb_msg”值，在“规则定义”后的下拉列表中选择“仅对该文档”项，点击【确定】按钮。如图3-3-12所示。

图3-3-12　【新建CSS规则】

步骤6　在弹出的【#tb_msg的CSS规则定义】对话框中，用鼠标点击“分类”选项组中的“类型”选项，在“font-size”栏中选择输入“12”，单位选择“px”；在“color”栏中选择颜色“#333”，然后点击【确定】按钮，如图3-3-13所示。

图3-3-13　【#tb_msg的CSS规则定义】

步骤7　在【#tb_msg的CSS规则定义】对话框中，用鼠标点击“分类”选项组中的“边框”选项，勾选“style”“width”和“color”下面的“全部相同”复选框后，“style”选择“solid”；“width”输入值“1”，单位选择“px”；“color”输入值“#999”（浅灰色），点击【确定】按钮，如图3-3-14所示。

步骤8　用鼠标点击【格式】菜单中【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”的下拉列表中选择“复合内容”项，在“选择器名称”栏目后的下拉列表框中输入“tb_msg tr td a”值，在“规则定义”后的下拉列表中选择“仅限该文档”项，点击【确定】按钮。如图3-3-15所示。

图3-3-14　【#tb_msg的CSS规则定义】

图3-3-15　【新建CSS规则】对话框

步骤9　在弹出的【#tb_msg tr td a的CSS规则定义】对话框中，“font-size”栏输入16，单位选择“px”；“color”栏输入“#ccc”，勾选“text-decoration”栏中的“none”复选框，如图3-3-16所示。

图3-3-16　【#tb_msg tr td a的CSS规则定义】对话框

步骤10　用鼠标点击【格式】菜单中的【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”的下拉列表中选择“复合内容”项，在“选择器名称”栏目后的下拉列表框中输入“tb_msg tr td a：hover”值，在“规则定义”后的下拉列表中选择“仅限该文档”项，点击【确定】按钮。如图3-3-17所示。

图3-3-17　【新建CSS规则】对话框

步骤11　在弹出的【#tb_msg tr td a：hover的CSS规则定义】对话框中，选择“font-weight”栏下拉列表中的“bold”；在“line-height”栏中输入35，单位选择“px”；在“color”栏中选择颜色值为“#000”的颜色，点击【确定】按钮，如图3-3-18所示。

图3-3-18　【#tb_msg tr td a：hover的CSS规则定义】对话框

步骤12　用鼠标点击“分类”选项组中的“背景”选项，在“background-color”栏中输入“#FFF”（白色），如图3-3-19所示。

图3-3-19　【#tb_msg tr td a：hover的CSS规则定义】对话框

步骤13　用鼠标点击“分类”选项组中的“区块”选项，在“display”栏的下拉列表框中选择“block”，如图3-3-20所示。

图3-3-20　【#tb_msg tr td a：hover的CSS规则定义】对话框

步骤14　用鼠标点击“分类”选项组中的“扩展”选项，在“cursor”栏中选择“crosshair”（十字光标），点击【确定】按钮，如图3-3-21所示。(www.xing528.com)

图3-3-21　【#tb_msg tr td a：hover的CSS规则定义】对话框

提示说明：默认情况下光标为箭头，但有时需要其他光标，这时可以通过CSS设置光标的类型，常用的光标类型有如表3-3-2所示。

表3-3-2　光标类型描述

图3-3-22　预览效果

本节介绍了CSS样式设置菜单，读者可以按照下面的要求完善个人网页：

1.在个人网页中利用表格对网页的菜单进行布局设置。

2.利用CSS样式设置超链接的4个状态，实现特效导航效果。