第7课_css4设置超链接与导航条剖析ppt课件

第7课_css4设置超链接与导航条剖析ppt课件

ID:20181757

大小:625.50 KB

页数:17页

时间:2018-10-11

第7课_css4设置超链接与导航条剖析ppt课件_第1页
第7课_css4设置超链接与导航条剖析ppt课件_第2页
第7课_css4设置超链接与导航条剖析ppt课件_第3页
第7课_css4设置超链接与导航条剖析ppt课件_第4页
第7课_css4设置超链接与导航条剖析ppt课件_第5页
资源描述:

《第7课_css4设置超链接与导航条剖析ppt课件》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、第7课CSS-4用css设置超链接与导航条一、超链接的四种状态超链接有四种状态:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。a:link{color:白色}/*未访问的链接*/a:visited{color:蓝色}/*已访问的链接*/a:hover{color:红色}/*鼠标移动到链接上*/a:active{color:绿色}/*选定的链接*/1、准备代码:HomeEast

2、>WestNorthSouth2、设置超链接各种状态下的CSS样式:二、效果1:创建按钮式超链接1、准备代码:HomeEastWest

4、rth.htm">NorthSoutha:link,a:visited{border-top:1pxsolid#EEEEEE;border-left:1pxsolid#EEEEEE;border-bottom:1pxsolid#717171;border-right:1pxsolid#717171;padding:4px10px4px10px;background-color:#DDD;text-decoration:none;color:#A62020

5、;}2、设置超链接正常与已访问状态的样式:3、设置鼠标悬停时的CSS样式:a:hover{color:#821818;background-color:#CCC;border-top:1pxsolid#717171;border-left:1pxsolid#717171;border-bottom:1pxsolid#EEEEEE;border-right:1pxsolid#EEEEEE;padding:5px8px3px12px;}三、效果2:制作荧光灯效果的菜单1、准备代码:

6、href="#"id="first">HomeContactUsWebDevWebDesignMap

2、设置#menu盒子的css样式:3、设置超链接在正常和已访问状态下的css样式:#menua:link,#menua:visited{padding:4px8px;color:#ccc;text-decoration:none;border-top:8pxsolid#060;height:1em;}4、设置鼠标悬停状态的CSS样式:#menua:hover{color:#FF0;border-top:8pxsolid#0E0;}四、设置无序或有序列表的样式准备html代码:

8、y>

  • Home
  • Contactus
  • WebDev
  • WebDesign
  • Map
Ul{font-size:0.9em;color:#00458c;list-style-type:c

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。