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. EF项目中应用出现问题？？？

    最近用EF做了个项目发现很多不便利的地方. 具体如下. 1,我是通过edmx 建模,然后通过模型生成数据库. 虽然数据库已经创建成功但是问题来了,我在加字段,和标的时候再次生成时domeo.edmx. ...

  2. css系列教程--选择器

    css派生选择器:是指在某个样式表或者dom元素的行内定义行内元素的属性,而其他同名样式在其他dom节点无效的样式表定义方式.例如:div ul li{border:1px solid red;}&l ...

  3. 使用VS2003 发送Email

    使用VS2003发送Email与之后VS2005版本及以上VS版本不一样,记录一下, 需要引用using System.Web.Mail; public void SendEmail() { try ...

  4. EC读书笔记系列之19：条款49、50、51、52

    条款49 了解new-handler的行为 记住: ★set_new_handler允许客户指定一个函数,在内存分配无法获得满足时被调用 ★Nothrow new是一个颇为局限的工具,∵其只适用于内存 ...

  5. PCL点云库增加自定义数据类型

    #include <pcl/filters/passthrough.h> #include <pcl/filters/impl/passthrough.hpp> // the ...

  6. 关于css3的边框的border-radius和border-image用法的详解

      一.圆角边框:IE9.0以前版本不支持   border-radius: 接受8个属性,前四个为x轴,后四个为y轴,以斜杠划分x轴.y轴,即border-radius:左上较 右上角 右下角 左下 ...

  7. PendingIntent Bundle null解决方案

    在安卓开发中,用通知栏,如果点击通知栏条目,跳转Intent需要传值的时候会出现问题,传入值失败. Intent intent; PendingIntent sender=PendingIntent. ...

  8. Jsoup小Demo

    Jsoup小Demo public class JsoupUtil { public void parseWangYi() { Document doc = null; try { //eg1:解析百 ...

  9. PHP面试题之设计模式

    设计模式是技术面试的时候难免会被问到的一个问题,特别会让你举例说明各种设计模式的使用场景. 使用设计模式可以减轻我们的工作量,优化我们的代码. 设计模式非常的多,这里介绍单例模式,工厂模式,组合模式, ...

  10. LINUX用户管理——/etc/passwd文件详解

      输入vi /etc/passwd 可以查看此文件的内容 .本机内容如下: [root@localhost ~]# vi /etc/passwdroot:x:0:0:root:/root:/bin/ ...