在制作網頁的過程中，經常會用到打勾的框框來標記選項是否被選擇或任務是否已完成。這種框框的制作可以使用CSS來實現。

首先，我們可以使用一個div元素來作為容器，然后使用CSS中的border屬性來創建框框。

<div class="checkbox"></div>
.checkbox {
width: 20px;
height: 20px;
border: 2px solid gray;
}

以上代碼可以創建一個20像素寬、20像素高、顏色為灰色的邊框的div元素。但是這還不夠，我們還需要在框框中間打勾。

可以使用CSS中的偽元素:before和:after來創建這個勾符號。勾符號可以用CSS來繪制，也可以使用Unicode字符（\2713）來表示。

<div class="checkbox">
<span class="checkmark"></span>
</div>
.checkbox {
width: 20px;
height: 20px;
border: 2px solid gray;
position: relative;
}
.checkbox .checkmark:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 14px;
border: 2px solid gray;
border-top: none;
border-right: none;
transform: rotate(-45deg) translate(-50%, -50%);
}
.checkbox .checkmark:after {
content: "\2713";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
}

以上代碼中，我們使用了一個span元素來作為打勾符號的容器。同時，這個span元素的:hover偽類可以用來添加鼠標懸停效果。

使用CSS創建打勾的框框確實需要花費一些時間和精力，但由于這些樣式可以被添加到其他元素中，讓你的網頁設計變得更加靈活和有趣。