欢迎来到天天文库
浏览记录
ID：39574565
大小：2.05 MB
页数：18页
时间：2019-07-06
《用CSS设置链接与导航菜单》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、网页设计与制作教程（HTML+CSS+JavaScript）顾忠伟zwgu@qq.comGlobalmis.com7.1用CSS设置链接7.2用CSS设置列表7.3创建导航菜单7.4用CSS设置链接与导航菜单综合案例第7章用CSS设置链接与导航菜单7.1.1超链接伪类超链接涉及到一个新的概念——伪类。首先了解一下超链接的4种样式：a:link{color:#ff0000}/*未访问的链接*/a:visited{color:#00ff00}/*已访问的链接*/a:hover{color:#ff00ff}
2、/*鼠标悬停到链接上*/a:active{color:#0000ff}/*激活的链接*/超链接伪类的语法如下：a:link{sRules}设置a对象在未被访问前的样式表属性。a:visited{sRules}设置a对象在链接地址已被访问过时的样式表属性。a:hover{sRules}设置a对象在鼠标悬停时的样式表属性。a:active{sRules}设置a对象在被用户激活（按下鼠标未松手）时的样式表属性。7.1用CSS设置链接7.1.2改变文字链接的外观为了更清楚地理解如何使用CSS设置文字链接的外观
3、，下面讲解一个简单的示例。【演练7-1】改变文字链接的外观，鼠标未悬停时文字链接的效果如图7-1（a）所示，鼠标悬停在文字链接上时的效果如图7-1（b）所示。7.1用CSS设置链接7.1.2改变文字链接的外观【演练7-2】制作网页中不同区域的链接效果，鼠标经过导航区域的链接风格与鼠标经过和我联系文字的链接风格截然不同，本例文件7-2.html在浏览器中显示的效果如图7-2所示。7.1用CSS设置链接7.1.2创建按钮式超链接按钮式超链接的实质就是将超链接样式的4个边框的颜色分别进行设置，左和上设置为加
4、亮效果，右和下设置为阴影效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好相反。【演练7-3】创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似按钮“被按下”的效果，如图7-3所示。7.1用CSS设置链接7.1.3图文链接网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步的美化。【演练7-4】图文链接，鼠标未悬停时文字链接的效果如图7-4（a）所示，鼠标悬停在文字链接上时的效果如图7-4（b）所示。7.1用CSS设置链接7.2.1设置列表类型通常
5、的项目列表主要采用
6、出错时，list-style-type属性会替代list-style-image属性对列表产生作用。【演练7-7】设置列表项图像，本例页面7-7.html的显示效果如图7-11所示。7.2用CSS设置列表7.2.4图文信息列表网页中经常可以看到图文信息列表，如图7-13所示。之所以称为图文信息列表，是因为列表的内容是以图片和简短语言的形式呈现在页面中。【演练7-9】使用图文信息列表制作电脑商城热销笔记本页面局部信息，本例页面7-9.html的显示效果如图7-14所示。7.2用CSS设置列表7.3.1普
7、通的超链接导航菜单普通的超链接导航菜单的制作比较简单，主要采用将文字链接从“内联元素”变为“块级元素”的方法来实现。【演练7-10】制作荧光灯效果的菜单，鼠标未悬停在菜单项上时的效果如图7-18（a）所示，鼠标悬停在菜单项上时效果如图7-18（b）所示。7.3创建导航菜单7.3.2纵向列表模式的导航菜单由于纵向导航菜单的内容并没有逻辑上的先后顺序，因此可以使用无序列表制作纵向导航菜单。【演练7-11】制作纵向列表模式的导航菜单，鼠标未悬停在菜单项上效果如图7-22（a）所示，鼠标悬停在菜单项上效果如图
8、7-22（b）所示。7.3创建导航菜单7.3.3横向列表模式的导航菜单在设计人员制作网页时，经常要求导航菜单能够在水平方向上显示。通过CSS属性的控制，可以实现列表模式导航菜单的横竖转换。【演练7-12】制作横向列表模式的导航菜单，鼠标未悬停在菜单项上效果如图7-25（a）所示，鼠标悬停在菜单项上效果如图7-25（b）所示。7.3创建导航菜单7.4.1页面布局规划通过成熟的构思与设计，电脑社区环保天地页面的效果如图7-28所示，页面布局示意图如图7-29
此文档下载收益归作者所有
