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

  • 相关阅读:
    DataGridView编辑后立即更新到数据库的两种方法
    DataTable 转换成 Json的3种方法
    C# 应用程序配置文件App.Config和web.config
    C#中使用JsonConvert解析JSON
    C#JsonConvert.DeserializeObject反序列化json字符
    WIN10远程桌面、常用命令
    control[控制面板]的参数
    win10企业版变成win10专业版的设置教程
    DLL加密
    微信小程序顶部tab
  • 原文地址:https://www.cnblogs.com/alaricblog/p/3278322.html
Copyright © 2011-2022 走看看