CSS循序渐进(四)表里春秋
来源:互联网 发布:淘宝小号查询网站 编辑:程序博客网 时间:2024/06/12 01:03
跟其它的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三种状态。当例子中存在着超级链接时,就会呈现出如图一的没有下划线的淡红,而将鼠标置于其上时,鼠标变成了手形,而这个链接则会呈现出如图二的亮绿色。而一旦访问过后,该链接则会呈现出深红色。这种变化既美观了页面,又提醒了用户。为绝大多数网站采用。
事实上,有很多时候我们在没有使用锚的时候也需要对象根据用户的动作作一些改变。这时候我们往往需要当用户控制鼠标经过该对象时,能够给他一些提示。比如鼠标换个形状。像手形,十字形之类的,再结合必要的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的一些技巧性的东西就为大家介绍到这里啦。
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>- CSS 循序渐进(四)表里春秋
- CSS循序渐进(四)表里春秋
- CSS 循序渐进(一)画个瓢
- CSS循序渐进(一)画个瓢
- CSS 循序渐进(二)字的艺术
- CSS 循序渐进(三)样式“表”秀
- CSS循序渐进(二)字的艺术
- CSS循序渐进(三)样式“表”秀
- 循序渐进学习使用WINPCAP(四)
- IO流循序渐进四
- 循序渐进学unix——上机记录(四)
- 从初识Linux到离不开系列(四)循序渐进
- Jsp + JavaBean循序渐进教程(四)
- Jsp + JavaBean循序渐进教程(四)
- Jsp + JavaBean循序渐进教程(四)
- Jsp + JavaBean循序渐进教程(四)
- Jsp + JavaBean循序渐进教程(四)
- 在CSS样式表里使用JavaScript
- CSS循序渐进(三)样式“表”秀
- 指针、数组和函数
- win2000用户,你的“本地连接”会突然不见了吗?
- 如何学习MySQL数据库 初学者使用指南
- 六个经典的英语面试问题
- CSS循序渐进(四)表里春秋
- Linux Devoloping Tools Reference
- 如何从 MySQL 数据库表中检索数据
- 如何将bash同时重定向到标准输出和其他文件
- 整合系列之二--------------Struts 2整合MyFaces(16)
- 精通CSS滤镜(一)
- 学习JavaScript(二)
- delphi窗体图体画法 之我见!
- MySQL公司八月结束旧版数据库更新收费