https://www.cnblogs.com/xiaominsweet/p/9186986.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="./css/base.css"> <link rel="stylesheet" type="text/css" href="./css/brand-table.css"> </head> <body > <div class="brand-table"> <div class="header"> <a href=""></a> <div>商標分類表</div> </div> <div class="tip"> <img src="./images/tip.png" alt=""> </div> <div class="section"> <ul class="left"> <li class="active"><a href="">第1類</a></li> <li><a href="">第2類</a></li> <li><a href="">第3類</a></li> <li><a href="">第4類</a></li> <li><a href="">第5類</a></li> <li><a href="">第6類</a></li> <li><a href="">第7類</a></li> <li><a href="">第8類</a></li> <li><a href="">第9類</a></li> <li><a href="">第10類</a></li> <li><a href="">第11類</a></li> <li><a href="">第12類</a></li> <li><a href="">第13類</a></li> <li><a href="">第14類</a></li> <li><a href="">第15類</a></li> <li><a href="">第16類</a></li> <li><a href="">第17類</a></li> <li><a href="">第18類</a></li> <li><a href="">第19類</a></li> <li><a href="">第20類</a></li> <li><a href="">第21類</a></li> <li><a href="">第22類</a></li> <li><a href="">第23類</a></li> <li><a href="">第24類</a></li> <li><a href="">第25類</a></li> <li><a href="">第26類</a></li> <li><a href="">第27類</a></li> <li><a href="">第28類</a></li> <li><a href="">第29類</a></li> <li><a href="">第30類</a></li> <li><a href="">第31類</a></li> <li><a href="">第32類</a></li> <li><a href="">第33類</a></li> <li><a href="">第34類</a></li> <li><a href="">第35類</a></li> <li><a href="">第36類</a></li> <li><a href="">第37類</a></li> <li><a href="">第38類</a></li> <li><a href="">第39類</a></li> <li><a href="">第40類</a></li> <li><a href="">第41類</a></li> <li><a href="">第42類</a></li> <li><a href="">第43類</a></li> <li><a href="">第44類</a></li> <li><a href="">第45類</a></li> </ul> <div class="right"> <div class="title"> <span class="title-name"> 01類化學原料 </span> <span class="all tobottom"> 全部 </span> </div> <div class="detail"> 用於工業、科學、攝影、農業、園藝和林業的化學品；未加工人造合成樹脂；未加工塑料物質；肥料；滅火用合成... 第一類主要包括用於工業、科學和農業的化學制品，包括用於制造屬於其他類別的產品的化學制品。本類尤其包括：——堆肥； ——非食品防腐鹽。 ——某些特定的食品工業用添加劑（查閱按字母順序排列的商品分類表）。 本類尤其不包括： ——未加工的天然樹脂（第二類）； ——醫學科學用化學制品（第五類）； ——殺真菌劑、除莠劑和消滅有害動物制劑（第五類）； ——文具用或家用粘合劑（第十六類）； ——食品用防腐鹽（第三十類）； ——褥草（腐殖土的覆蓋物）（第三十一類）。 </div> <div class="child-box"> <div class="child-type"> <a href=""> 【0101】 工業氣體,單質 </a> </div> <div class="child-type"> <a href=""> 【0101】 工業氣體,單質 </a> </div> <div class="child-type"> <a href=""> 【0101】 工業氣體,單質 </a> </div> <div class="child-type"> <a href=""> 【0101】 工業氣體,單質 </a> </div> <div class="child-type"> <a href=""> 【0101】 工業氣體,單質 </a> </div> </div> <div class="recommend"> <span class="recommend-name"> 第01類化學燃料 </span> 轉讓推薦 </div> <ul class="brandlist"> <li> <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商標轉讓"> <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉爾緹商標"> </a> </li> <li> <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商標轉讓"> <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉爾緹商標"> </a> </li> <li> <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商標轉讓"> <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉爾緹商標"> </a> </li> <li> <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商標轉讓"> <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉爾緹商標"> </a> </li> <li> <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商標轉讓"> <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉爾緹商標"> </a> </li> <li> <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商標轉讓"> <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉爾緹商標"> </a> </li> </ul> </div> <script> $('.right').on('click',".all",function(){ if($(this).hasClass("tobottom")){ $('.detail').css("-webkit-line-clamp","inherit"); $(this).addClass('totop').removeClass("tobottom"); }else{ $(this).addClass('tobottom').removeClass("totop"); $('.detail').css("-webkit-line-clamp","3"); } }) </script> </div> </div> </body> </html>
html, body { height: 100%; background: #f7f7f7 !important; } button { outline: none; border: none; background: none; } .brand-table .header { height: 1.1rem; width: 100%; line-height: 1.1rem; font-size: .38rem; color: #181818; text-align: center; } .brand-table .header div { position: absolute; width: 100%; top: 0; left: 0; text-align: center; } .brand-table .header a { width: 10%; height: 1.1rem; background: url(../images/return_button.png) no-repeat; background-size: 0.19rem 0.32rem; background-position: center center; float: left; position: relative; z-index: 1; } .brand-table .tip { width: 100%; height: 1.42rem; } .brand-table .tip img { width: 100%; height: 100%; } .brand-table .section { display: flex; position: fixed; top: 2.52rem; bottom: 0; left: 0; right: 0; overflow: hidden; } .brand-table .section .left { width: 1.79rem; height: auto; overflow: auto; margin-bottom: 1.22rem; } .brand-table .section .left li { height: 1rem; line-height: 1rem; font-size: .28rem; color: #6c6c6c; text-align: center; background: #f7f7f7; } .brand-table .section .left li a { color: #6c6c6c; text-decoration: none; display: block; } .brand-table .section .left .active { color: #fa5654; background: #fff; border-left: .06rem solid #fa5654; } .brand-table .section .right { flex: 1; margin-bottom: 1.22rem; overflow: auto; background: #fff; padding-left: .3rem; padding-right: .24rem; } .brand-table .section .right .title { height: 0.9rem; line-height: 0.9rem; font-size: 0.28rem; color: #181818; } .brand-table .section .right .title .all { float: right; padding-right: .4rem; } .brand-table .section .right .title .tobottom { background: url(../images/selectToBottom.png) no-repeat; background-size: .21rem .12rem; background-position: right center; } .brand-table .section .right .title .totop { background: url(../images/selectToTop.png) no-repeat; background-size: .21rem .12rem; background-position: right center; } .brand-table .section .right .detail { height: auto; line-height: 0.45rem; font-size: 0.22rem; color: #6c6c6c; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; } .brand-table .section .right .child-box .child-type { height: 0.9rem; line-height: 0.9rem; border-bottom: solid 1px #eeeeee; background: url("../images/right.png") no-repeat; background-position: right center; background-size: .12rem .21rem; } .brand-table .section .right .child-box .child-type a { font-size: 0.24rem; color: #6c6c6c; display: block; } .brand-table .section .right .child-box .child-type:first-child { margin-top: .55rem; border-top: solid 1px #eeeeee; } .brand-table .section .right .recommend { height: 0.88rem; line-height: 0.88rem; font-size: 0.3rem; color: #181818; } .brand-table .section .right .recommend-name { color: #fa5654; } .brand-table .section .right .brandlist { *zoom: 1; } .brand-table .section .right .brandlist:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; } .brand-table .section .right .brandlist li { width: 48.5%; float: left; margin-bottom: 3%; box-sizing: border-box; position: relative; } .brand-table .section .right .brandlist li img { width: 100%; height: 100%; display: block; } .brand-table .section .right .brandlist li:nth-child(even) { float: right; }