theme: smartblue

Offer 駕到，掘友接招！我正在參與2022春招打卡活動，點選檢視活動詳情。

介紹

最近一直想利用寫個 Go Web 專案，但苦於自己一直沒有前端知識，所以想也從小白的角度（其實也不算）來學習前端的那些知識，今天就來介紹一下 HTML 和 CSS 。

今天就來動手寫一個登入介面，後期希望能配合 Echo 框架實現前後端打通。

HTML：Hyper Text Markup Language，超文字標記語言，可以說是建立網頁最重要的標記語言，可以在網頁中顯示文字、影象、音訊和視訊。

CSS：Cascading Style Sheets，中文翻譯為層疊樣式表，用於定義網頁的樣式，修飾 HTML 檔案，可以用來製作響應式網頁，並用於樣式及其格式規則，包括針對不同裝置和螢幕尺寸的設計和佈局。

CSS 有三種引用方式：

內聯 CSS，又稱行內樣式，就是把 CSS 樣式直接放在程式碼行內的標籤中，一般是寫入標籤的 style 屬性中，直接瞭解，但可想而知這種方式也不容易修改。
內部 CSS，也是在 style 標籤中書寫 CSS 程式碼，但此時的 style 標籤寫在 head 標籤中
外部 CSS，將 CSS 程式碼寫好儲存在 .css 的樣式表中，然後通過 HTML 檔案引入，通常有兩種引用方式：連結式和匯入式。

關於 HTML 和 CSS 的簡要介紹就到此結束了，接下來我們看如何寫一個介面：

新建一個登入介面

在本地新建一個 login.html 的本地檔案，然後通過 VS code 開啟，寫入如下程式碼：

```html

登入介面

```

然後通過瀏覽器開啟，可以看到如下圖的介面：

但是這個介面真的很不美觀，此時 CSS 樣式就能派上用場了。

新建 CSS 檔案

這裡我們通過外部 CSS 的方式來美化我們的登入介面。在 login.html 同級目錄下新建一個名為 css 的資料夾，然後新建一個 style.css 的檔案，寫入如下程式碼：

```css body { margin: 0; padding: 0; background-color: #4983f0ba; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } .login{ width: 382px; overflow: hidden; margin: auto; margin: 20 0 0 450px; padding: 80px; background: #438175; border-radius: 16px; } h2{ text-align: center; color: #277582; padding: 20px; } label{ color: #30e682; font-size: 17px; }

Uname{

width: 300px;
height: 30px;
border: none;
border-radius: 4px;
padding-left: 8px;

}

Pass{

width: 300px;
height: 30px;
border: none;
border-radius: 4px;
padding-left: 8px;

}

log{

width: 370px;
height: 30px;
border: none;
border-radius: 20px;
color: blue;

} span{ color: white; font-size: 17px; } a{ font-size: 16px; background-color: rgb(248, 245, 245); }

```

然後在 login.html 檔案的 head 標籤中匯入我們的 CSS 檔案：

html <head> <title>Login Form</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>

最終呈現的效果如下:

總結

介面有點簡陋，但也算是完成了入門寫一個登入介面，希望各位前端大佬們多多指點，接下來就是該考慮如何用 Go 程式碼與這個介面互動了。下一篇文章見！

如何使用 HTML 和 CSS 寫一個登入介面