首页 > 其他分享 >css+html 实现带箭头的流程步骤条

css+html 实现带箭头的流程步骤条

时间:2023-12-28 11:49:15浏览次数:35  
标签:solid top li 箭头 navs html 20px border css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .navs {
            height: 50px;
            line-height: 50px;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 100%;
        }

        .navs li {
            padding: 0px 10px 0 30px;
            line-height: 50px;
            background: #DCEEFE;
            display: inline-block;
            color: #1E9FFF /*#50abe4*/;
            position: relative;
            width: 12.7%;
        }

        .navs li:after {
            content: '';
            display: block;
            border-top: 20px solid #DCEEFE;
            border-bottom: 20px solid #DCEEFE;
            border-left: 20px solid #fff;
            position: absolute;
            right: -20px;
            top: 0;
        }

        .navs li:after {
            content: '';
            display: block;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #DCEEFE;
            position: absolute;
            right: -20px;
            top: 0;
            z-index: 10;
        }

        .navs li:before {
            content: '';
            display: block;
            border-top: 20px solid #DCEEFE;
            border-bottom: 20px solid #DCEEFE;
            border-left: 20px solid #fff;
            position: absolute;
            left: 0px;
            top: 0;
        }

        .navs li:first-child {
            border-radius: 4px 0 0 4px;
            padding-left: 25px;
        }

        .navs li:last-child,
        .cssNavEnd {
            border-radius: 0px 4px 4px 0px;
            padding-right: 25px;
        }

        .navs li:first-child:before {
            display: none;
        }

        .navs li:last-child:after,
        .cssNavEnd:after {
            display: none;
        }

        .navs li.active {
            background: #1E9FFF;
            color: #fff;
        }

        .navs li.active:after {
            border-left-color: #1E9FFF;
        }

        .navs li.active:before {
            border-top: 20px solid #1E9FFF;
            border-bottom: 20px solid #1E9FFF;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="navs">
        <ul>
            <li class="active">第一步</li>
            <li>第二步</li>
            <li>第三步</li>
            <li>第四步</li>
            <li>第五步</li>
            <li>完成</li>
        </ul>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        gotoStep(3);
    });
    function gotoStep(step) {
        $(".navs li").slice(0, step).addClass("active");
    }
</script>
</body>
</html>

 

效果图:

 

标签:solid,top,li,箭头,navs,html,20px,border,css
From: https://www.cnblogs.com/blts/p/17932356.html

相关文章

  • CSS实现滚动贴合效果
    一、滚动贴合介绍滚动贴合:鼠标滚动的时候,自动贴合到浏览器的底部或顶部设置CSS滚动贴合需要使用到两个属性:1、给滚动容器设置scroll-snap-type,值为滚动的方向和方式.container{/*display:flex;*//*第一个值为滚动贴合的方向,y表示纵向滚动贴合......
  • css+jquery右下角弹框提示框(工作需要就开发调式了)
    使用时调用:addTip();setTimeout("closeTip();",1000);setTimeout("removeTip();",2000); //添加提示框functionaddTip(){vartip="<divid='tip'>"+"<divclass='tip-header'>提示......
  • css学习知识
    CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。CSS声明总是以分号;结束,声明总以大括号{}括起来。id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。class选择器用于描述一组元素的样式,可......
  • Sublime Text Html CSS JS 代码整理美化插件
    原文地址:SublimeTextHtmlCSSJS代码整理美化插件使用代码编辑编辑器的好处就是有很多功能可以用,特别是一个就是代码整理优化。在编写代码时,我们经常会遇到代码混乱、缩进不正确或格式不统一等问题。这些问题可能会导致代码难以阅读、维护和调试,降低开发效率。那么我这里说一......
  • HTML学习第六天:初步探索JavaScript与交互
    在今天的HTML学习中,我初步探索了JavaScript和网页交互的世界。早上,我首先了解了JavaScript的基本概念和语法。JavaScript是一种用于增强网页交互性的脚本语言,它可以直接在浏览器中运行。我学习了如何使用变量、函数和基本的控制结构来编写JavaScript代码。午后,我开始将JavaScript与......
  • css+js瀑布流布局实现
    记录一个瀑布流布局问题的解决过程最开始使用js实现,将子元素进行绝对定位,根据宽高及顺序判断定位的top与left。问题:存在新增子元素页面加载不及时的问题,会出现子元素初始状态叠加在一起,计算完成后才能正常显示。点击查看代码window.onload=()=>{/*传入waterfall与pic......
  • 软件测试/测试开发|一篇文章带你入门HTML
    前言上一篇文章我们提到了web的三大主要资源,HTML,CSS以及JS,HTML是提供web页面内容的资源,本文我们就来介绍一下HTML。HTMLHTML(HyperTextMarkupLanguage)是web的核心组成部分之一,是构建网页的基础语言。HTML使用标记来描述文档的结构,并定义了网页上的内容,包括文本、图像、链接等。HTM......
  • 黑马pink css7
    定位的作用1:让盒子自由地在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子。定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。定位模式:position:static、relative、absolute、fixed静态定位static......
  • Python采集html页面时如何去除掉script,link等指定html标签
    python爬虫去除html中特定标签、去除注释、替换实体前言:本文主要讲w3lib库的四个函数html.remove_tags()html.remove_tags_with_content()html.remove_comments()html.remove_entities()remove_tags作用:去除或保留标签,但是仅仅是去除标签,正文部分是不做处理的 看其函数......
  • html复制文本逻辑
    //复制文本functioncopyTxt(text){if(navigator.clipboard){navigator.clipboard.writeText(text)$Sys.notify('复制成功')}elseif(document.execCommand){letinput=document.createElement(�......