JS产品分类列表练习
发布时间：2016-03-15 19:00:03
CSS:*{padding: 0;margin: 0;} ul,li{list-style: none;} body{color: #666;background: #f5f5f5;} a{text-decoration: none;color: #666;} .cont ...
CSS:
*{padding: 0;margin: 0;} ul,li{list-style: none;} body{color: #666;background: #f5f5f5;} a{text-decoration: none;color: #666;} .cont{ width: 400px; margin: 30px auto; position: relative; background: #fff; box-shadow: 2px 2px 5px #e6e2e2; } .tit_1,.tit_2,.tit_3,.tit_4{/*分类标题样式*/ height: 44px; line-height: 44px; position: relative; padding-left: 40px; } .tit_1:before{/*标题部分的小三角形*/ content: ''; position: absolute; left: 15px; top: 12px; border:10px solid transparent; border-left-color:#ccc; } .tit_2:before{/*标题部分的小三角形*/ content: ''; position: absolute; left: 15px; top: 12px; border:10px solid transparent; border-left-color:#fff; } .tit_3:before{/*标题部分的小三角形*/ content: ''; position: absolute; left: 15px; top: 17px; border:10px solid transparent; border-top-color:#ccc; } .tit_4:before{/*标题部分的小三角形*/ content: ''; position: absolute; left: 15px; top: 17px; border:10px solid transparent; border-top-color:#fff; } .active{/*列表内容的样式*/ height: 28px; line-height: 28px; padding-left: 40px; cursor: pointer; } #ul1{ padding: 20px 0; } .hidden{/*隐藏列表内容*/ display: none; } .on{/*显示列表内容*/ display: block; }
原标题：JS产品分类列表练习
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
