CSS樓層分布圖是根據樓層設定不同的顏色和樣式來區分和展示樓層分布的圖形化顯示方式。在網頁設計和開發中,它可以用于展示商場、大樓、地鐵站等多層建筑內部的樓層分布情況,使用戶更直觀地了解和獲取所需信息。
/* 樓層分布圖樣式 */ .floor { position: relative; /* 需要定位 */ margin: 50px auto 0; width: 900px; height: 550px; background-color: #eee; } .floor .num { font-size: 30px; font-weight: bold; color: #fff; text-align: center; line-height: 80px; } /* 圓圈標記 */ .circle { position: absolute; /* 需要定位 */ border-radius: 50%; width: 50px; height: 50px; background-color: #6c6; border: 5px solid #000; } /* 樓層1位置 */ .floor1 { top: 50%; margin-top: -200px; left: 10%; } /* 樓層2位置 */ .floor2 { top: 40%; margin-top: -150px; left: 35%; } /* 樓層3位置 */ .floor3 { top: 30%; margin-top: -100px; left: 60%; } /* 樓層4位置 */ .floor4 { top: 20%; margin-top: -50px; left: 85%; }
以上為一個簡單的CSS樓層分布圖樣式代碼,其中首先需要定義一個.floor容器作為整個樓層分布圖的定位和大小,并定義.num用來顯示樓層序號。接著定義.circle圓圈樣式作為標記點,后面依次定義了4個樓層位置并使用.circle標記進行定位,從而展示樓層分布情況。