在Web開發中，地圖展示是一個常見的需求。我們可以通過Google Maps等API實現地圖的展示，但是如果你只需要簡單的展示一張地圖，使用純CSS也可以達到很好的效果。

下面是一個使用純CSS實現的地圖的代碼示例：

<div class="map-container">
<div class="map-left">
<div class="map-box">
<div class="map-marker marker-1"></div>
<div class="map-marker marker-2"></div>
<div class="map-marker marker-3"></div>
</div>
</div>
<div class="map-right">
<div class="map-box">
<div class="map-marker marker-4"></div>
</div>
</div>
</div>

在上面的代碼中，我們通過一個div容器包裹了地圖的所有元素，并定義了兩個占位符容器（map-left和map-right）。在它們中間我們實現了地圖內容的顯示，即一個包含了多個marker的map-box。

接下來，我們使用CSS實現各個元素的定位和樣式。代碼如下：

.map-container {
display: flex;
justify-content: space-between;
height: 300px;
background-color: #eee;
}
.map-box {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
background-image: url("map.png");
background-size: contain;
background-repeat: no-repeat;
}
.map-marker {
position: absolute;
width: 30px;
height: 30px;
background-color: #4184F3;
border-radius: 50%;
}
.marker-1 {
top: 60px;
left: 20px;
}
.marker-2 {
top: 25%;
right: 20px;
}
.marker-3 {
bottom: 20px;
left: 40%;
}
.marker-4 {
top: 60%;
left: 30%;
}
.map-left {
flex: 1;
}
.map-right {
flex: 1;
}

在上面的代碼中，我們使用了flex布局實現了兩個占位符的布局。map-container設置了背景色和高度。map-box是地圖顯示的容器，設置了背景圖片和大小，并使用了background-size和background-repeat屬性實現了圖片的適應和重復。map-marker是地圖上的標記點，設置了大小、顏色和圓角。marker-1至4是四個標記點，設置了它們在map-box中的位置。

在以上代碼的基礎上，你可以根據需要進行修改和調整，達到更好的效果。總的來說，純CSS地圖不僅簡單易用，而且效果優美，值得一試。