几百人的族谱css,CSS3中的垂直族谱

＆＃13;

*, *:before, *:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

min-width: 1200px;

margin: 0;

padding: 50px;

color: #000;

font: 16px Verdana, sans-serif;

background: #fff;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

#wrapper {

position: relative;

}

.branch {

position: relative;

margin-left: 250px;

}

.branch:before {

content: "";

width: 50px;

border-top: 2px solid #000;

position: absolute;

left: -100px;

top: 50%;

margin-top: 1px;

}

.entry {

position: relative;

min-height: 60px;

}

.entry:before {

content: "";

height: 100%;

border-left: 2px solid #000;

position: absolute;

left: -50px;

}

.entry:after {

content: "";

width: 50px;

border-top: 2px solid #000;

position: absolute;

left: -50px;

top: 50%;

margin-top: 1px;

}

.entry:first-child:before {

width: 10px;

height: 50%;

top: 50%;

margin-top: 2px;

border-radius: 10px 0 0 0;

}

.entry:first-child:after {

height: 10px;

border-radius: 10px 0 0 0;

}

.entry:last-child:before {

width: 10px;

height: 50%;

border-radius: 0 0 0 10px;

}

.entry:last-child:after {

height: 10px;

border-top: none;

border-bottom: 2px solid #000;

border-radius: 0 0 0 10px;

margin-top: -9px;

}

.entry.sole:before {

display: none;

}

.entry.sole:after {

width: 50px;

height: 0;

margin-top: 1px;

border-radius: 0;

}

.label {

display: block;

min-width: 150px;

padding: 5px 0px;

line-height: 20px;

text-align: center;

position: absolute;

left: 0;

top: 50%;

margin-top: -15px;

}＆＃13;

Root

Entry-1

Entry-1-1

Entry-1-1-1

Entry-1-2

Entry-1-2-1

Entry-1-3

Entry-1-3-1

Entry-2

Entry-3

Entry-3-1

Entry-3-2

Entry-3-3

Entry-3-3-1

Entry-3-3-2

Entry-3-3-2-1

Entry-3-3-2-2

Entry-3-3-3

Entry-3-4

Entry-4

Entry-5

＆＃13;