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

第7课CSS 4 用css设置超链接与导航条 一 超链接的四种状态 超链接有四种状态 活动状态 已被访问状态 未被访问状态 和鼠标悬停状态 a link color 白色 未访问的链接 a visited color 蓝色 已访问的链接 a hover color 红色 鼠标移动到链接上 a active color 绿色 选定的链接 1 准备代码 HomeEastWestNorthSouth 2 设置超链接各种状态下的CSS样式 a font size 14px font family line height 50px padding 20px a link color red text decoration none a visited color black text decoration none a hover color yellow text decoration underline 下划线 background color blue 二 效果1 创建按钮式超链接 1 准备代码 a font family Arial font size 8em text align center margin 3px HomeEastWestNorthSouth 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 准备代码 HomeContactUsWebDevWebDesignMap 2 设置 menu盒子的css样式 menu font family Arial font size 14px font weight bold width 120px padding 8px background 000 margin 0auto border 1pxsolid ccc 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代码 HomeContactusWebDevWebDesignMap 五 列表制作导行菜单 1 准备代码 首页阳朔概况景点介绍阳朔美食阳朔购物旅游方式阳朔交通旅游预订旅游论坛旅游投诉 2 设置navMenu1盒子的css样式 navMenu1 background image url image nav3 jpg width 900px 3 设置navMenu1ul的css样式 navMenu1ul margin 0px padding 0px list style type none 4 设置navMenu1ulli的css样式 navMenu1ulli line height 34px background image url image nav1 jpg background repeat no repeat background position leftcenter float left height 34px margin left 2px 5 设置navMenu1ullia的css样式 navMenu1ullia font size 14px color FFF text decoration none display block margin left 2px padding right 1em padding left 1em 6 设置navMenu1ullia fover的css样式 navMenu1ullia hover b