html布局之发展流程图

已于 2023-01-10 10:25:02 修改
阅读量1.3k 收藏 6
点赞数 2
文章标签： 前端 javascript html css html5
于 2023-01-10 10:21:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56058244/article/details/128623878
版权

表示发展流程的圆圈和线条怎么布？

最近在做公司网页，需要做一个表示公司发展的布局，使用的一直是bootstrap5，都是把容器分区的，这个横线可就把我犯了难，在网上查阅大量资料之后，发现也没有一个合理的解释，就试着就边界线来布局。
在这里插入图片描述

  1. 代码
<!DOCTYPE html>
<html lang="zxx">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
   <title>Bootstrap 101 Template</title>

   <!-- Bootstrap -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        /* col-2 */
        .p-process-step.p-process-style-2 .p-process-description p {
            margin-bottom: 0;
        }


        .p-process-step.p-style-3 {
            text-align: center;
            position: relative;
            margin-bottom: 20px;
        }

        .p-process-step.p-style-3 .p-step-number {
            width: 80px;
            height: 80px;
            line-height: 80px;
            background: var(--white-color);
            border-radius: 50%;
            color: var(--white-color);
            display: inline-block;
            border: solid #1764a3 6px;
        }

        

        .p-process-step.p-style-3 .p-step-number:before {
            content: '';
            display: inline-block;
            border: 2px solid #1764a3;
            width: 100%;
            top: 45%;
            left: 70%;
            position: absolute;
        }

        .p-process-step.p-style-3 .p-process-info {
            margin-top: 15px;
        }

        .p-process-step.p-style-3 .p-process-info .p-process-title {
            color: #1764a3;
            font-family: var(--title-fonts);
            font-weight: 600;
        }

        .p-before-border .p-process-step.p-style-3 .p-step-number:before {
            border: none
        }
        /* col-3 */
        .q-process-step.q-process-style-2 .q-process-description p {
            margin-bottom: 0;
        }


        .q-process-step.q-style-3 {
            text-align: center;
            position: relative;
            margin-bottom: 20px;
        }

        .q-process-step.q-style-3 .q-steq-number {
            width: 80px;
            height: 80px;
            line-height: 80px;
            background: var(--white-color);
            border-radius: 50%;
            color: var(--white-color);
            display: inline-block;
            border: solid #1764a3 6px;
        }

        .q-process-step.q-style-3 .q-steq-number:before {
            content: '';
            display: inline-block;
            border: 2px solid #1764a3;
            width: 65%;
            top: 45%;
            left: 63%;
            position: absolute;
        }

        .q-process-step.q-style-3 .q-process-info {
            margin-top: 15px;
        }

        .q-process-step.q-style-3 .q-process-info .q-process-title {
            color: #1764a3;
            font-family: var(--title-fonts);
            font-weight: 600;
        }

        .q-before-border .q-process-step.q-style-3 .q-steq-number:before {
            border: none
        }

        @media(max-width: 1216px) {
            .p-process-step.p-style-3 .p-step-number:before {
                left: 74%;
            }            
        }
        @media(max-width: 1195px) {
            .p-process-step.p-style-3 .p-step-number:before {
                left: 75%;
            }            
        }
        @media(max-width: 1200px) {
            .q-process-step.q-style-3 .q-steq-number:before {
                left: 66%;
            }  
        }  
    </style>
</head>

<body>
   <div class="promo-wrap pt-60 " id="fzlc">
      <div class="container">
          <div class="row ">
              <div class="col-lg-2 col-md-6">
                  <div class="p-process-step p-style-3 ">
                      <div class="p-process-media">
                          <div class="p-step-number" >
                              <img src="${base}/resources/normal/assets/img/logo.jpg" alt="" style="border-radius: 50%; margin-bottom: 10px;;border-radius:0;margin-left: 5px;" >
                          </div>
                      </div>
                      
                  </div>
              </div>
              <div class="col-lg-3 col-md-6 mt-lg-0 mt-md-0 mt-4">
                  <div class="q-process-step q-style-3 ">
                      <div class="q-process-media">
                          <div class="q-steq-number">  <img src="${base}/resources/normal/assets/img/24.png" alt="" style="border-radius: 50%; margin-bottom: 10px;" ></div>
                      </div>
                      
                  </div>
              </div>
              <div class="col-lg-2 col-md-6 mt-lg-0 mt-4">
                  <div class="p-process-step p-style-3 ">
                      <div class="p-process-media">
                          <div class="p-step-number"> <div class="q-steq-number">  <img src="${base}/resources/normal/assets/img/shuimu.png" alt="" style=" margin-bottom: 15px;margin-left: 1px;padding: 10px;" ></div></div>
                      </div>
                      
                  </div>
              </div>
              <div class="col-lg-3 col-md-6 mt-lg-0 mt-4">
                  <div class="q-process-step q-style-3 ">
                      <div class="q-process-media">
                          <div class="q-steq-number">  <img src="${base}/resources/normal/assets/img/2020.png" alt="" style=" margin-bottom: 15px;margin-left: 1px;padding: 10px;" ></div>
                      </div>
                      
                  </div>
              </div>
              <div class="col-lg-2 col-md-6  mt-lg-0 mt-4 p-before-border ">
                  <div class="p-process-step p-style-3 ">
                      <div class="p-process-media">
                          <div class="p-step-number"> <img src="${base}/resources/normal/assets/img/24.png" alt="" style="border-radius: 50%; margin-bottom: 10px;" ></div>
                      </div>
                      
                  </div>
              </div>
          </div>
          <div class="row ">
              <div class="col-lg-2 col-md-6">
                  <div class="p-process-step p-style-3 ">
                      <div class="p-process-info">
                          <h5 class="p-process-title">2009年-2017年</h5>
                          <p>核心技术积累与突破 <br>
                          'xxxxxx技术'</p>
                      </div>
                  </div>
              </div>
              <div class="col-lg-3 col-md-6 mt-lg-0 mt-md-0 mt-4">
                  <div class="q-process-step q-style-3 ">
                     
                      <div class="q-process-info">
                          <h5 class="q-process-title">2017年</h5>
                          <p>子公司成立<br>
                          xxxxx产品转化</p>
                      </div>
                  </div>
              </div>
              <div class="col-lg-2 col-md-6 mt-lg-0 mt-4">
                  <div class="p-process-step p-style-3 ">
                      
                      <div class="p-process-info">
                          <h5 class="p-process-title">2019年</h5>
                          <p> 获得水木创投融资<br></br></p>
                      </div>
                  </div>
              </div>
              <div class="col-lg-3 col-md-6 mt-lg-0 mt-4">
                  <div class="q-process-step q-style-3 ">
                      
                      <div class="q-process-info">
                          <h5 class="q-process-title">2020年</h5>
                          <p>完成团队组建 <br>
                          首款xxxxxxxx报审</p>
                      </div>
                  </div>
              </div>
              <div class="col-lg-2 col-md-6  mt-lg-0 mt-4 p-before-border ">
                  <div class="p-process-step p-style-3 ">
                      
                      <div class="p-process-info">
                          <h5 class="p-process-title">2021年</h5>
                          <p>持续进行产品及技术研发 <br>
                             xxxxxxx取得注册证</p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</body>
</html>

2.效果呈现（圆圈直接加图）
在这里插入图片描述
3.总结
bootstrap布局还是很灵活，用content的边界线布局这条蓝线有点障眼法的感觉，尤其在屏幕适配的部分显得很呆板，需要非常细的调整（现在我也想不出更好的的qwq），尤其在奇数个圆圈的时候还要考虑怎么分配这12个区块（我这里是2+3+2+3）。
本人刚刚入门，还望大家多多指教！（觉得有帮助，点个赞哈哈哈哈）

Jack-jlj
关注
01_HTML
qq_43652818的博客
02-13 352
1.html语言是解释型语言，不是编译型 浏览器是容错的 2.html页面中由一对标签组成：<html></html> <html> 称之为 开始标签 </html>称之为 结束标签 3.title 表示网页的标题 4.可以在meta标签中设置编码方式 5.<br/>表示换行 。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面。 6.p 表示段落标签 7. img 标签图片标签 src属性表示图片文件...
html实现简单审批流程图
qq_43144825的博客
07-27 2698
<script src="${base.contextPath}/lib/bootstrap-3.3.7/js/bootstrap.min.js"></script> <style> ul li{ font-size: small; } ul li::marker{ font-size: 20px; } .line{ padding-left: 10px; fon.
HTML5 图形和数据可视化秘籍（三）
最新发布
龙哥盟
07-12 979
原文：zh.annas-archive.org/md5/6DD5FA08597C1F517B2FC929FBC4EC5A 译者：飞龙 协议：CC BY-NC-SA 4.0 第五章：走出常规 在本章中，我们将涵盖： 通过漏斗（金字塔图表） 重新审视线条：使线状图表具有交互性 树状映射和递归 将用户交互添加到树状映射中 制作一个交互式点击计数器 介绍 我们已经涵盖了大多数标准图表的基础知识。在这个阶段，是时候让我们的图表变得更有创意了。从本章开始，我们将进入更具创意的、不常用的图表，
简单HTML流程图
12-09
简单HTML流程图
html的网页流程图
08-30
网页的流程图；有的时候；在web页面上药显示一些动态的流程图，这就是一个实例；兼容性没问题
html流程图
qq_45432865的博客
08-03 3239
HTML总结流程图
基于HTML5的WEB流程图绘制
02-18
基于HTML5的WEB流程图绘制,界面简洁
html 总结流程图
cx330_az的博客
02-01 230
html
步步高升PPT流程图.rar
07-15
打开这个文件，用户将看到精心设计的流程图模板，这些模板可能包括了不同的箭头样式、色彩搭配和布局结构，以适应不同场景的需求。 PPT箭头是流程图中不可或缺的元素，它们不仅指示了流程的方向，还可以强调各个...
带数字的PPT流程图模板.rar
07-15
递进流程图通常用于展示逐步发展的过程，而循环流程图则用于表示某个过程会持续重复。这两种类型的流程图在商业分析、项目管理、产品开发等多个领域都有广泛的应用。 总的来说，这个"带数字的PPT流程图模板"是一个...
弯曲节点PPT流程图模板下载.rar
07-16
标题中的“弯曲节点PPT流程图模板下载.rar”暗示了我们关注的核心是关于PPT制作中的一个特定元素——弯曲节点流程图。这种图形设计通常用于表示步骤或过程，通过弯曲的节点来展示任务间的逻辑关系，使观众更容易理解...
JavaScript 实现HTML业务流程图
03-01
1.确认订单信息 2.付款到财付通 3.确认收货 4.评价卖家 5.评价卖家 step=1; function next(num) { step+=num; document.getElementById('step_div').className='flow_step_no'+step; }
在线绘制工作流程图（HTML）
04-28
纯HTML，可供搞B/S工作流流程设计的兄弟姐妹们学学！
使用qunee插件实现html工作流程图
08-03
比echarts2里的树形图形式更为灵活 qunee如果商用需要收费，本demo仅供个人开发和实践参考
基于HTML5流程图绘制代码
03-11
实现流程图绘制、拓扑图等自定义绘制功能，具有丰富的的图形选择。
纯JavaScript实现HTML业务流程图
12-02
利用jQUERY实现页面流程图！纯JavaScript实现HTML业务流程图
网站开发设计流程图
08-23
#### 三、网站操作、部署开发流程图 对于大型项目来说，团队合作与协调显得尤为重要。该流程强调： 1. **项目规划**：制定详细的项目计划书，包括时间表、里程碑设置、人员分工等。 2. **需求分析与设计**：由产品...
递进关系幻灯片流程图素材下载.rar
07-15
1. **设计特点**：该流程图采用了一种直观的线性布局，每个节点都有明确的标识，便于讲解者和听众跟踪整个过程。设计简洁明了，颜色搭配合理，有助于吸引观众注意力并清晰传达信息。 2. **四个节点**：流程图的四个...
html流程图_十分钟了解流程图，从入门到精通
weixin_39880632的博客
12-01 1640
流程图在我们的日常生活中运用的十分广泛，学习、工作等领域都将突出贡献，对于渴望了解流程图的你，不妨静下心来，画十分钟时间系统性了解流程图的核心内容。第一篇：初识流程图流程图概念及结构流程图是流经一个系统的信息流、观点流或部件流的图形代表。在企业中，流程图主要用来说明某一过程。这种过程既可以是生产线上的工艺流程，也可以是完成一项任务必需的管理过程。流程图的功能：1.流程图是揭示和掌握封闭系统运动的有...
HTML特性与网页制作流程解析
在这个期末考试的答案中，重点讨论了HTML（超文本标记语言）的特点，以及网页制作的一些基本流程和概念。 HTML作为一种标记语言，具有以下显著特点： 1. **简易性**：HTML的设计初衷是为了让非程序员也能轻松地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值