移动端滑动选项卡
2016-05-26 11:49
260 查看
内层宽度超过50%;第二个覆盖第一个;
.departments .gradeA,.departments .gradeB{width: 100%; height: 100%; position: absolute;}
.departments .gradeA .list,.departments .gradeB .list{width: 100%; height: 100%; overflow: auto; }
.departments .gradeA{z-index: 1; background: #f0f0f0;}
.departments .gradeB{left: 50%; z-index: 2; background: #fff;}
.departments .gradeA,.departments .gradeB{width: 100%; height: 100%; position: absolute;}
.departments .gradeA .list,.departments .gradeB .list{width: 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>
相关文章推荐
- android6.0系统缺少com.android.internal.policy.PolicyManager导致无法获取LayoutInflater实例问题
- iOS CoreAnimation 关键帧动画 CAKeyframeAnimation
- Unity实用案例之——CameraController
- iOS开发之深复制浅复制
- iOS推送的众多坑
- Android绘制炫酷引导界面
- iOS-本地通知
- iOS系统自带分享功能
- Android实现保存图片,长图、长布局(webView等)
- iOS推送的众多坑
- Android开发之Shape和Selector、Layer-list的详解
- 定义定制动画
- java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support4/content/ContextCompat;
- iOS开发——keychain的使用
- Unity3D实现3D立体游戏原理及过程
- Android Service最全面的解析
- iOS开发之计时器
- unity3D 涂涂乐使用shader实现上色效果
- iOS 极光推送
- unity3D AR涂涂乐制作浅谈