zoukankan      html  css  js  c++  java
  • css学习1----css超链接效果

    css超链接标签<a>伪类别:

    a:link  超链接的普通样式,正常浏览状态的风格

    a:visited  被单击过的超链接的风格

    a:hover  鼠标指针经过超链接上的样式风格

    a:active  在超链接上单击时,即当前激活时,超链接的样式风格

    css通过以上4个伪类别,再配合各种属性风格制作出千变万化的动态超链接。

    html文件如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>test3_css.html</title>
     
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      

      <link rel="stylesheet" href="../css/test3_css.css" type="text/css"></link></head>
     
      <body>
        <a href="#">首页</a>
        <a href="#">心语</a>
        <a href="#">开题</a>
        <a href="#">那双手</a>
        <a href="#">水面上的落叶</a>
        <a href="#">日暮</a>
        <a href="#">卷尾</a>
       
      </body>
    </html>

    css 文件如下:

     a{
       font-family: Arial;
       font-size: 2em;
       text-align: center;
       margin: 3px;
     
     }
     a:link,a:visited{
       color: #A62020;
       padding: 4px 10px 4px 10px;
       background-color: #ecd8db;
       text-decoration: none;
       border-top: 1px solid #EEEEEE;
       border-left: 1px solid #EEEEEE;
       border-bottom: 1px soild #717171;
       border-right: 1px soild #717171;
     
     
     }
     
     a:hover{
       color: #821818;
       padding: 5px 8px 3px 12px;
       background-color: #e2c4c9;
       border-top: 1px soild #717171;
       border-left: 1px soild #717171;
       border-bottom: 1px soild #EEEEEE;
       border-right: 1px soild #EEEEEE;
     }

  • 相关阅读:
    git线上操作
    IDEA快捷方式
    Java 四种线程池
    java 获取当前天之后或之前7天日期
    如何理解AWS 网络,如何创建一个多层安全网络架构
    申请 Let's Encrypt 通配符 HTTPS 证书
    GCE 部署 ELK 7.1可视化分析 nginx
    使用 bash 脚本把 AWS EC2 数据备份到 S3
    使用 bash 脚本把 GCE 的数据备份到 GCS
    nginx 配置 https 并强制跳转(lnmp一键安装包)
  • 原文地址:https://www.cnblogs.com/alaricblog/p/3278322.html
Copyright © 2011-2022 走看看