昨天雖然完成了基本功能，但整個界面看起來過于簡陋，今天咱們一起來做個美容師。

最終的效果如下：

?

再來看一下我們的 HTML 代碼：

<h1>我的任務(wù)管理</h1> <input type="text" id="task-input" placeholder="輸入新任務(wù)" /> <button id="add-task-btn">添加任務(wù)</button> <ul id="task-list"></ul> 

目前有的 CSS 如下：

/* 簡單的CSS樣式 */ body {   font-family: Arial, sans-serif;   margin: 20px; }  .task {   display: flex;   justify-content: space-between;   margin-bottom: 10px; }  .task.completed {   text-decoration: line-through; } 

咱們一個一個來看。

標(biāo)題居中顯示

標(biāo)題的樣式比較簡單，這里只做居中顯示，另外修改顏色讓它不那么黑。

h1 {   text-align: center;   color: #333; } 

?? 由于我們的頁面比較簡單，只有一個 h1，所以這樣定義了樣式。如果頁面比較復(fù)雜，更常規(guī)的做法是定義樣式類，并應(yīng)用到元素上。

任務(wù)輸入框和添加按鈕

接下來，就是任務(wù)輸入框和添加按鈕。

#task-input {   width: calc(100% - 150px);   padding: 10px;   margin-right: 10px;   border: 1px solid #ccc;   border-radius: 4px; } 

這里的任務(wù)輸入框的寬度，使用了計算。值為整個頁面的寬度減去 150px。

另外一個美化點在于，使用了圓角，這個是通過border-radius實現(xiàn)的。

#add-task-btn {   padding: 10px 20px;   background-color: #28a745;   color: white;   border: none;   border-radius: 4px;   cursor: pointer; }  #add-task-btn:hover {   background-color: #218838; } 

對于按鈕，同樣定義了圓角，另外就是背景色的修改。

注意一般來說修改了背景色的同時要注意文字顏色的同步修改。

另外，使用了偽類:hover 為鼠標(biāo)經(jīng)過按鈕時添加了另一個樣式。

這樣看起來，更具有動畫效果。

任務(wù)列表顯示

最后就是任務(wù)列表了，這里我們需要對之前的腳本做一點修改，為完成和刪除兩個按鈕添加一個樣式類。

//前面的代碼 completeBtn.className = 'complete-btn'; //中間的代碼 deleteBtn.className = 'delete-btn'; //后面的代碼 

自己試著找到合適的位置，把上面兩行添加到上次的 JavaScript 腳本中。

然后我們就可以開始為任務(wù)列表添加樣式了。

#task-list {   list-style-type: none;   padding: 0; }  .task {   display: flex;   justify-content: space-between;   align-items: center;   padding: 10px;   margin-bottom: 10px;   background-color: white;   border: 1px solid #ccc;   border-radius: 4px;   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }  .task.completed {   text-decoration: line-through;   color: #999; }  .task button {   padding: 5px 10px;   border: none;   border-radius: 4px;   cursor: pointer; } 

為整個任務(wù)列表定義樣式，修改了 task 行的部署為彈性盒子。

.task button.complete-btn {   background-color: #007bff;   color: white; }  .task button.complete-btn:hover {   background-color: #0056b3; }  .task button.delete-btn {   background-color: #dc3545;   color: white; }  .task button.delete-btn:hover {   background-color: #c82333; } 

為完成按鈕和刪除按鈕添加額外的樣式。

總結(jié)

通過今天的樣式，相信各位對美化網(wǎng)頁有了更多的認識。

咱們明天一起接著看本地存儲部分，如何存儲任務(wù)。