帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

纯html+css实现的流程图样式代码

帝国模板之家 2020-11-13 网页特效 评论

这是一款纯CSS库,用于呈现流程图,说明HTML列表中定义节点之间的关系。

使用方法:

1.在html页面中加载核心样式表process_diagram.css

<link rel="stylesheet" href="process_diagram.css" />

2.为流程图构建一个由节点、描述和链接组成的层次结构,代码如下:

<ol class="process_diagram">
  <li><div>All this magic is pure CSS &amp; HTML</div></li>
  <li>
    <ul>
      <li>
        <ol>
          <li><div>Node 1.1.1
            <p>
              A paragraph on some details. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div></li>
          <li>
            <ul>
              <li><div>Node 1.1.1.1</div></li>
              <li><div>Node 1.1.1.2</div></li>
            </ul>
          </li>
          <li><div>Node 1.1.2</div></li>
          <li>
            <ul>
              <li><div>Node 1.1.2.1</div></li>
              <li><div>Node 1.1.2.2</div></li>
              <li><div>Node 1.1.2.3</div></li>
            </ul>
          </li>
        </ol>
      </li>
      <li>
        <ol>
          <li><div>Node 1.2.1</div></li>
          <li><div>Node 1.2.2</div></li>
          <li><div>Node 1.2.3</div></li>
        </ol>
      </li>
      <li><div>Node 1.3
        <p>N’importe quoi ici.</p>
        </div></li>
    </ul>
  </li>
  <li>
    <ul>
      <li><div>Node 2.1</div></li>
      <li><div>Node 2.2
        <p>Put anything here.</p>
      </div></li>
      <li><div>Node 2.3</div></li>
    </ul>
  </li>
  <li><div>Node&nbsp;3</div></li>
  <li><div>Download The Package <a href="https://www.cssscript.com/process-flow-diagram/">css_process_diagram</a></div></li>
</ol>

3.自定义连接线的厚度和宽度。

:root {
  --linethick: 3px;
  --linewidth: 1.8em;
}

4.自定义节点的样式

.process_diagram li > div { 
  background-color:#eef; 
  color:#666; 
  border-style:solid; 
  border-color:#900; 
  text-align:left; 
}

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言