相关文章
北京网站制作ASP生成静态Html文件技术杂谈
企通互联第二章 CSS的应用方式
网站设计CSS+DIV网页特效欣赏:非常酷的角BANNER
网站制作DreamweaverMX Ultradev探索(4-2)
北京网站设计Flash MX 2004 时间轴特效(3)
北京网站制作Flash视频教程:3.1 图层操作
企通互联在网页中插入视频播放代码全集
网站建设DreamWeaver,经典(二)
网站设计DreamwaverMX与ASP.NET(三)
www.qitongnet.com改善用户体验之密码强度提示
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置:首页 >> 网站制作 >> 北京网站设计企通互联CSS 循序渐进(四)表里春秋
北京网站设计企通互联CSS 循序渐进(四)表里春秋
跟其它的tag一样,Anchor的定义方法也可以是:
A:{css标记}
可是它特殊之处在于,它有各种相关的属性,比如visited(浏览过),active(激活),hover(鼠标在其上),link(有链接)。可以根据不同需要而做出专门的定义以根据用户不同的动作做出反应,从而形成比较好的效果。
比如说,您可以做以下的定义:
< html>企通互联
< head>北京网页设计
< title>Untitled Document< /title>北京网页设计
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">企通互联
< style type="text/css">网站建设
< !-- a:active { font-family: " 北京网站设计宋体"; font-size: 9pt; color: #9999FF; text-decoration: underline}a:hover { font-family: "宋体"; font-size: 9pt; color: #99FF99; text-decoration: underline}a:link { font-family: "宋体"; font-size: 9pt; color: #FFCCCC; text-decoration: none}-->北京网站设计
< /style>网站设计
< /head>网页设计
< body bgcolor="#000000">网站制作
< a href="www.www.www">返回< /a> 北京网站制作
< /body>北京网页设计
< /html>
![]() |
![]() |
|
图一 |
图二 |
在这个例子中,定义了锚的active,hover,link三种状态。当例子中存在着超级链接时,就会呈现出如图一的没有下划线的淡红,而将鼠标置于其上时,鼠标变成了手形,而这个链接则会呈现出如图二的亮绿色。而一旦访问过后,该链接则会呈现出深红色。这种变化既美观了页面,又提醒了用户。为绝大多数网站采用。 www.qitongnet.com
事实上,有很多时候我们在没有使用锚的时候也需要对象根据用户的动作作一些改变。这时候我们往往需要当用户控制鼠标经过该对象时,能够给他一些提示。比如鼠标换个形状。像手形,十字形之类的,再结合必要的javascript,不就可以出现很炫的效果了吗?而且很多时候使用了锚的话容易改变当前焦点。比如当我们使用到Dhtml中的层概念时,如果是层是不可见的,利用锚将其改为可视,可一旦鼠标移上去以后,焦点马上到了层的上面,令大家感到非常不方便。不过,css里面刚好有这个属性,可以帮我们改变鼠标属性,解除这个烦恼。我们现在就看这个例子:
< html>网站建设
< head>网站建设
< title>测试一< /title>网站设计
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">北京网站设计
< style type="text/css">网页设计
< !-- .text1 { font-family: "宋体"; font-size: 9pt; color: #9999FF; cursor: crosshair}网站建设
-->北京网站建设
< /style>北京网站建设
< /head> 网站建设网页设计
< body bgcolor="#FFFFFF">网站建设
< p align="center" class="text1" onClick="javascript:{window.close()}">关闭窗口< /p> 网页设计
< /body>企通互联
< /html>
这里的关闭窗口的这个文字鼠标属性为一个十字,所以当移上去时,鼠标就变化为十字形。而点击它则会出现关闭窗口事件。 网页设计
这个属性能使用的鼠标形状还有:
crosshair:十字;
hand:手形;
text:文本光标;
wait:沙漏;
help:问号;
e-resize:右箭头;
ne-resize: 网站设计右上向箭头;
n-resize:向上箭头; 网站制作
nw-resize:左上箭头;
w-resize:向左箭头;
sw-resize:左下箭头;
s-resize:向下箭头;
se-resize:右下箭头。
好了,关于css的一些技巧性的东西就为大家介绍到这里啦。

