zoukankan      html  css  js  c++  java
  • 移动端滑动选项卡

    内层宽度超过50%;第二个覆盖第一个;

    .departments .gradeA,.departments .gradeB{ 100%; height: 100%; position: absolute;}
    .departments .gradeA .list,.departments .gradeB .list{ 100%; height: 100%; overflow: auto; }

    .departments .gradeA{z-index: 1; background: #f0f0f0;}

    .departments .gradeB{left: 50%; z-index: 2; background: #fff;}

    .departments{width: 100%; height: 100%; position: fixed; font-size: .6rem;}
    .departments .gradeA,.departments .gradeB{width: 100%; height: 100%; position: absolute;}
    .departments .gradeA .list,.departments .gradeB .list{width: 100%; height: 100%; overflow: auto; }
    .departments .gradeA .list li,.departments .gradeB .list li{width: 100%; height: 1.8rem; line-height: 1.8rem; }
    .departments .gradeA{z-index: 1; background: #f0f0f0;}
    .departments .gradeA .list li{text-indent: 1.6rem; border-bottom: 1px solid #ddd;}
    .departments .gradeA .list .current{background: #fff; background: #fff url(../images/WeChatTriangle.png) no-repeat .6rem .7rem; background-size: .32rem .4rem;}
    .departments .gradeA .list a{color: #222;}
    .departments .gradeB{left: 50%; z-index: 2; background: #fff;}
    .departments .gradeB .list li{text-indent: 1.3rem; border-bottom: 1px solid #fff;}
    .departments .gradeB .list a{color: #666;}
    <div class="departments">
                <div class="gradeA">
                    <ul class="list">
                        <li class="current"><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                    </ul>
                </div>
                <div class="gradeB">
                    <ul class="list">
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                        <li><a href="">特色科室</a></li>
                    </ul>
                </div>
            </div>
  • 相关阅读:
    ie10 css3 transition 过渡
    asp.net之一步一个脚印
    MyEclipse安装aptana插件的问题(link方式)转
    MyEclipse的Aptana插件中配置ZenCoding成功
    PS CS6 安装错误:FATAL: Payload '{3F0238754A5246059DB6A88D4A813E8D} Camera Profiles Installer 6.0.98.0' information not found in Media_db.
    PC客户端的开发插件Eclipse RCP
    Silverlight获取焦点
    广而告知
    wpf窗体定位
    surface开发教程[ScatterView控件] 二.
  • 原文地址:https://www.cnblogs.com/hellman/p/5530520.html
Copyright © 2011-2022 走看看