css009 装饰网站的导航
1、 选择定义样式的链接
1、连接的状态：
A、未访问 a:link{C;}
B、已访问 a:visited{ color : red; }
C、鼠标经过变化 a:hover{ color : red; }
D、活跃 a:active{ color : red; }
2、可以给不同的链接设定不同的类，针对不同的链接设定不同的样式
.mainnav a: link { color : red; }
.mainnav a: visited { color : red; }
.mainnav a: hover { color : red; }
.mainnav a:active{ color : red; }
3、用派生器对连接进行分组。如导航栏链接用一个标签<nav>包裹起来
Css样式中就可以这样写来设置链接群的样式：
nav a { font-size :20px; color:red;}
nav a:link{color : red;}
nav a:visited{ color : red;}
nav a:hover{ color : red; }
nav a:active{ color : red; }
2、 给链接定义样式
1、添加边框，设置背景颜色、图片，鼠标经过时颜色变化等
2、给连接添加下划线：
添加下划线 text-direction：underline；
取消下划线：text-direction：none；
鼠标经过时添加下划线 a:hover{ text-direction:underline; }
3、使用底部边框线a{ text-direction：none；border-bottom:dashed 2px r ed; }
4、使用背景图片
a { text-direction：none; background:url(images/underline.gif )reapt-x left bottom; padding-bottomm:5px; }
5、创建按钮
<a href="stale.html" class="button"></a> （html代码）
（css样式）a.button{ border:solid 2px red; background-color:red }
3、 创建导航栏（如果是主导航的话最好是用nav标签）
1、使用无序列表
2、取消项目符号，消除padding和margin
3、ul.nav{ list-style-type:none; padding:0; margin:0; }
4、创建垂直导航栏
A把连接当成块显示，a是行内元素，所以设置ul.nav a{display:block;}
B 限制按钮的宽度 ul.nav a{display:block; 8px; }
5、水平导航栏 （步骤）
A display: inline-block;
B 把<ul>浮动起来
C 给无序列表创建样式，删除padding margin和项目符号，添加底部边框
ul.nav{
margin:0px;
padding:0px;
list-style:none;
border-bottom:1px dashed red;
}
D给连接定义样式
.nav a{
text-decoration: none;
color: black;
font-size: 16px;
font-family: "microsoft yahei";
}
6、对水平导航栏使用浮动 (步骤)
A 浮动列表项目 .nav li{ float :left;}
B 给链接添加 display: block; ul .nav li{ display: block;}
C 给链接定义样式 添加背景色 边框线等
D 添加一个宽度 50px;
E 在<ul>标签样式中添加 overflow:hidden;
ul.nav{ overflow:hidden;}
4、 Css式的预载替换算法
预载：提前下载好替换的图片，减少加载时间的花费
步骤：
A 创建一张带有不同按钮版本的图片
B 测量从整张图片的顶部到每张图片顶部之间的距离
C 给普通的链接创建一个css样式
D 创建:hover样式
a:hover{background-position:0 0;}
E
5、 给特殊的链接类型定义样式
1、链接到其他网站
a [href^=’http://’] (^ 表示以什么开头)
2、链接到电子邮箱
a [href^=’mailto’]
3、链接到特殊类型的文件
a [href$=’.pdf’] ($ 表示以什么结尾)