2、箭头规律：2,3, 8,9, 14,15都为向左的箭头，5,6, 11,12都为向右箭头，4,7,10,13都为向上箭头，根据计算，给每块增加标识，用于旋转
图
标的角度。1、因为奇数行要从左往右排列，偶数行要从右往左排列，所以我将原数据重组为二维数组，方便判断。第一、二、三行放在外层循环，每行的一、二、三列为为内层循环。
最后再把花瓣上的文字加上，Html文档中我用到了section标签，注意标签section一定要有h标签，这是很多前端设计新手容易犯的错，其实我以前也这样，后面用W3C
css
验证才发现这个问题。用Html标签和
css
来写一个花式
流程图
，先看这张已经完工的
流程图
，一个白色圆形，中心是文字，围绕它周围的是8个彩色的花瓣，花瓣中间有文字。
CSS
样式表中将元素设置为绝对定位，高宽设置为600px，距离左边，顶部的距离为50%，再减去一半的距离值，这样就居中了。花瓣的形状可以用圆形，也可以用椭圆形画。...
特想吐槽下，上传的
图
片尽然给拉伸了。
图
片都展示不好了（*-*）生气，就先凑合看吧
首先进行中的为绿色，进行中的为橙色，未进行的为灰色，活不多说直接上代码，横向的为自己手写，纵向为elementUI自带的
<ul class="steps">
<li v-for="(item,index) in list" :key="item.id" :class=...
适用于0基础学习html和
css
3
这是我做的一个
流程图
，html5和
css
3需要学习的内容。我会慢慢更新基础知识，把详细内容做出来。如果对你有帮助可随意保存，一起学习。
希望大家多给一点鼓励支持，给0基础博主点个赞，给一些学习建议。
注释：我也是0基础啥也不会，就希望通过这个平台吧，做些笔记能够督促自己学习前端知识。如果有想一起学习的小白，可以私信我，我们互相学习。
在开发过程中会经常遇到流程模块的功能 ，今天就来说下
css
如何
实现
如下
图
所示的左侧流程标记~
<div class="os" style="width :100px ; height :100px ; border:1px solid black ;margin-top : 50px;" >
<div class="orl"></div>
css
样式
.orl{
width: 3px;
//1.引入js//画
流程图
//画所有的
图
形：画
图
和画对应的箭头function drawFlowChart(context, canvas, flowdata, initTop, initSpaceH) {//1、判断是否有需要平均计算x的数据flowdata.forEach(function (row) {if (row.isAverage) {row.data = calChartX(can...
将HTML文件转化成一个DOM。
浏览器拉取HTML的大部分资源。
浏览器拉取到
CSS
之后会进行解析，浏览器基于选择器的不同类型找到不同的选择器，将不同的规则应用在对应的DOM节点中，并添加节点的依赖样式——渲染树。
渲染树依照应该出现的结构进行布局。
网页展示——着色。
CSS
工作
流程图
：
HTML转化成DOM
HTML代码：
