css009 装饰网站的导航

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; width: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 添加一个宽度 width: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’]       ($ 表示以什么结尾)