CSS/HTML流程图
我需要一个非常简单、直接的CSS/HTML流程图,格式如下:CSS/HTML流程图,html,css,Html,Css,我需要一个非常简单、直接的CSS/HTML流程图,格式如下: Node1 | Node2 | Node3 | Node4 | Node5 | Node6 我对CSS几乎一无所知,但试图修改下面链接中详述的CSS。问题是我只想要一个线性的,垂直的图表,结果它到处都是 有人能帮忙吗?希望这对你有用: 如果JS小提琴消失了,下面是代码 HTML <h1>A simple family tree using 32 divs</h1> <div
Node1
|
Node2
|
Node3
|
Node4
|
Node5
|
Node6
我对CSS几乎一无所知,但试图修改下面链接中详述的CSS。问题是我只想要一个线性的,垂直的图表,结果它到处都是
有人能帮忙吗?希望这对你有用:
如果JS小提琴消失了,下面是代码 HTML
<h1>A simple family tree using 32 divs</h1>
<div id="container">
<div id="no1"><a href="#">Production Director</a></div>
<div id="line1"></div>
<div id="no1"><a href="#">Production Director</a></div>
<div id="line1"></div>
<div id="no1"><a href="#">Production Director</a></div>
<div id="line1"></div>
<div id="no1"><a href="#">Production Director</a></div>
</div>
HTML不是设计成一种图表语言的。我想改用SVG。你能给我举个例子,说明我如何使用SVG创建流程图,然后向流程图中添加HTML或jQuery元素吗?看起来很棒!如果我要添加无限的额外节点,我该怎么做?@Frap如果您使用某种循环来渲染所有流程图项目,您可以告诉它在每个元素后渲染line1 div,使其看起来像那样。要添加更多,只需复制以下内容:@Frap,我忘了提及。将ID放入类中,因为当前ID不会验证。希望这是有意义的。因此,不要使用div id,而是将其更改为div class,然后将css更改为。而不是#?
h1 {
width:580px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
text-align:center;
margin:40px auto;
}
#container {
width:580px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:11px;
text-align:center;
margin:auto;
}
#container a {
display:block;
color:#000;
text-decoration:none;
background-color:#f6f6ff;
}
#container a:hover {
color:#900;
background-color:#f6f6ff;
}
#no1 {
width:190px;
line-height:60px;
border:1px solid #000;
margin:auto;
}
#no1 a {
height:60px;
}
#line1 {
font-size:0;
width:1px;
height:20px;
color:#fff;
background-color:#000;
margin:auto;
}
#line2 {
font-size:0;
width:424px;
height:1px;
color:#fff;
background-color:#000;
margin:auto;
}
#line3 {
font-size:0;
display:inline;
width:1px;
height:20px;
color:#fff;
background-color:#000;
margin-left:78px;
float:left;
}
#line4,#line5,#line6 {
font-size:0;
display:inline;
width:1px;
height:20px;
color:#fff;
background-color:#000;
margin-left:140px;
float:left;
}
#no2 {
display:inline;
border:1px solid #000;
clear:both;
margin-left:35px;
float:left;
}
#no2 a,#no4 a,#no8 a {
width:84px;
height:50px;
padding-top:8px;
}
#no3 {
display:inline;
border:1px solid #000;
margin-left:58px;
float:left;
}
#no3 a,#no5 a,#no6 a,#no7 a,#no9 a {
width:84px;
height:42px;
padding-top:16px;
}
#no4 {
display:inline;
border:1px solid #000;
margin-left:53px;
float:left;
}
#no5 {
display:inline;
border:1px solid #000;
margin-left:55px;
float:left;
}
#line7,#line13 {
font-size:0;
display:inline;
width:1px;
height:38px;
color:#fff;
background-color:#000;
margin-left:219px;
float:left;
}
#line8,#line14 {
font-size:0;
display:inline;
width:1px;
height:38px;
color:#fff;
background-color:#000;
margin-left:281px;
float:left;
}
#no6,#no8 {
display:inline;
border:1px solid #000;
margin-left:107px;
float:left;
}
#line9,#line11,#line15,#line17 {
font-size:0;
display:inline;
width:26px;
height:1px;
color:#fff;
background-color:#000;
margin-top:29px;
float:left;
}
#line10,#line12,#line16,#line18 {
font-size:0;
display:inline;
width:1px;
height:60px;
color:#fff;
background-color:#000;
float:left;
}
#line16,#line18 {
height:30px;
}
#no7,#no9 {
display:inline;
border:1px solid #000;
margin-left:169px;
float:left;
}
.clear {
clear:both;
}