在網頁制作中,我們常常需要使用 CSS 來進行樣式的設置,其中比較常見的是采用定位的方式。對于中國地圖來說,我們也可以采用 CSS 定位的方式來實現地圖上的圖標標注,讓網頁更加美觀實用。
#china-map { position: relative; /* 設置地圖為相對定位 */ width: 700px; /* 設置地圖的寬度 */ height: 450px; /* 設置地圖的高度 */ background-image: url(china-map.png); /* 引入地圖背景圖 */ background-repeat: no-repeat; /* 設置背景圖不平鋪 */ background-position: center; /* 設置背景圖居中顯示 */ } #beijing-marker { position: absolute; /* 設置標記為絕對定位 */ width: 20px; /* 設置標記的寬度 */ height: 20px; /* 設置標記的高度 */ background-image: url(marker.png); /* 引入標記背景圖 */ background-repeat: no-repeat; /* 設置背景圖不平鋪 */ background-position: center; /* 設置背景圖居中顯示 */ left: 300px; /* 設置標記離地圖左側的距離 */ top: 100px; /* 設置標記離地圖頂部的距離 */ } #shanghai-marker { position: absolute; /* 設置標記為絕對定位 */ width: 20px; /* 設置標記的寬度 */ height: 20px; /* 設置標記的高度 */ background-image: url(marker.png); /* 引入標記背景圖 */ background-repeat: no-repeat; /* 設置背景圖不平鋪 */ background-position: center; /* 設置背景圖居中顯示 */ left: 400px; /* 設置標記離地圖左側的距離 */ top: 250px; /* 設置標記離地圖頂部的距離 */ }
通過以上的 CSS 代碼,我們可以將中國地圖以及北京、上海兩座城市的位置標記呈現在網頁中。要注意的是,地圖的背景圖以及標記的背景圖需要提前準備,這里我分別使用了名為 china-map.png 和 marker.png 兩張圖片。
上一篇mysql8.0連接驅動
下一篇中興CSS