zoukankan      html  css  js  c++  java
  • 实用:滑动门tag切换

    css:

     1 *{ margin:0; padding:0; list-style:none; font-size:12px;}
     2 a{ text-decoration:none; color:#333;}
     3 #wrap{ position:relative; width:330px; height:220px; margin:20px auto;}
     4 #wrap .title{ position:relative; width:100%; overflow:hidden;}
     5 .title li{ display:block; float:left; padding:0 0 0 5px; margin:0 5px 0 0; background:url(img/tag_left.gif) left 0 no-repeat;}
     6 .title li a{ display:block; padding:6px 15px 3px 10px; background:url(img/tag_right.gif) right 0 no-repeat; text-align:center; }
     7 .title li.now{ background-position:0 -23px;}
     8 .title li.now a{ background-position:right -23px; font-weight:700;}
     9 .cont{ margin:-1px 0 0; width:308px; padding:10px; border:1px solid #d0d0d0; overflow:hidden; z-index:-100;}
    10 .cont li{ margin:0 0 5px 0;}

    xhtml:

    Code

    js:

    Code

    好了就这么多了,不想解释了,自己看吧,很简单~~哈哈

    demo下载

  • 相关阅读:
    【智能合约】编写复杂业务场景下的智能合约——可升级的智能合约设计模式(附Demo)
    深入浅出区块链——零知识证明
    centos设置静态IP
    jQuery学习笔记(四):attr()与prop()的区别
    jQuery学习笔记(三):选择器总结
    jQuery学习笔记(二):this相关问题及选择器
    jQuery学习笔记(一):入门
    des解密不完整,前面几位是乱码的解决办法
    Python __init__.py 作用详解
    MySQL for mac使用记录
  • 原文地址:https://www.cnblogs.com/rere/p/1437085.html
Copyright © 2011-2022 走看看