在網頁設計中，焦點圖是常見的網頁元素，常常用于突出展示網站的主要內容。使用CSS編寫焦點圖可以有效地提升網站的美感和用戶體驗。以下是制作焦點圖的步驟和樣例代碼。

第一步：HTML代碼

<div class="focus">
<ul>
<li><img src="img1.jpg" alt=""></li>
<li><img src="img2.jpg" alt=""></li>
<li><img src="img3.jpg" alt=""></li>
</ul>
</div>

以上代碼中，包含一個class為“focus”的div容器，以及一個含有三個子元素的無序列表。每個列表項都包含一張圖片，用于展示網站重點內容。在CSS中，將使用偽類來輪換這三張圖片。

第二步：CSS代碼

.focus {
position: relative;
width: 600px;
height: 300px;
overflow: hidden;
}
.focus ul {
list-style: none;
position: absolute;
top: 0;
left: 0;
width: 1800px;
height: 300px;
animation: focusMove 12s linear infinite;
}
.focus li {
float: left;
width: 600px;
height: 300px;
}
.focus li img {
display: block;
}
@keyframes focusMove {
0% {left: 0;}
25% {left: -600px;}
50% {left: -1200px;}
75% {left: -1800px;}
100% {left: 0;}
}

以上代碼中，首先定義了焦點圖容器的樣式。將它的寬高設定為固定值，并且隱藏超出容器范圍的內容。接下來，設置包含焦點圖的無序列表為絕對定位，上下左右都距離父元素為0。將列表的寬度設定為三倍的容器寬度，這樣才能容納三張圖片。其中，使用了CSS3的動畫屬性，將焦點圖的輪換時間設定為12秒。列表項的樣式設定為兩倍容器寬度，并且設置為浮動布局。最后，定義了一個名為“focusMove”的關鍵幀動畫，用于控制焦點圖的輪換。

第三步：JavaScript代碼（可選）

var focus = document.querySelector(".focus");
focus.onmouseover = function() {
var ul = focus.querySelector("ul");
ul.style.animationPlayState = "paused";
}
focus.onmouseout = function() {
var ul = focus.querySelector("ul");
ul.style.animationPlayState = "running";
}

以上代碼為可選項，它能夠控制焦點圖在用戶鼠標懸浮或離開時的暫停和運行。可以在焦點圖中加入一個事件監聽器，控制焦點圖的運行狀態。

通過上述步驟，可以實現一個簡單的焦點圖，展示網站最精彩的內容。當然，還有一些其他的優化措施可以提升焦點圖的效果，如添加圓點導航、實現無縫輪播等。通過使用CSS、JavaScript等技術，肯定能夠打造出更加美觀、優秀的焦點圖效果。