1.动态超链接

<a href="****">链接文本</a>
去掉下划线:text-decoration:none

利用css的为类别来制作超链接动态效果的方法

a:link  普通样式
a:visited被点击过的超链接的样式
a:hover鼠标指针经过超链接上时的样式
a:active在超链接上单击时,即当前激活时,超链接的样式
需要注意的问题
6.链接与导航 - 骡子 - stupidmule@126 的博客注意声明的顺序   css设置后面的会覆盖前面的效果
6.链接与导航 - 骡子 - stupidmule@126 的博客a:link和a的区别
6.链接与导航 - 骡子 - stupidmule@126 的博客a:active当前激活状态  显示的情况非常少 所以很少使用
2.按钮式超链接
利用边框的样式模拟按钮效果。普通超链接和点击过的冲链接采用相同的样式,鼠标指针经过时的超链接相应的改变文字           颜色背景色,位置和边框。模拟按下去的效果
例子: a{
font-family:
font-size:
text-align:
margin:
}
a:link, a:visited
{
color:#aaa
padding:4 10 4 10;
color: rgb(69, 83, 83); font-family: 'Hiragino Sans GB W3', 'Hiragino Sans GB', Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px;"> text-decoration:none;
border-top:1px solid #eeeeee;
border-left:1px solid #eeeeee;
border-bottom:1px solid #717171;
border-right:1px solid #717171;
}
        a:hover{
color:#821818;
padding:5 8 3 12
 
border-top:1px solid #717171;
border-left:1px solid #717171;
border-bottoom:1px solid #eeeeee;
border-right:1px solid #eeeeee;
}
6.链接与导航 - 骡子 - stupidmule@126 的博客

 

3.css控制鼠标指针  本人认为不常用
4.浮雕背景超链接  实例应用(用table和a标签制作的菜单)
超链接背景图片的变换实现浮雕的效果,变换图片的思路
(1)原始的背景图片  
(2)a:visited鼠标浏览过和a正常时的背景图片
(3)a:hover鼠标经过时的背景图片
a标签间不要有空格
firefox中a标签不能直接设高度和宽度 ,将a变为块才可
6.链接与导航 - 骡子 - stupidmule@126 的博客

 项目列表

1.列表的符号
顺序为ol   无顺序为ul标记
ul{list-style-type:decimal}  项目编号
2.图片符号
ul设置list-style-image:url(*);此种方法不推荐
建议方法:ul:list-style-type:none
设置li标签的background图像 并设置padding-left让出图像位置
例子:li{
background:url(icon1.jpg) norepeat;
padding-left:25px;
}
 
简单的导航菜单
竖直排列菜单
<div id="navigation"> //结构
<ul>
<li><a href="#">home</a></li> 
<li><a href="#">contact us</a></li> 
<li><a href="#">web dev</a></li> 
<li><a href="#">map</a></li> 
</ul>
 
</div>
 
 
#navigation{
width:150px;
font-family:arial;
font-size:14px;
text-align:right;
}
#navigation ul{
list-style-type:none;
margin:0px;
padding:0px;
}
 

 

#navigation li{
border-bottom:1px solid #9f9fed;
}
#navigation li a {
display:block;
height:1em;
padding:5 5 5 0.5em;
text-decoration:none;
border-left:12 solid #151571;
border-right:1px solid #151571;
}
6.链接与导航 - 骡子 - stupidmule@126 的博客
再设置超链接样式
#navigation li a:link,#navigation li a :visited{
background-color#1136c1;
color:#ffffff;
}
#navigation li a :hover{
 
color:#ffff00;
border-left:12px solid yellow;
}
6.链接与导航 - 骡子 - stupidmule@126 的博客
 

   6.链接与导航 - 骡子 - stupidmule@126 的博客

width:150px从#navigation移动到#navigation li a中,即div没有宽度限制了,同时保证每个列表项的宽度都是150px
在#navigation li的样式中增加一条float:left确保各个列表项依次排列。
posted on 2017-11-27 10:23  学习记录园  阅读(260)  评论(0编辑  收藏  举报