zoukankan      html  css  js  c++  java
  • 五彩导航案例

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style type="text/css">
     7         a.one{
     8             display:inline-block;
     9             height:58px;
    10             width:120px;
    11             text-align:center;
    12             text-decoration:none;
    13             color:#fff;
    14             line-height:50px;
    15             background:url("images/bg1.png");
    16         }
    17         a.one:hover{
    18             background:url("images/bg2.png");
    19         }
    20         a.two{
    21             display:inline-block;
    22             height:58px;
    23             width:120px;
    24             text-align:center;
    25             text-decoration:none;
    26             color:#fff;
    27             line-height:50px;
    28             background:url("images/bg3.png");
    29         }
    30         a.two:hover{
    31             background:url("images/bg4.png");
    32         }
    33         a.three{
    34             display:inline-block;
    35             height:58px;
    36             width:120px;
    37             color:#fff;
    38             text-align:center;
    39             line-height:50px;
    40             text-decoration:none;
    41             background:url("images/bg5.png");
    42         }
    43         a.four{
    44             display:inline-block;
    45             height:58px;
    46             width:120px;
    47             color:#fff;
    48             text-align:center;
    49             line-height:50px;
    50             text-decoration:none;
    51             background:url("images/bg6.png");
    52         }
    53     </style>
    54 </head>
    55 <body>
    56     <a href="#" class="one">五彩导航</a>
    57     <a href="#" class="two">五彩导航</a>
    58     <a href="#" class="three">五彩导航</a>
    59     <a href="#" class="four">五彩导航</a>
    60 </body>
    61 </html>

  • 相关阅读:
    c# winfrom 查看网络图片
    C# winfrom 读取txt文本内容
    c# winfrom 下载网页源代码
    c# winfrom 下载网络资源
    c# 换行符
    内存映射问题
    APUE 书中 toll 函数
    [P3387] 【模板】缩点
    [P5960] 【模板】差分约束算法
    [CF1442C] Graph Transpositions
  • 原文地址:https://www.cnblogs.com/twinkle-/p/9096195.html
Copyright © 2011-2022 走看看