css怎样做横向和竖向的进度条？区别在哪？
发布时间：2022-01-20 16:17:09 所属栏目：语言 来源：互联网
导读：我们在设计手机端页面时，常会遇到实现底部tab栏切换功能的需求，因此这篇文章就给大家分享一下用css实现底部tab栏的效果的示例，下文有实现效果及代码，感兴趣的朋友接下来跟随小编来看看吧。 css样式 *{ margin: 0; padding: 0; text-decoration: none; li
|
我们在设计手机端页面时，常会遇到实现底部tab栏切换功能的需求，因此这篇文章就给大家分享一下用css实现底部tab栏的效果的示例，下文有实现效果及代码，感兴趣的朋友接下来跟随小编来看看吧。 css样式 *{ margin: 0; padding: 0; text-decoration: none; list-style: none; } .foot { width: 100%; height: 68px; background: #FFFFFF; position: fixed; bottom: 0; display: flex; justify-content: space-around; z-index: 999; /*line-height: 20px;*/ } .foot li { height: 100%; } .foot li a { display: block; width: 100%; height: 100%; /* color: #979797;*/ } .foot li a img { /*display: block;*/ width: 26px; height: 26px; margin-top: 10px; } .foot li a p { font-size: 12px; width: 100%; text-align: center; /* color: #979797;*/ margin-top: 7px; } .botm-title{ color: #979797; } .actives { color: #5C91FA; } .xz-img{ text-align: center; } 页面代码 <%--底部tapbar--%> <ul class="foot"> <li class="Imgbox" img="/images/tuiJianCus/index-wxz-icon.png" data-img="/images/tuiJianCus/index-xz-icon.png"> <a href="/views/tuiJianCus/index.jsp"> <div class="xz-img"> <img src="/images/tuiJianCus/index-wxz-icon.png" /> </div> <p class="botm-title">首页推荐</p> </a> </li> <li class="Imgbox" img="/images/tuiJianCus/tuijiang-wxz-icon.png" data-img="/images/tuiJianCus/tuijiang-xz-icon.png"> <a href="/views/tuiJianCus/tuijian_speed.jsp"> <div class="xz-img"> <img src="/images/tuiJianCus/tuijiang-xz-icon.png" /> </div> <p class="botm-title actives ">我的推荐</p> </a> </li> <li class="Imgbox" img="/images/tuiJianCus/my-wxz-icon.png" data-img="/images/tuiJianCus/my-xz-icon.png"> <a href="/views/tuiJianCus/usercenter.jsp"> 今天给大家分享做用css实现进度条的内容，比较简单的进度条有横向和竖向的进度条，本文就主要了解这两种简单的进度条的实现，一些朋友对两种进度条实现的区别比较好奇，下面我们就通过两个示例来了解看看。 一、横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css"> .loadbar { width:200px; height:25px; background-color:#fff; border:1px solid #ccc; } .bar { line-height:25px; height:100%; display:block; font-family:arial; font-size:12px; background-color:#bb9319; color:#fff; } </style> </head> <body> <div class="loadbar"> <strong class="bar" style='width:30%;'>30%</strong> </div> </body> </html> 效果如下： 二、竖向进度条 <html> <head> <title>竖向进度条</title> <style type="text/css"> .loadbar { width:25px; height:200px; background-color:#fff; border:1px solid #ccc; position:relative; } .bar { width:100%; display:block; font-family:arial; font-size:12px; background-color:#bb9319; color:#fff; position:absolute; bottom:0; } </style> </head> <body> <div class="loadbar"> <strong class="bar" style='height:30%;'>30%</strong> </div> </body> </html> <div class="xz-img"> <img src="/images/tuiJianCus/my-wxz-icon.png" /> </div> <p class="botm-title ">我的福利</p> </a> </li> </ul> （编辑：揭阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
