CSS超链接-光标-缩放

1.CSS 中链接的使用
2.CSS 中光标的使用
3.CSS 中缩放的使用

1、CSS 中链接的使用
超链接伪类属性
a:link    表示该超链接文字尚未被点选
a:visited 表示该超链接文字已被点选过
a:active  表示该超链接文字正被点选,但未被放开
a:hover   表示当鼠标停留在文字上

2、CSS 中光标的使用
属性名称     属性值      说明
cursor     auto          光标是手指
              crosshair   光标是十子形
              default      光标是箭头
              pointer      光标是手形
              move        光标是移动的符号
              text          输入文字的符号
              wait          漏斗
              help          帮助

3、CSS 中缩放的使用
属性名称 属性值             说明
zoom   normal             使用对象的实际尺寸

百分数/浮点实数  放大缩小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keyword" content="CSS超链接-光标-缩放"/>

<meta name="description" content="CSS超链接-光标-缩放"/>

<meta name="author" content="xiaobei qq:2801616735"/>

<title>CSS超链接-光标-缩放</title>

<style>

    a:hover{color:red;text-decoration:none;}

    a:visited{color:green;text-decoration:none;}

</style>

</head>

<body>

    <ul>

        <li>超链接</li>

        <li>光标</li>

        <li>缩放</li>

    </ul>

    <h2>1、超链接</h2>

    <p>

        <dl>

            <dt>默认情况:</dt>

            <dd><a href="http://localhost/xhtml/css_link.html">默认情况</a></dd>

            <dt>当鼠标停留在文字上:</dt>

            <dd><a href="http://localhost/xhtml/css_link.html">当鼠标停留在文字上</a></dd>

            <dt>该超链接文字已被点选过:</dt>

            <dd><a href="http://localhost/xhtml/css_link.html">该超链接文字已被点选过</a></dd>

        </dl>

    </p>

    <hr/>

    <h2>2、光标</h2>

    <p>

        <dl>

            <dt>默认情况</dt>

            <dd><span>默认情况</span></dd>

            <dt>箭头</dt>

            <dd><span style="cursor:default;">箭头</span></dd>

            <dt>手形</dt>

            <dd><span style="cursor:pointer;">手形</span></dd>

            <dt>帮助</dt>

            <dd><span style="cursor:help;">帮助</span></dd>

        </dl>

    </p>

    <hr/>

    <h2>3、缩放</h2>

    <p style="width:100px;height:100px; background-color:red; zoom:0.5;">缩放</p>

</body>

</html>

CSS超链接-光标-缩放的更多相关文章

  1. Css中光标,DHTML,缩放的使用

    Css中光标的使用: 属性名称                属性值                                         说明cursor                 ...

  2. CSS超链接样式，去除下划线等

    控制超链接样式 链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ...

  3. CSS实现图片缩放特效

    今天是感恩节,祝大家感恩节快乐哦!最近天冷了,大家注意保暖哟.下面一起看看小颖写的demo吧. html代码: <!DOCTYPE html> <html> <head& ...

  4. [css]通过transform缩放邮件客户端h5页面

    摘要 最近一直在折腾邮件通知的东东,大概逻辑就是如果有新邮件,向收件人的app推送一条服务号消息,并且在单击该消息的时候,需要展示邮件的详情. 技术 这里是使用Exchange EWS API来实现的 ...

  5. 使用JavaScript 和 CSS 实现图像缩放和剪裁(转)

    英文原文:Scale and Crop an Image using Javascript and CSS 在页面上需要裁减和缩放一张图片是一个常见问题.缩放图片比较简单的方法是使用image的hig ...

  6. css超链接

    超链接的代码<a href="http://www.divcss5.com/" target="_blank" title="关于div css ...

  7. HTML+CSS之光标悬停图片翻转效果

    设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...

  8. css实现网页缩放时固定定位的盒子与版心一同缩放

    在网页设计过程中我们可能会出现这种情况:设置好一个固定定位的盒子,但是当网页缩放时固定定位的盒子与网页的版心分离 这是因为css定位中的固定定位是以页面为参照进行定位的,而不是以版心盒子为参照,那么我 ...

  9. PHP全栈开发（八）：CSS Ⅴ 超链接 style

    CSS里面有专门针对超链接的选择器,也就是他们: a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - ...

随机推荐

  1. CSS实例：水平居中和垂直居中的多种解决方案

    1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同! Example Sourc ...

  2. c++对文件操作的支持(二)

    #include <stdio.h> #include <iostream> #include <fstream> using namespace std; voi ...

  3. PARTITION(number theory) ALSO Explosive number in codewars

    问题出于codewars,简言之:寻找和为一个整数的的不同整数组合.https://en.wikipedia.org/wiki/Partition_(number_theory) 例如:和为6的整数组 ...

  4. jquery编写的简单日历

    以前在开发web页面的时候遇到日历,都是直接引入一些日历组件来用,一直不太明白实现原理,总感觉挺复杂的. 今天尝试着用jquery写了一个简单的日历功能,可以选择年份,月份,返回今天,原来简单的日历功 ...

  5. 阿里云的linux命令小结

    /** ---------------- [ 华丽分割线 ] ------------------------ ### 121.40.120.167 操作 ### 1.启动 nginx cd /usr ...

  6. WdatePicker日历控件使用方法

    1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架 ...

  7. Android设置全屏

    全屏显示 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLA ...

  8. jdk1.6,jdk1.7共存

    当然可以,安装的时候记得选择不同的安装目录,安装好以后,可以在开发工具(如eclipse)中切换不同的编译环境和运行环境.其实只要安装eclipse就自带了jdk1.3-1.6的编译环境了. Mac下 ...

  9. web本地存储-LocalStorage

    LocalStorage是HTML5 提供的在客户端存储数据的方法.替代但不同于之前的globalStorage,规则作用范围事先已设定好,是同一个域名(子域无效),使用同一种协议,在同一个端口上.目 ...

  10. VC维的物理意义

    vc约等于可调节参数的个数 来自为知笔记(Wiz)