CSS/HTML 流程图

Question

CSS/HTML 流程图

6

我需要一个非常简单、直接的CSS/HTML流程图，格式如下：

Node1
  |
Node2
  |
Node3
  |
Node4
  |
Node5
  |
Node6

我对CSS几乎一窍不通，但试图修改下面链接中详细说明的那个。问题是我只想要一个线性垂直图表，最后却到处都是！

http://www.htmlforums.com/css/t-flowchart-using-css-85999.html

有人可以帮忙吗？

- jaxxstorm

4

HTML并不是一个图形绘制语言。我建议改用SVG来进行绘图。 - Quentin

1

你能给我一个例子，说明如何利用SVG创建流程图，然后添加HTML或jQuery元素吗？ - jaxxstorm

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gutierrezalex · Accepted Answer

希望这对您有帮助：

http://jsfiddle.net/wkCNm/

如果JS Fiddle消失了，这里是代码。

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>

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;
}