以下是 HTML5仿当当网手机条件筛选代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="author" content="PR" />
<meta name="copyright" content="PR" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>HTML5仿当当网手机条件筛选代码</title>
<link rel="stylesheet" media="screen" href="css/style.css" />
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.filter.js"></script>
</head>
<body>
<!--顶部-->
<header id="header" class="wap-header">
<a id="headerFiltrate" class="wap-header-back wap-header-l" href="javascript:void(0)" title="筛选">筛选</a>
<section class="wap-search">
<form method="post">
<div class="wap-search-text"><input type="text" placeholder="搜索商品、品牌、种类" /></div>
<input type="submit" value="" />
</form>
</section>
</header>
<!--筛选-->
<section id="filtratePage" class="screening-conditions">
<header class="wap-header">
<a id="filtrateBackContains" class="wap-header-back wap-header-l" href="javascript:void(0)"></a>
<h1>筛选</h1>
</header>
<article class="filtrate-cont">
<div id="classify" class="filtrate-category">
<a href="javascript:void(0)">
分类<span>全部展开</span>
</a>
</div>
<div class="filtrate-classify">
<ul class="filtrate-classify-list">
<li class="active">
<a href="javascript:void(0)">图书</a>
<ul>
<li>
<a href="javascript:void(0)">童书</a>
<ul>
<li>
<a href="javascript:void(0)">3-6岁</a>
<ul>
<li>
<a href="javascript:void(0)">卡通/动漫/图画书</a>
</li>
<li>
<a href="javascript:void(0)">文学</a>
</li>
<li>
<a href="javascript:void(0)">科普/百科</a>
</li>
<li>
<a href="javascript:void(0)">益智游戏</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">7-10岁</a>
<ul>
<li>
<a href="javascript:void(0)">文学</a>
</li>
<li>
<a href="javascript:void(0)">科普/百科</a>
</li>
<li>
<a href="javascript:void(0)">卡通/动漫/图画书</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">11-14岁</a>
<ul>
<li>
<a href="javascript:void(0)">通话</a>
</li>
<li>
<a href="javascript:void(0)">励志成长</a>
</li>
<li>
<a href="javascript:void(0)">少儿英语</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">小说</a>
<ul>
<li>
<a href="javascript:void(0)">外国小说</a>
</li>
<li>
<a href="javascript:void(0)">中国当代小说</a>
</li>
<li>
<a href="javascript:void(0)">中国古代小说</a>
</li>
<li>
<a href="javascript:void(0)">中国现代小说</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">考试</a>
<ul>
<li>
<a href="javascript:void(0)">财税外贸保险类考试</a>
<ul>
<li><a href="javascript:void(0)">注册会计师考试</a></li>
<li><a href="javascript:void(0)">中级会计职称考试</a></li>
<li><a href="javascript:void(0)">证券从业资格考试</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">外语考试</a>
<ul>
<li><a href="javascript:void(0)">英语四/六级</a></li>
<li><a href="javascript:void(0)">IELTS考试用书</a></li>
<li><a href="javascript:void(0)">TOEFL考试用书</a></li>
<li><a href="javascript:void(0)">日语考试用户</a></li>
<li><a href="javascript:void(0)">英语专业四/八级</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">建筑工程类职称考试</a>
<ul>
<li><a href="javascript:void(0)">全国一级建造师考试</a></li>
<li><a href="javascript:void(0)">全国二级建造师考试</a></li>
<li><a href="javascript:void(0)">全国造价工程师考试</a></li>
<li><a href="javascript:void(0)">勘察设计注册公用设备工程师</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">中小学教辅</a>
<ul>
<li>
<a href="javascript:void(0)">中小学阅读</a>
<ul>
<li><a href="javascript:void(0)">课外阅读</a></li>
<li><a href="javascript:void(0)">新课标</a></li>
<li><a href="javascript:void(0)">文言文/古诗词</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">教育理论/教师用书</a>
<ul>
<li><a href="javascript:void(0)">教育理论/教育主张</a></li>
<li><a href="javascript:void(0)">幼儿园/学前教育</a></li>
<li><a href="javascript:void(0)">学科教学</a></li>
<li><a href="javascript:void(0)">教师成长/教师内功</a></li>
<li><a href="javascript:void(0)">课堂教学/课堂管理</a></li>
<li><a href="javascript:void(0)">班主任用书</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="filtrate-price">
价格
<input id="minPrice" type="number" />
~
<input id="maxPrice" type="number" />
元
</div>
<div id="address" class="filtrate-category">
<a href="javascript:void(0)">
收货地<span>全部展开</span>
</a>
</div>
<div class="filtrate-address">
<ul class="clearfix">
<li><a href="javascript:void(0)">北京</a></li>
<li><a href="javascript:void(0)">天津</a></li>
<li><a href="javascript:void(0)">河北</a></li>
<li><a href="javascript:void(0)">河南</a></li>
<li><a href="javascript:void(0)">山西</a></li>
<li><a href="javascript:void(0)">山东</a></li>
<li><a href="javascript:void(0)">内蒙古</a></li>
<li><a href="javascript:void(0)">辽宁</a></li>
<li><a href="javascript:void(0)">吉林</a></li>
<li><a href="javascript:void(0)">黑龙江</a></li>
<li><a href="javascript:void(0)">上海</a></li>
<li><a href="javascript:void(0)">江苏</a></li>
<li><a href="javascript:void(0)">浙江</a></li>
<li><a href="javascript:void(0)">安徽</a></li>
<li><a href="javascript:void(0)">福建</a></li>
<li><a href="javascript:void(0)">江西</a></li>
<li><a href="javascript:void(0)">湖北</a></li>
<li><a href="javascript:void(0)">湖南</a></li>
<li><a href="javascript:void(0)">广东</a></li>
<li><a href="javascript:void(0)">广西</a></li>
<li><a href="javascript:void(0)">海南</a></li>
<li><a href="javascript:void(0)">四川</a></li>
<li><a href="javascript:void(0)">重庆</a></li>
<li><a href="javascript:void(0)">贵州</a></li>
<li><a href="javascript:void(0)">云南</a></li>
<li><a href="javascript:void(0)">西藏</a></li>
<li><a href="javascript:void(0)">陕西</a></li>
<li><a href="javascript:void(0)">新疆</a></li>
<li><a href="javascript:void(0)">青海</a></li>
<li><a href="javascript:void(0)">宁夏</a></li>
<li><a href="javascript:void(0)">甘肃</a></li>
<li><a href="javascript:void(0)">台湾</a></li>
<li><a href="javascript:void(0)">香港</a></li>
<li><a href="javascript:void(0)">澳门</a></li>
</ul>
</div>
<div class="filtrate-other">
<h2>其他条件</h2>
<ul class="clearfix">
<li><label>促销</label></li>
<li><label>尾品汇</label></li>
<li><label>自营</label></li>
<li class="active"><label>有货</label></li>
<li><label>预售</label></li>
<li><label>海外购</label></li>
</ul>
</div>
</article>
<footer class="filtrate-footer">
<ul class="filtrate-btn clearfix">
<li><input class="filtrate-reset" type="button" value="清空筛选条件"></li>
<li><input class="filtrate-submit" type="button" value="确定"></li>
</ul>
</footer>
</section>
</body>
</html>CSS代码(style.css):
@charset "UTF-8";/**CSS Reset**/
body,div,span,h1,h2,h3,h4,h5,h6,header,footer,section,article,aside,details,figcaption,figure,hgroup,nav,menu,address,time,canvas,audio,video,p,pre,sup,sub,ul,ol,li,dl,dt,dd,form,input,button,textarea,select,iframe,img,a{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
header,footer,section,article,aside,details,figcaption,figure,hgroup,nav,menu{display:block;}
html,body{font-size:20px;-webkit-overflow-scrolling:touch;}
body{background-color:#eee;color:#333;font-family:"Helvetica Neue","Microsoft Yahei",Tahoma,Arial,Roboto,"Droid Sans","Droid Sans Fallback","Heiti SC",sans-self;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
ul,ol{list-style-type:none;}
a{color:#333;text-decoration:none;outline:none;}
a:link,a:visited,a:hover,a:active{color:#333;outline:none;}
/*清除浮动*/
.clearfix:after{clear:both;display:block;height:0;content:"";}
/*顶部*/
.wap-header{background-color:#fff;}
.wap-header h1{padding:0 2.4rem;text-align:center;font-size:1rem;line-height:2.2rem;}
.wap-search{height:2.2rem;padding:.36rem 2.4rem;}
.wap-search form{position:relative;background-color:#e4e4e4;border-radius:1.1rem;overflow:hidden;}
.wap-search form input[type="submit"]{position:absolute;top:0;right:0;width:1.75rem;height:1.48rem;border:none;background:url(../img/search-btn.png) no-repeat center;background-size:50%;}
.wap-search-text{margin-right:1.75rem;}
.wap-search-text input[type="text"]{display:block;width:100%;height:1.48rem;padding-right:1rem;padding-left:1rem;border:none;background:none;}
.wap-search-text input[type="text"]:focus{color:#ff2832;outline:none;}
a.wap-header-l,a.wap-header-r{position:absolute;top:0;display:block;width:2.2rem;height:2.2rem;text-align:center;font-size:.7rem;line-height:2.2rem;}
a.wap-header-l{left:0;}
a.wap-header-r{right:0;}
a.wap-header-back{background-size:.5rem;}
/**筛选**/
.screening-conditions{display:none;font-size:14px;}
.filtrate-cont{padding-bottom:74px;border-top:1px solid #ddd;}
/*分类*/
.filtrate-category{border-bottom:1px solid #dcdcdc;}
.filtrate-category a{display:block;padding:0 15px;background:#fff url(../img/filter-sprite.png) no-repeat right -97px;background-size:25px 193px;line-height:44px;color:#646464;}
.filtrate-category.show a{background-position:right -51px;}
.filtrate-category a span{float:right;max-width:60%;margin-right:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.filtrate-classify{height:184px;overflow:hidden;}
.filtrate-classify-list{padding:0 10px;}
.filtrate-classify-list li a{display:block;border-bottom:1px solid #dcdcdc;line-height:45px;color:#323232;}
.filtrate-classify-list li.active>a{color:#ff9600;}
/*一级分类*/
.filtrate-classify-list>li>a{padding-left:5px;}
/*二级分类*/
.filtrate-classify-list>li>ul>li>a{padding-left:25px;}
/*三级分类*/
.filtrate-classify-list>li>ul>li>ul>li>a{padding-left:45px;}
/*四级分类*/
.filtrate-classify-list>li>ul>li>ul>li>ul>li>a{padding-left:65px;}
/*五级分类*/
.filtrate-classify-list>li>ul>li>ul>li>ul>li>ul>li>a{padding-left:85px;}
/*六级以下分类*/
.filtrate-classify-list>li>ul>li>ul>li>ul>li>ul>li>ul>li a{padding-left:105px;}
/*二级分类以下所有子分类*/
.filtrate-classify-list>li>ul>li ul{display:none;}
/*价格*/
.filtrate-price{padding:0 15px;/*border-top:1px solid #dcdcdc;*/
border-bottom:1px solid #dcdcdc;background-color:#fff;line-height:45px;color:#646464;}
.filtrate-price input{width:78px;height:26px;padding:3px 0;border:1px solid #d8dbde;margin:0 5px;background-color:#ebf0f3;text-align:center;line-height:18px;color:#989da2;}
.filtrate-price input:focus{border-color:#f88b39;background-color:#fff;outline:none;}
/*收货地*/
.filtrate-address{height:121px;overflow:hidden;}
.filtrate-address ul{padding:10px 0 5px 10px;}
.filtrate-address li{float:left;width:66px;height:32px;padding:1px;border:1px solid #d8dbde;margin:0 7px 5px 0;overflow:hidden;background-color:#fff;}
.filtrate-address li.active{padding:0;border:2px solid #f88b39;}
.filtrate-address li a{display:block;text-align:center;line-height:30px;}
.filtrate-address li.active a{color:#f88b39;}
/*其他条件*/
.filtrate-other{padding-left:10px;}
.filtrate-other h2{font-size:14px;line-height:40px;}
.filtrate-other li{float:left;width:50%;padding-right:10px;}
.filtrate-other li label{display:block;padding-left:22px;background:url(../img/filtrate-select.png) no-repeat 0 10px;background-size:15px 87px;line-height:35px;color:#989da2;}
.filtrate-other li.active label{background-position:0 -34px;}
/*底部*/
.filtrate-footer{position:fixed;bottom:0;left:0;z-index:20;width:100%;background-color:#fff;box-shadow:0 -1px 4px #ccc;}
.filtrate-btn{padding:15px 10px;}
.filtrate-btn li{float:left;width:50%;padding:0 5px;}
.filtrate-btn li input{width:100%;height:34px;border-radius:2px;outline:none;font-size:16px;}
input.filtrate-reset{border:1px solid #adadad;background-color:#fff;color:#323232;}
input.filtrate-submit{border:1px solid #ff9600;background-color:#ff9600;color:#fff;}
分享到QQ
分享到微博
微信扫一扫
