实验六用CSS+DIV制作导航菜单
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
制作步骤：
Step1：新建页面，插入ID为menu的div标签，输入文本，插入项目列表 符号ul； Step2：选中文本（注意是<ul>列表），新建CSS规则。类型为：复合内 容(基于选择的内容)，名称为：#menu ul。 列表： list-style-type：none 方框： padding：全为0，margin：全为0 Step3：定义文本的大小、字号、行距等。新建CSS规则，类型为：标签 （重新定义HTML元素），名称为：body。设置其字体、字号、行距。 下面给menu定义一个灰色的边框和宽度，为每一个项目列表定义背景色 和下边框。 Step4：新建CSS规则，类型为：ID（仅用于一个HTML元素），名称为： #menu。
4
2、超链接样式 超链接有四种样式：
A:link （未访问的连接） A:visited（已访问的连接） A:hover（鼠标移动到连接上时的效果） A:active（选定的连接）
插入的链接默认是蓝色的带下划线的样式，我们可以通过 CSS样式来修改 新建CSS规则，类型为：复合内容（基于选择的内容）， 名称从下拉列表中选择
5
3、将链接转换为块级元素 将链接转换为块级元素后可以获得更大的点击区域，可以 设置宽度和高度，将链接转换为块级元素，只需修改区块 中的display为block属性即可。 Step1：输入链接文字 Step2：添加链接 Step3：新建CSS规则，类型为：标签（重新定义HTML 元素），名称为：a
边框：style：全为solid，width：全为1，color：灰色#ccc 方框：width：100
3
实验步骤及内容
Step5：选中某一行项目列表（<li>）,新建CSS规则,类型为：复合内容 （基于选择的内容），名称为：#menu ul li。 类型：line-height：30px 背景：background-color：白灰色#eee 方框：height：30 边框：style：solid（仅为bottom），1px，#ccc 下面为这些菜单加上链接，并制作交互效果，定义鼠标划过的状态。 Step6：选中要链接的文字，输入链接，可先设虚拟链接# Step7：新建CSS规则，类型为：标签（重新定义HTML元素），名称为： a 类型：color：黑色#000，text-decoration：none Step8：现在要为链接做交互效果。选中链接文字，新建CSS规则，类型： 复合内容（基于选择的内容），名称为：a：hover 类型：color：红色#foo， underline（下划线）
最终效果
8
区块为： 然后修改其他参数
6
4、制作横向导航菜单 学过纵向导航菜单，前面又源自文库习了float属性，那 么要实现横向导航菜单就很简单，只需要把li横向 排列就可实现了。 具体参数为：
修改#menu ul li的参数，方框：float：left，padding： 0px 8px
7
5、制作横向图文导航列表
实验六：使用css+div制作导航菜单 实验目的
掌握列表导航菜单的制作方法 熟悉超链接的四种样式 学会用CSS制作按钮 掌握横向导航菜单的制作方法
1
实验步骤及内容
1、制作列表导航菜单
纵向列表或称为纵向导 航，在网站的产品列表 中应用比较广泛，如淘 宝网左侧的淘宝服务
最终效果
2
实验步骤及内容
Step1：新建页面，插入ID为menu的div标签，输入文本，插入项目列表 符号ul； Step2：选中文本（注意是<ul>列表），新建CSS规则。类型为：复合内 容(基于选择的内容)，名称为：#menu ul。 列表： list-style-type：none 方框： padding：全为0，margin：全为0 Step3：定义文本的大小、字号、行距等。新建CSS规则，类型为：标签 （重新定义HTML元素），名称为：body。设置其字体、字号、行距。 下面给menu定义一个灰色的边框和宽度，为每一个项目列表定义背景色 和下边框。 Step4：新建CSS规则，类型为：ID（仅用于一个HTML元素），名称为： #menu。
4
2、超链接样式 超链接有四种样式：
A:link （未访问的连接） A:visited（已访问的连接） A:hover（鼠标移动到连接上时的效果） A:active（选定的连接）
插入的链接默认是蓝色的带下划线的样式，我们可以通过 CSS样式来修改 新建CSS规则，类型为：复合内容（基于选择的内容）， 名称从下拉列表中选择
5
3、将链接转换为块级元素 将链接转换为块级元素后可以获得更大的点击区域，可以 设置宽度和高度，将链接转换为块级元素，只需修改区块 中的display为block属性即可。 Step1：输入链接文字 Step2：添加链接 Step3：新建CSS规则，类型为：标签（重新定义HTML 元素），名称为：a
边框：style：全为solid，width：全为1，color：灰色#ccc 方框：width：100
3
实验步骤及内容
Step5：选中某一行项目列表（<li>）,新建CSS规则,类型为：复合内容 （基于选择的内容），名称为：#menu ul li。 类型：line-height：30px 背景：background-color：白灰色#eee 方框：height：30 边框：style：solid（仅为bottom），1px，#ccc 下面为这些菜单加上链接，并制作交互效果，定义鼠标划过的状态。 Step6：选中要链接的文字，输入链接，可先设虚拟链接# Step7：新建CSS规则，类型为：标签（重新定义HTML元素），名称为： a 类型：color：黑色#000，text-decoration：none Step8：现在要为链接做交互效果。选中链接文字，新建CSS规则，类型： 复合内容（基于选择的内容），名称为：a：hover 类型：color：红色#foo， underline（下划线）
最终效果
8
区块为： 然后修改其他参数
6
4、制作横向导航菜单 学过纵向导航菜单，前面又源自文库习了float属性，那 么要实现横向导航菜单就很简单，只需要把li横向 排列就可实现了。 具体参数为：
修改#menu ul li的参数，方框：float：left，padding： 0px 8px
7
5、制作横向图文导航列表
实验六：使用css+div制作导航菜单 实验目的
掌握列表导航菜单的制作方法 熟悉超链接的四种样式 学会用CSS制作按钮 掌握横向导航菜单的制作方法
1
实验步骤及内容
1、制作列表导航菜单
纵向列表或称为纵向导 航，在网站的产品列表 中应用比较广泛，如淘 宝网左侧的淘宝服务
最终效果
2
实验步骤及内容