今天我們來學習一下如何用純CSS創建一個左浮動窗口。

首先，我們先通過HTML創建一個含有左浮動窗口的頁面結構：

<div class="left">
<div class="top">Left Float Window</div>
<div class="content">
<p>這是左浮動窗口中的內容。</p>
<p>這是另一個內容。</p>
</div>
</div>

現在我們開始用CSS來美化它。

首先，我們定義左浮動窗口的基本樣式：

.left {
position: fixed; /* 固定定位 */
top: 50%; /* 頂部 50% */
left: 0; /* 左側 0 */
transform: translate(-100%, -50%); /* 左移窗口寬度的距離 */
width: 300px; /* 窗口寬度 */
padding: 20px; /* 內邊距 */
background-color: #fff; /* 背景色 */
box-shadow: 0 0 10px rgba(0,0,0,.2); /* 陰影 */
}

接下來，我們為窗口頂部和內容分別定義樣式：

.top {
font-size: 24px; /* 字號 */
font-weight: bold; /* 加粗 */
border-bottom: 1px solid #ccc; /* 下邊框 */
margin-bottom: 20px; /* 底部邊距 */
}
.content {
font-size: 16px; /* 字號 */
line-height: 1.5; /* 行高 */
}

最后，我們定義一個動畫效果，使窗口能夠滑入和滑出：

.left {
/* 前面的樣式 */
transition: transform .3s ease; /* 動畫效果 */
}
.left.show {
transform: translate(0, -50%); /* 滑入窗口 */
}
.left.hide {
transform: translate(-100%, -50%); /* 滑出窗口 */
}

現在我們已經完成了左浮動窗口的創建。如果需要使窗口滑入和滑出，只需要通過JavaScript添加show和hide樣式即可。