• 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;
     }

  • 相关阅读:
    运算符
    格式化输出
    while循环
    if 判断语句
    Swift # 字典
    Swift # 数组
    Swift # 字符串
    [ Swift # 函数 ]
    [ Bubble Sort ]& block
    数据结构 # 二叉树/堆/栈
  • 原文地址:https://www.cnblogs.com/alaricblog/p/3278322.html
Copyright © 2020-2023  润新知