色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 實現組織架構圖

洪振霞2年前12瀏覽0評論

CSS是一種標記語言,被廣泛用于網頁設計中。CSS可以控制網頁的布局、字體、顏色等方方面面。其中,使用CSS來實現組織架構圖是一種常見的需求。

/* html代碼 */
<div class="org-chart">
<div class="ceo">
<div class="title">CEO</div>
</div>
<div class="vp1">
<div class="title">VP1</div>
<div class="vp2">
<div class="title">VP2</div>
</div>
</div>
<div class="vp3">
<div class="title">VP3</div>
</div>
<div class="dir1">
<div class="title">Director 1</div>
</div>
<div class="dir2">
<div class="title">Director 2</div>
</div>
</div>
/* CSS代碼 */
.org-chart {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.ceo, .vp1, .vp3, .dir1, .dir2 {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 30px;
}
.vp1, .vp3 {
position: relative;
}
.vp2 {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -118px;
}
.title {
border: 2px solid black;
padding: 10px;
border-radius: 100%;
}
.ceo .title {
background-color: red;
}
.vp1 .title {
background-color: orange;
}
.vp2 .title {
background-color: yellow;
}
.vp3 .title {
background-color: green;
}
.dir1 .title {
background-color: blue;
}
.dir2 .title {
background-color: purple;
}

上面的代碼使用CSS實現了一個基本的組織架構圖,包括一個CEO、兩個VP、兩個Director。使用flex布局使得圖形居中顯示,在每個不同的崗位上設置不同的背景顏色,用border-radius將每個職位的名稱用一個圓圈包裹起來。具體結構和樣式的調整可根據實際情況進行修改。

下一篇mysql百億