zoukankan      html  css  js  c++  java
  • 很有创意的导航

    效果

    <!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=gb2312" />
    <title>很有创意的CSS导航</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        
    <ul>
        <li class="home">home</li>
        <li class="about">about</li>
        <li class="rss">rss</li>
    </ul>
        
    </body>
    </html>

    CSS文件

    * {
        padding:0;
        margin:0;
    }
    ul{
        width:774px;
        height:210px;
        background:url(../images/menu-bg.jpg) no-repeat;
        list-style-type:none;
        position:relative;
        margin:100px;
    }
    li.home {
        background:url(../images/home.gif) no-repeat;
        width:144px;
        height:58px;
        text-indent:-9999px;
        cursor:pointer;
        position:absolute;
        top:30px;
        left:80px;
    }    
    li.home:hover {
        background-position:0 -58px;
    }        
    li.about {
        background:url(../images/about.gif) no-repeat;
        width:131px;
        height:51px;
        text-indent:-9999px;
        cursor:pointer;
        position:absolute;
        top:70px;
        left:270px;
    }
    li.about:hover {
        background-position:0 -51px;
    }
    
    li.rss {
        background:url(../images/rss.gif) no-repeat;
        width:112px;
        height:47px;
        text-indent:-9999px;
        cursor:pointer;
        position:absolute;
        top:50px;
        left:510px;
    }
    li.rss:hover {
        background-position:0 -47px;
    }
  • 相关阅读:
    关于微服务的协议概述
    Eclipse 安装阿里巴巴代码规范插件
    Eclipse安装LomBok插件
    关于JAVA架构师
    关于Object类的一些方法
    [SoapUI] SoapUI官方文档
    [Jmeter] 用xsltproc生成html格式的报告
    [RF] Robot Framework新手干货(转载)
    【SoapUI】比较Json response
    怎样查看一个端口有无开启
  • 原文地址:https://www.cnblogs.com/LO-ME/p/3617699.html
Copyright © 2011-2022 走看看