接前一天的內容。
需求已經清楚了，就一起要搭建項目的框架。
考慮到目前沒有講過任何前端框架，為了簡化學習，這次示例里不采用任何框架。
項目的結構如下：
taskmgr/ ├── css/ │ └── styles.css ├── js/ │ └── script.js └── index.html
創建 HTML 頁面
在本地某個路徑下，比如說 C:\learning：
新建一個文件夾taskmgr，然后使用 VS Code 打開此文件夾。
在 VS Code 中新建一個文件 index.html。
在 index.html 文件中，輸入!，得到默認的 HTML 代碼。
?
這樣，我們就有基本的 HTML 代碼，它顯示的效果如下。
?? 希望你還記得這里 Live Server 擴展的使用，它在 VS Code 的右下方，如果你還沒有安裝，參考 HTML 入門里的教程安裝此插件。
添加 CSS 文件
接下來，我們添加 CSS 文件并鏈接到網頁中。
在 VS Code 中新建文件夾 css，并在此文件夾下新建文件styles.css。
在 styles.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; }
在 index.html 文件的 head 標簽下添加 css 的鏈接。
<link rel="stylesheet" href="./css/styles.css" type="text/css" />
這之后，文件結構如下：
頁面效果并沒有太大變化，就不截圖了。
添加 JavaScript 文件
最后來添加一個 JavaScript 文件。
在 VS Code 中新建文件夾 js，并在此文件夾下新建文件script.js。
在 script.js中添加以下代碼用于暫時驗證我們的添加是工作的，這部分代碼在后面去除。
const taskList = document.getElementById('task-list'); taskList.innerText = '暫時沒有任務。';
在 index.html 文件的 body 標簽最后添加 js 的鏈接。
<body> <!-- 此處是其它代碼，以下引用放在最后--> <script src="./js/script.js"></script> </body>
這樣之后文件結構如下：
刷新頁面的話，會看到下方多了一行文字 “暫時沒有任務。”，表明 JS 代碼工作了。
總結
好了，如果你按照前面的步驟一步一步完成了，那么你就擁有了練手項目的基本結構。
基于這個結構，明天就可以開始完成功能。
今天的內容相對簡單，回顧了之前的 HTML 頁面的創建和引用 CSS、JavaScript 文件。
如果這一塊還有不熟悉的，可以回頭復習一下 HTML 和 CSS 基礎。
一起期待明天吧。
該文章在 2024/10/30 15:12:07 編輯過
400 186 1886
