Download presentation
Presentation is loading. Please wait.
1
武汉纺织大学传媒学院 cm.wtu.edu.cn
第16节 CSS菜单制作 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/5/18 传媒学院
2
1.目标 制作一个菜单 要求 效果如下 鼠标移动上去时链接文字显示为红色，且链接文字背景为绿色； 当前菜单的颜色为红色，背景为绿色；
所有菜单没有下划线，菜单文字为绿色，且页面之间相互链接，可以通过菜单切换 效果如下 2019/5/18 传媒学院
3
2.创建页面 创建3个页面 每个页面的内容 相互链接 首页：index.html 学院介绍：school.html
师资力量：teacher.html 每个页面的内容 用h1标签包含“这是。。。”这样的简单介绍 相互链接 通过a标签实现 Q：是不是只用在首页中写链接标签a？ 2019/5/18 传媒学院
4
3.设置首页样式 使用外部样式 1）在首页中创建cm.css 2）设置样式规则 多个页面共享，放置在css目录下，cm.css
样式文件最好单独存放，不要和网页放一起 1）在首页中创建cm.css 2）设置样式规则 取消a标签的下划线 菜单的文字为绿色 应该设置怎么设置？ 以上规则作为标签样式设置为宜，为什么？ 2019/5/18 传媒学院
5
3）设置当前菜单的背景为绿色，文字为红色 4）设置a标签hover伪样式 a:hover{ Q：首页中，样式应该在哪个菜单项使用？
background-color: green; color: red; } Q：在dw中如何给出选择器名称？ 2019/5/18 传媒学院
6
4.其他页面设置样式 1、添加到外部样式的链接 2、使用外部样式中的样式 3、设置当前菜单效果 可以参考首页中dw自动生成的链接
Q：为什么要这样做？ 2、使用外部样式中的样式 Q：怎么使用？ 3、设置当前菜单效果 文字红色，背景绿色 2019/5/18 传媒学院
7
作业 依据老师讲解，制作一个css菜单，有三个页面，可以通过菜单相互切换，效果如下 2019/5/18 传媒学院
Similar presentations
