css布局实现多条件筛选效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现多条件筛选效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分类条件筛选列表</title> <style> /* 公共样式表css */ html,body { color: #333; margin: 0; height: 100%; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; color: #000; } img { border: 0; } body { background: #F4F5F9; color: #666; } html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { margin: 0; padding: 0; } a { text-decoration: none; color: #08acee; } button { outline: 0; } img { border: 0; } button,input,optgroup,select,textarea { margin: 0; font: inherit; color: inherit; outline: none; } li { list-style: none; } a { color: #666; } a:hover { color: #eee; } .clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { } /* 必要布局样式css */ .cation-content { width: 1200px; margin: 0 auto; padding: 0; } .cation-middle { line-height: 48px; background: #fff; padding: 10px 20px 10px 30px; font-size: 14px; } .cation-list { overflow: hidden; } .cation-list dt { float: left; width: 64px; font-weight: 700; line-height: 48px; position: relative; color: #333; } :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cation-list dt:after { content: ""; position: absolute; right: 12px; top: 22px; border: 1px solid #333; border-width: 0 1px 1px 0; width: 4px; height: 4px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .cation-list dd { border-bottom: 1px dotted #e0e0e0; margin-left: 64px; overflow: hidden; } .cation-list dd a { color: #8d8d91; font-size: 14px; line-height: 14px; height: 14px; float: left; border-right: 1px solid #e0e0e0; padding: 0 18px; margin: 17px 0; } .cation-list dd a.on, .cation-list a:hover { color: #fc8080; } .cation-list dd a:last-child { border-right: 0 none; } .cation-list:last-of-type dd { border-bottom: 0 none; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> </head> <body> <div class="cation-content"> <div style="height:50px"></div> <!-- 可以删除 --> <div class="cation-middle"> <dl class="cation-list"> <dt>分类</dt> <dd> <a href="#" rel="" name="mode" class="all on">全部</a> <a href="#" rel="服装鞋包" name="mode" class="default">服装鞋包</a> <a href="#" rel="家电数码" name="mode" class="default">家电数码</a> <a href="#" rel="英文外贸" name="mode" class="default">英文外贸</a> <a href="#" rel="综合通用" name="mode" class="default">综合通用</a> <a href="#" rel="食品保健" name="mode" class="default">食品保健</a> <a href="#" rel="团购模板" name="mode" class="default">团购模板</a> <a href="#" rel="美容护肤" name="mode" class="default">美容护肤</a> <a href="#" rel="珠宝饰品" name="mode" class="default">珠宝饰品</a> <a href="#" rel="鲜花礼品" name="mode" class="default">鲜花礼品</a> <a href="#" rel="童装母婴" name="mode" class="default">童装母婴</a> </dd> </dl> <dl class="cation-list"> <dt>主题</dt> <dd> <a href="#" rel="" name="theme" class="all on">全部</a> <a href="#" rel="古典雅致" name="theme" class="default">古典雅致</a> <a href="#" rel="可爱温馨" name="theme" class="default">可爱温馨</a> <a href="#" rel="时尚简约" name="theme" class="default">时尚简约</a> <a href="#" rel="潮流酷炫" name="theme" class="default">潮流酷炫</a> <a href="#" rel="节日庆典" name="theme" class="default">节日庆典</a> </dd> </dl> <dl class="cation-list"> <dt>色系</dt> <dd> <a href="#" rel="" name="system" class="all on">全部</a> <a href="#.........完整代码请登录后点击上方下载按钮下载查看
网友评论0