html流程图可新增删除,CSS / HTML流程图

希望这对你有用：

如果JS Fiddle消失,这里是代码.

HTML

A simple family tree using 32 divs

Production Director

Production Director

Production Director

Production Director

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;

}