Demo---progress-steps------ 2/50(详解)

已于 2022-07-02 15:11:10 修改
阅读量705 收藏
点赞数
分类专栏： HTML CSS JavaScript 文章标签： css css3 前端
于 2022-03-25 10:34:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IDApprentice/article/details/123712690
版权
CSS 同时被 3 个专栏收录
37 篇文章 0 订阅
订阅专栏
JavaScript
27 篇文章 0 订阅
订阅专栏
HTML
9 篇文章 0 订阅
订阅专栏

​
看详解前 请务必具备的基础知识:

1.什么是基线
在这里插入图片描述
2. 元素的分类在这里插入图片描述
3. justify-content; 的那些事
在这里插入图片描述

在这里插入图片描述

​​​​​4.区分伪类和伪元素(以下内容 帮助理解与区分)
1 ) 1.伪元素在CSS3中使用 双冒号 :: 之前是 :
2 . 伪类选择器是用来向某些选择器来添加效果
3.伪元素选择器则是用来将特殊的效果添加在选择器上的
2 ) 什么是伪类?
在这里插入图片描述

3 ) 什么是伪元素?
在这里插入图片描述

5.<iframe>HTML内联框架元素,可以将另一个HTML页面嵌入到当前页面中 说白了 iframe 用于在网页内显示网页。

6.2D 和 3D
在这里插入图片描述

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

/* 
    @import 引入其他样式表
*/


:root {
  --line-border-fill: #3498db;
  --line-border-empty: #e0e0e0;
}

/* 
   首先 jQuery :root 选择器
        :root 这个CSS 伪类 匹配文档树(文档树，是用来描述文档目录结构的工具 但是小卓的理解是因为HTML是页面的骨架 可以理解为所谓的树也就是根)的根元素.
             对于HTML来说,  :root表示<html>元素
        :root 选择器选取文档的根元素。
        在 HTML 中，根元素总是 <html> 元素。
    其次 使用CSS自定义属性  ===>  可以移步https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
                                或者往下看 
     我们要明白类似于 --line-border-fill 属于CSS中的自定义属性 (变量)
         其基本用法:
                    声明一个自定义属性, 属性名 需要  以两个减号(--) 开始, 属性值则可以是任何有效的 CSS值
                    注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root 下，
                            这样就可以在HTML文档的任何地方访问到它了：
                                    例子: 
                                    :root {
                                            --line-border-fill: #3498db;
                                            --line-border-empty: #e0e0e0;
                                            }

 */


* {
  box-sizing: border-box;
}

/* 
    box-sizing: border-box; 是告诉浏览器: 想要设置的边框和内边距 都包含在 width内
                            box-sizing 让我们规定了容器元素最终尺寸寸的计算方式

*/

body {
  background-color: #f6f7fb;
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

/* 
    1.font-family; 
             font-family 作用: 定义文本的字体系列
        其中属性值的作用: Muli 是中文简体字体
                            sans-serif 是代表无衬线字体 说白了就是没有多余装饰

    2. dispaly 属性常见的四种用法及其详解:
                    1) display:none;
                    2) display:block;
                    3) display:inline;
                    4) display:inline-bolck;

                1) display:none;
                          这个可以用来做小的且可以关闭的广告(起到隐藏的效果)
                             display:none;  是被添加此属性的东西 在界面上将不显示, 且不保留,
                2) display:block;
                          除了转换为块级元素之外, 同时还有显示元素的意思
                          display:block; 独占一行 且  可以设置宽度和高度
                          块级元素的特点:
                                    1.独占一行
                                    2.高度,宽度,外边距以及内边距都可以控制
                                    3.宽度默认是容器(父级宽度)的100%
                                    4.是一个容器及盒子, 里面可以放行内或块级元素      
                3) display:inline;
                          不能设置上下的margin和padding
                          行内元素特点:
                                    1.一行内可以放多个行内元素,且在一行内显示
                                    2. 高,宽直接设置是无效的
                                    3. 默认宽度就是它本身内容的宽度
                                    4.行内元素只能容纳文本或者其他行内元素
                4) display:inline-block;
                           行内块元素特点:
                                    1.和相邻行内块在一行上, 但是他们之间会有空白间距
                                    2.默认宽度就是它内容本身的宽度(行内元素特点)
                                    3.高度,行高,外边距以及内边距都可以控制(块级元素特点)                
    
   3. 区分 align-items 与 justify-content;
        align-items 属性定义flex子项在flex容器的当前行的(侧轴)纵轴方向上的对齐方式
        justify-content 用于设置或检索弹性盒子元素在主轴(横轴) 方向上的对齐方式

   4. vw 与 vh
        viewpoint width 视窗宽度, 1vw=视窗宽度的1%
        viewpoint height 视窗高度  1vh=视窗高度的1%
     拓展:
            em 它是描述相对于当前元素的字体尺寸, 所以它也是相对长度单位.
          一般浏览器字体大小默认为16px, 则 2em==32px
            rem 作用于根元素, 相对于原始大小 (16px) 
                作用于 非根元素 相对于根元素字体大小

    5. overflow: hidden; 三个用途 第一防止塌陷 第二隐藏溢出的部分 第三清除浮动
                 解释:
                        第一: 父级元素内部有子元素,如果子元素添加了 margin-top样式 父元素跟着下来 则是造成了塌陷
                                此时的解决方案就是: 给父元素添加 overflow:hidden;

                        第二: 略
                        第三: 用来清除浮动
                                 {
                                     overflow:hidden;
                                     zoom:1;
                                 }                           

*/

.container {
  text-align: center;
}
/* 
    text-align 属性指定元素文本的水平对齐方式

*/

.progress-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 30px;
  max-width: 100%;
  width: 350px;
}
/* 
    1. display属性常见的四种用法
           1) display:none;
           2) display:block;
           3) display:inline;
           4) display:inline-block;
     
             1) display: none;  (移步下方 有代码例子)
                    CSS使用display显示显示隐藏元素的方法: 1.display:none; 样式即可隐藏元素
                                                        2.display:block; 样式即可将隐藏的元素显示出来
            2) display: block;
                    第一个作用将某元素转换为 块元素
                            块元素的特点:
                                    1. 独占一行
                                    2. 可以设置宽 高 外边距 内边距
                                    3. 默认宽度为 父容器的100%
                                    4. 里面可以放行内或者块级元素
                    第二个作用是表示元素显示               
            3) display: inline;
                   需要注意的就是 行内元素的本身的使用
                            行内元素的特点:
                                    1. 一行内可以放多个行内元素
                                    2. 设置宽度 与 高度是无效的
                                    3. 默认宽度是文本内容的宽度
                                    4. 里面只能容纳行内或者 文本元素
            4) display: inlne-block;
                        行内块元素的特点:
                                    1. 一行内可以放多个行内块元素, 它们之间会有空白间隙, 且一行可以显示多个
                                    2. 可以设置 宽度 和 高度 外边距和内边距
                                    3. 默认宽度是它内容本身的宽度


      2. justify-content
                        设置主轴上的子元素排列方式  
                        
      3. position: relitive;
                        移动的位置是参照自己原来的位置在进行移动

      4. max-width: 数值;
                语义是: 设置段落的最大宽度;

                 
*/


     
.progress-container::before {
  content: '';/*等待总结*/
  background-color: var(--line-border-empty);  
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: -1;
}
  
/* 
        transform
                transform 属性应用于元素的2D或者3D转换. 这个属性可以将元素旋转, 缩放, 移动, 倾斜  

        background-color: var(--line-border-empty);   
                var()函数 用于插入自定义属性的值
                        用法: 先在上面的代码提前定义一个 自定义属性  
                                    然后使用 var() 函数在样式表中插入该自定义属性的值
*/






.progress {
  background-color: var(--line-border-fill);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
}
/* 
    transition: 0.4s ease;  
         这里的译仅仅就是这个单词代表的中文意思 请不要误会
          property(译:属性) duration(译: 持续时间) time-function 
       简写 transition: property(指定被设置过度效果的元素) duration(规定完成过渡需要多久)  time-function(该属性允许过渡效果随着时间来改变其速度)  delay(过渡效果开始时间)
        ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
*/


.circle {
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--line-border-empty);
  transition: 0.4s ease;
}

.circle.active {
  border-color: var(--line-border-fill);
}

.btn {
  background-color: var(--line-border-fill);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 30px;
  margin: 5px;
  font-size: 14px;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus {
  outline: 0;
}

.btn:disabled {
  background-color: var(--line-border-empty);
  cursor: not-allowed;
}
卓律涤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
读卡器设置demo--USB CN
04-28
读卡器设置demo--USB CN
【CSS】自定义属性
最新发布
小秀的博客
06-23 1203
CSS自定义属性
制作html css 步骤进度条（完整代码）
WordPress主题大全
03-20 2941
在这个例子中，步骤进度条由一个进度条和一系列用文本表示的步骤组成。进度条将根据当前活动的步骤改变宽度，步骤的外观将根据它们是否处于活动状态而改变。您可以根据需要调整宽度、颜色和字体大小值，以自定义步骤进度条的外观。这将创建一个带有进度条和圆圈元素的基本步骤条来表示每个步骤。上一个和下一个按钮可用于在步骤之间导航，步骤栏的外观将根据当前活动步骤动态更新。
前端50天50个项目 | 第2个项目 -- 步骤器【提供完整代码】
battledao的博客
08-05 487
前言 ❤️ 人的一切痛苦,本质上都是对自己无能的愤怒 ❤️
带 HTML CSS 和 JavaScript 的步骤进度条（免费代码）
WordPress主题大全
03-20 2000
如果您想创建，那么本教程将对您有所帮助。在本文中，您将学习如何使用 Html、CSS 和 JavaScript 创建步骤进度条。早些时候我展示了许多其他类型的进度条设计，如动画进度条、圆形进度条等。我已经与您分享了带有进度条的多步骤表单的设计。这个动画步骤进度条的css制作的非常简单。那里有两个按钮可以控制步骤，它们将逐步进行。我在这个多步骤进度条 css 中使用了 4 个步骤。如果你愿意，你可以使用更多。我使用了一些 javascript 来创建这。横步进度条主要用在注册表中。
Day2—按钮动态过渡
qq_43215827的博客
12-03 656
前言：继续学习HTML、CSS和JS的基础知识。 一、总体效果 功能：点击next,下一个圆圈被点亮 实现方式：新建一个文件夹，文件夹中新建三个txt,改后缀，分别命名style.css;script.js;index.html;将下面三部分代码对应放入。 二、JavaScript代码 const progress=document.getElementById('progress') const prev=document.getElementById('prev') const next=docum
navigation_demo-master
05-06
navigation_demo-masternavigation_demo-masternavigation_demo-masternavigation_demo-masternavigation_demo-masternavigation_demo-masternavigation_demo-masternavigation_demo-masternavigation_demo-...
mediasoup-demo的完整Windows版本包
05-12
mediasoup-demo的完整Windows版本包，Debug版的mediasoup-worker.exe有pdb（在server\node_modules\mediasoup\worker\out\Debug\build中），配置了启动server时默认使用的是Debug版本的worker，同时还在server\media...
iosxrv-k9-demo-5.2.0.part2
02-19
思科网络设备的操作系统常见的有IOS、IOS-XE、IOS-XR、NX-OS，其中IOS-XR是运营商级的操作系统，主要用在XR12000、CRS系列路由器、ASR9K系列路由器上，这些设备通常用于运营商的边界及核心。同时思科的CCIE SP考试中...
sb-demo-1.0-SNAPSHOT.jar
01-20
SPringBoot: 一个简历的html,以及全部依赖包 .
progress-steps:使用上一个和下一个按钮的进度步骤
03-31
progress-steps:使用上一个和下一个按钮的进度步骤
前端项目-progressStep.zip
09-02
前端项目-progressStep,动态呈现带有编号步骤的进度条。
50天50个页面-DAY2-Progress Steps
小丹炉
10-25 218
50天50个页面-DAY2-Progress Steps
4个按钮点击进度条（html+css+js）
qq_47997447的博客
10-30 644
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> :root{ /*定义颜色常量*/ --line-border-fill: #3498db; --line-...
js实现progress-steps（小练习）
weixin_45732235的博客
03-20 995
使用javascript实现一个progress-steps巩固自己的基础知识。 ⭐️index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
50天五十个项目——day2进度步骤
qq_47922019的博客
09-20 171
五十天五十个项目，github搬运+自己的一些注释
组件边框设置
第十七签
11-27 1125
package com.dhy.nokia;import java.awt.Color; import java.awt.Font; import java.awt.GridLayout;import javax.swing.BorderFactory; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.
JAVA中边框的使用
我心飞翔
09-20 2374
import java.awt.*; import javax.swing.*; import javax.swing.border.*; public class BorderDemo {  public static void main(String[] args)
java lineborder_JBorder组件边框
weixin_29664739的博客
02-16 1135
Java的Border是用来呈现围绕Swing组件边缘边框的对象,它本身是一个接口,里面定义了paintBorder、getBorderInsets和isBorderOpaque三个需要实现的方法.如果想用自己的Border类来绘制组件的边框,必须实现这三个方法,里面有很多布局和绘制的问题,比较麻烦.Java为了方便使用,提供了虚拟类AbstractBorder,继承它就可以比较简单的实现自己的边...
HP-Socket：高性能网络通信框架详解
"HP-Socket是一个高性能的网络通信框架，...HP-Socket还提供了丰富的Demo示例和多种编程语言接口，如C/C++、C#、Delphi、易语言、Java和Python，以加速开发者的学习和应用过程。目前，它支持Windows和Linux操作系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值