關于 CSS 小船制作教程，可以通過以下步驟實現：

首先，在 HTML 中創建一個 div 元素，用于容納小船：

<div class="boat">
...
</div>

接下來，使用 CSS 設置小船的寬高、背景顏色、邊框樣式等屬性：

.boat {
width: 100px;
height: 50px;
background-color: #FFF;
border: 1px solid #000;
}

然后，需要添加兩個三角形元素作為小船的帆：

.boat:before {
content: '';
position: absolute;
left: -20px;
top: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid #CCC;
border-bottom: 20px solid transparent;
}
.boat:after {
content: '';
position: absolute;
right: -20px;
top: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid #CCC;
border-bottom: 20px solid transparent;
}

其中，before 和 after 分別指代小船 div 元素的前面和后面。這兩個元素使用了絕對定位，并設置了寬高為 0，利用 border-top、border-right、border-bottom 及 border-left 屬性繪制出三角形帆的效果。

最后，為了讓小船在頁面上水平居中，可以添加以下 CSS 代碼：

.boat {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

這樣一來，我們的小船就完成啦！你可以自己動手試著制作一下，然后根據需要進行調整和改進。