使用ajax实现分类查询,使用jQuery实现带分类过滤条件的搜索框

CSS

语言：

CSSSCSS

确定

* {

padding: 0;

margin: 0;

}

body {

font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

overflow-x: hidden;

}

h1 {

font-size: 180px;

line-height: 180px;

text-transform: uppercase;

color: #1275AD;

position: absolute;

text-shadow: 0 1px 1px #45A8DF;

top: -25px;

left: -20px;

white-space: nowrap;

}

.box {

margin: 20px auto 0 auto;

height: 430px;

width: 100%;

position: relative;

-moz-box-shadow: 0px 0px 5px #444;

-webkit-box-shadow: 0px 0px 5px #444;

box-shadow: 0px 0px 5px #444;

background: #1783BF url(click.png) no-repeat 380px 80px;

}

.box h2 {

background-color: #1275AD;

border-color: #0E5A85 #0E5A85 #0E5A85;

border-style: ridge ridge solid;

border-width: 1px;

color: #FFFFFF;

font-size: 22px;

padding: 10px;

text-shadow: 1px 1px 1px #000000;

}

.sb_wrapper{

margin:0;

padding:0;

position: absolute;

top:80px;

left:40px;

width:372px;

}

.sb_wrapper input[type="text"],

ul.sb_dropdown{

border:1px solid #fff;

background: #fafafa;

background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#fafafa));

background: -moz-linear-gradient(top, #f2f2f2, #fafafa);

font-size:24px;

font-family:"Myriad Pro", "Trebuchet MS", sans-serif;

-moz-box-shadow:1px 1px 3px #555;

-webkit-box-shadow:1px 1px 3px #555;

-box-shadow:1px 1px 3px #555;

outline:none;

padding:6px 5px 6px 20px;

text-shadow:1px 1px 1px #fff;

width:295px;

float:left;

margin:3px 0px;

}

ul.sb_dropdown{

float:left;

list-style:none;

width:360px;

padding:6px 5px;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius:10px;

-webkit-border-bottom-left-radius:10px;

border-bottom-right-radius:10px;

border-bottom-left-radius:10px;

}

ul.sb_dropdown li{

font-size:16px;

line-height:32px;

height:32px;

float:left;

width:50%;

}

ul.sb_dropdown li input[type="checkbox"]{

float:left;

margin:10px 4px 0 5px;

}

ul.sb_dropdown li.sb_filter{

width:348px;

border:1px solid #f9f9f9;

clear:both;

background: #ddd;

font-size:12px;

text-transform:uppercase;

letter-spacing:1px;

color:#444;

height:16px;

line-height:16px;

padding:5px;

-moz-box-shadow:0px 0px 2px #777;

-webkit-box-shadow:0px 0px 3px #555 inset;

-box-shadow:0px 0px 3px #555 inset;

}

span.sb_up,

span.sb_down{

position:absolute;

top:3px;

left:0px;

width:14px;

height:41px;

background-color:#f2f2f2;

background-position:center center;

background-repeat: no-repeat;

z-index:10;

border:1px solid #fff;

-moz-box-shadow:1px 0px 1px #ddd;

-webkit-box-shadow:1px 0px 1px #ddd;

-box-shadow:1px 0px 1px #ddd;

}

span.sb_up{

background-image:url(/uploads/1908/arrow_up.png);

}

span.sb_down{

background-image:url(/uploads/1908/arrow_down.png);

}

input.sb_search{

background:#f2f2f2 url(../icons/search.png) no-repeat center center;

height:43px;

width:50px;

float:left;

border:none;

margin:3px 0px;

border:1px solid #fff;

-moz-box-shadow:1px 1px 3px #555;

-webkit-box-shadow:1px 1px 3px #555;

-box-shadow:1px 1px 3px #555;

outline:none;

cursor:pointer;

}

input.sb_search:hover{

background-color:#fff;

}