zoukankan      html  css  js  c++  java
  • css一个图片包含多个图片|网站侧栏导航

    <html>
    <head><title>Hello World</title>
    <style>
    .style1{
    width:60px;margin-left:570px;position:fixed;left:50%;bottom:134px;_position:absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight - 134+'px');display:block;
    }
    .style1 a{
    background:url(./img/aa.png) no-repeat;
    display:block;
    width:60px;height:50px;
    text-decoration:none;font:16px/50px "Microsoft YaHei";text-align:center;
    color:white;
    }
    .style1 a span{
    text-align:center;
    display:none;
    }
    .style1 a:hover span{
    background-color:#39F ;
    display:block;width:59px;
    
    }
    .style1 .gouwu{
    background-position:-85px -185px;
    }
    .style1 .liren{
    background-position:-85px -236px;
    }
    .style1 .xiuxian{
    background-position:-144px -236px;
    }
    .style1 .huidingbu{
    background-position:-144px -185px;
    }
    </style>
    </head>
    <body>
    <div><span>Hello World</span></div>
    <div class="style1">
    <a href="javascript:window.scrollTo(0,638)" class="gouwu"><span>购物</span></a>
    <a href="javascript:window.scrollTo(0,1600)" class="liren"><span>丽人</span></a>
    <a href="javascript:window.scrollTo(0,2080)" class="xiuxian"><span>休闲</span></a>
    <a href="javascript:window.scrollTo(0,0)" class="huidingbu"><span>回顶部</span></a>
    </div>
    </body>
    </html>
  • 相关阅读:
    centos7+php7.1.4+mysql5.7+swoole搭建
    鄙视自己(转)
    Mysql的sql优化概念---三大范式
    PHP的设计模式-单例设计
    Composer的安装使用
    PHPstorm的一些快捷键
    论代码走查的重要性
    Java泛型读书笔记 (三)
    Java泛型读书笔记 (一)
    Java泛型读书笔记 (二)
  • 原文地址:https://www.cnblogs.com/beautiful-code/p/5004582.html
Copyright © 2011-2022 走看看