昨天雖然完成了基本功能，但整個(gè)界面看起來(lái)過(guò)于簡(jiǎn)陋，今天咱們一起來(lái)做個(gè)美容師。
最終的效果如下：
?
再來(lái)看一下我們的 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 如下：
/* 簡(jiǎn)單的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; }
咱們一個(gè)一個(gè)來(lái)看。
標(biāo)題居中顯示
標(biāo)題的樣式比較簡(jiǎn)單，這里只做居中顯示，另外修改顏色讓它不那么黑。
h1 { text-align: center; color: #333; }
?? 由于我們的頁(yè)面比較簡(jiǎn)單，只有一個(gè) h1，所以這樣定義了樣式。如果頁(yè)面比較復(fù)雜，更常規(guī)的做法是定義樣式類(lèi)，并應(yīng)用到元素上。
任務(wù)輸入框和添加按鈕
接下來(lái)，就是任務(wù)輸入框和添加按鈕。
#task-input { width: calc(100% - 150px); padding: 10px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px; }
這里的任務(wù)輸入框的寬度，使用了計(jì)算。值為整個(gè)頁(yè)面的寬度減去 150px。
另外一個(gè)美化點(diǎn)在于，使用了圓角，這個(gè)是通過(guò)border-radius實(shí)現(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; }
對(duì)于按鈕，同樣定義了圓角，另外就是背景色的修改。
注意一般來(lái)說(shuō)修改了背景色的同時(shí)要注意文字顏色的同步修改。
另外，使用了偽類(lèi):hover 為鼠標(biāo)經(jīng)過(guò)按鈕時(shí)添加了另一個(gè)樣式。
這樣看起來(lái)，更具有動(dòng)畫(huà)效果。
任務(wù)列表顯示
最后就是任務(wù)列表了，這里我們需要對(duì)之前的腳本做一點(diǎn)修改，為完成和刪除兩個(gè)按鈕添加一個(gè)樣式類(lèi)。
//前面的代碼 completeBtn.className = 'complete-btn'; //中間的代碼 deleteBtn.className = 'delete-btn'; //后面的代碼
自己試著找到合適的位置，把上面兩行添加到上次的 JavaScript 腳本中。
然后我們就可以開(kāi)始為任務(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; }
為整個(gè)任務(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é)
通過(guò)今天的樣式，相信各位對(duì)美化網(wǎng)頁(yè)有了更多的認(rèn)識(shí)。
咱們明天一起接著看本地存儲(chǔ)部分，如何存儲(chǔ)任務(wù)。
該文章在 2024/11/1 9:08:46 編輯過(guò)
400 186 1886
