• CSS样式表——超链接样式


    主要作用是给用HTML做的链接修改样式

    主要包括:

    1.超链接访问前(被点前)状态a:link

    2.超链接访问后(被点后)状态a:visited

    3.鼠标指向超链接时(放在上面)状态a:hover

    4.点击超链接时的状态a:active

    注意的是:顺序不能改变 简单记为L V H A

    基本格式为:

    <style type="text/css">
    a:link
    {
    color:blue;
    text-decoration:none;
    }
    a:visitd
    {]
    a:hover
    {}
    a:active
    {}
    </style>

    例子

    <!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" />
    <title>360标签</title>
    
    <link href="360小标签css表.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <table align="center" width="100%" border="0" cellspacing="0" cellpadding="8">
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.autohome.com.cn">汽车之家</a></td>
        <td><a href="http://zibo.bitauto.com">易 车 网</a></td>
        <td><a href="http://www.pcauto.com.cn">太平洋汽车</a></td>
        <td><a href="http://www.anjuke.com">安 居 客</a></td>
        <td><a href="http://out.zhe800.com">折800</a></td>
        <td><a href="http://www.suning.com"><font color="#00CC33">苏宁易购</a></font></td>
      </tr>
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.12306.cn">12306官网</a></td>
        <td><a href="http://www.people.com.cn">人民</a><span></span><a href="http://www.xinhuanet.com">新华</a></td>
        <td><a href="http://www.ganji.com">赶 集 网</a></td>
        <td><a href="http://union.dangdang.com">当 当 网</a></td>
        <td><img src="360小图标/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅游网</a></td>
        <td><a href="http://www.baidu.com"><font color="#00CC33"><i><b>1号店</b></i></a>&nbsp;<a href="http://www.baidu.com"><img src="360小图标/抢福袋.jpg" width="40"/></a></td></font>
      </tr>
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.zhenai.com">真爱婚恋网</a></td>
        <td><a href="http://www.moonbasa.com">梦 芭 莎</a></td>
        <td><a href="http://www.baidu.com">亚 马 逊</a></td>
        <td><a href="http://www.baidu.com">艺 龙 网</a></td>
        <td><a href="http://www.baidu.com">去哪儿网</a></td>
        <td><a href="http://www.baidu.com">美 丽 说</a></td></font>
      </tr>
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.baidu.com">美 团 网</a></td>
        <td><a href="http://www.baidu.com">乐视视频</a></td>
        <td><img src="360小图标/唯品会.jpg" width="15"/><a href="http://www.baidu.com">唯 品 会</a></td>
        <td><a href="http://www.baidu.com"><font color="#CC6600">聚美优品</a></td></font>
        <td><a href="http://www.baidu.com">搜 房 网</a></td>
        <td><a href="http://www.baidu.com">蘑 菇 街</a></td></font>
      </tr>
      <tr align="center"><font size="+4" face="楷体">
        <td><a href="http://www.baidu.com">猎 聘 网</a></td>
        <td><a href="http://www.baidu.com">1 药 网</a></td>
        <td><a href="http://www.baidu.com">陆金所理财</a></td>
        <td><a href="http://www.baidu.com">六 间 房</a></td>
        <td><a href="http://www.baidu.com">携程机票</a></td>
        <td><a href="http://www.baidu.com">12306·抢票</a></td></font>
      </tr>
    </table>
    
    </body>
    </html>
    View Code

    这是未修改样式的超链接(从来没点过的默认蓝色,点过之后默认紫色)

    下面用样式表修改

    
    

    @charset "utf-8";
    /* CSS Document */

    
    

    <style type="text/css">
    *
    {
    margin:0px;
    margin:0px;
    }
    a:link
    {
    color:#000;
    text-decoration:none;}/*下划线*/
    a:visited
    {
    color:#000;
    text-decoration:none}
    a:hover
    {
    color:#F00;
    text-decoration:underline;}
    a:active
    {
    color:#F60;
    text-decoration:underline;}
    </style>

     

    效果为:

     

  • 相关阅读:
    网口 光口 电口都是接什么的?
    webService学习之路(三):springMVC集成CXF后调用已知的wsdl接口
    webService学习之路(二):springMVC集成CXF快速发布webService
    全国计算机技术与软件专业技术资格(水平)考试网上报名平台
    Axis2创建WebService实例
    使用axis2构建webservice
    JavaSE----API之集合(Collection、List及其子类、Set及其子类、JDK1.5新特性)
    SGU
    REST技术第四步 多个參数注解问题
    深入源代码解析Android中的Handler,Message,MessageQueue,Looper
  • 原文地址:https://www.cnblogs.com/Chenshuai7/p/5071585.html
Copyright © 2020-2023  润新知