css实现自适应选项卡标签切换效果代码
代码语言:html
所属分类:选项卡
代码描述:css实现自适应选项卡标签切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>理财产品排名</title> <meta name="description" content="Neat"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no"> <style> html, body{ min-height: 100%; } *{ margin:0; padding:0; font-size: 12px; } ul{ list-style:none; } .hide{ display: none; } .lf{ float: left; } .lr{ float: right; } .red, .red a,.red a h5, .red a p{ color:#FF0000 !important; } html{ background: #f9f9f9; } .main-group{ width:100%; margin:80px auto; } .ranking-title{ text-align: center; padding:0 0 40px 0; } .ranking-title .title{ font-size:28px; font-weight: bold; color: #dd393d; } .ranking-title .brand{ margin:5px auto 10px auto; width:30px; height:3px; background: #fdc936; border-radius: 20px; } .ranking-title .desc{ font-size:12px; } .ranking-nav-group{ display: flex; background: #fff; margin-top:5px; } .ranking-nav-group div{ width:25%; height:40px; line-height: 40px; text-align: center; font-size: 14px; color: #9d9d9d; cursor: pointer; } .ranking-nav-group div.self{ color: #fff; background: #dd393d; } .items-box-group .items-group .item-group{ display: flex; align-items:center; background: #fff; margin-top:5px; padding:20px 0; } .items-box-group .items-group .item-group .img{ width:10%; text-align: center; background: url(//repo.bfw.wiki/bfwrepo/image/60daceab7722d.png) no-repeat; background-size: 30px 30px; background-position: 50% 50%; height:40px; line-height: 45px; color: #fff; font-weight: bold; font-size: 14px } .items-box-group .items-group .item-group .item-data{ width:70%; } .items-box-group .items-group .item-group .buttin-group{ width:20%; } .item-data .title{ font-size: 20px; font-weight: bold; } .item-data .title span{ color: #9e9e9e; margin-left:10px; } .item-price{ display: flex; margin-top:10px; } .item-price div{ width:33.33%; font-size: 30px; font-weight: bold; color: #dd393d; } .item-price div span{ font-size: 24px } .item-price div p{ font-size: 14px; color: #9e9e9e; font-weight: 400; } .buttin-group a{ width:80%; height:36px; line-height: 36px; border:0; background: #dd393e; color: #fff; border-radius: 30px; display:inline-block; text-align:center; color:#fff; text-decoration:none; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> </head> <body> <div class="main-group"> <h2 class="ranking-title"> <p class="title">销量排行</p> <p class="brand"></p> <p class="desc">CONSIDER</p> </h2> <div class="ranking-nav-group"> <div class="self">全部</div> <div>现金型</div> <div>混合型</div> <div>股票型</div> </div> <div class="items-box-group"> <ul class="items-group"> <li class="item-group"> <div class="img">1</div> <div class="item-data"> <h3 class="title"> 瑞岩价格投资<span>混合型·股票 中风险</span> </h3> <div class="item-price"> <div> 36.9% <p>年化收益</p> </div> <div> 1.22<span>元</span> <p>单位净值</p> </div> <div> 363<span>亿</span> <p>基金规模</p> </div> </div> </div> <div class="buttin-group"><a href="#">去购买</a></div> </li> <li class="item-group"> <div class="img">2</div> <div class="item-data"> <h3 class="title"> 瑞岩价格投资<span>混合型·股票 中风险</span> </h3> <div class="item-price"> <div> 36.9% <p>年化收益</p> </div> <div> 1.22<span>元</span> <p>单位净值</p> </div> <div> 363<span>亿</span> <p>基金规模</p> </div> </div> </div> <div class="buttin-group"><a href="#">去购买</a></div> </li> <li class="item-group"> <div class="img">2</div> <div class="item-data"> <h3 class="title"> 瑞岩价格投资<span>混合型·股票 中风险</span> </h3> <div class="item-price"> <div> 36.9% <p>年化收益</p> </div> <div> 1.22<span>元</span> <p>单位净值</p> </div> <div> 363<span>亿</span> <p>基金规模</p> </div> </div> </div> <div class="buttin-group"><a href="#">去购买</a></div> </li> <li class="item-group"> <div class="img">2</div> <div class="item-data"> <h3 class="title"> 瑞岩价格投资<span>混合型·股票 中风险</span> </h3> <div class="item-price"> <div> 36.9% <p>年化收益</p> </div> <div> 1.22<span>元</span> <p>单位净值</p> </div> <div> 363<span>亿</span> <p>基金规模</p> </div> </div> </div> <div class="buttin-group"><a href=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0