<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #head{ height: 64px; background: #fff; border-bottom: #E8E8E8 solid 1px; } .tab-h{ height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; line-height: 64px; background: #F7F7F7; font-size: 16px; white-space: nowrap; } .tab-item{ margin:0 36px; display: inline-block; } .tab-item.active{ color: #4675F9; position: relative; } .tab-item.active:after{ content: ""; display: block; height: 2px; width: 20px; background: #4675F9; position: absolute; bottom: 0; left: 5px; border-radius: 20px; } </style> </head> <body> <div id="head"> <div class="tab-h" > <div class="tab-item active">首页</div> <div class="tab-item">首页</div> <div class="tab-item">首页</div> <div class="tab-item">首页</div> <div class="tab-item">首页</div> <div class="tab-item">首页</div> </div> </div> </body> </html>
2021-03-23
最新推荐文章于 2022-03-23 15:12:29 发布