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將每個職位的名稱用一個圓圈包裹起來。具體結構和樣式的調整可根據實際情況進行修改。