目錄
前言
一、網頁制作概述
二、登錄頁面
2.1?HTML內容
2.2?CSS樣式
三、技術說明書
四、頁面效果圖
前言
?Bootstrap?是一個用于快速開發Web應用程序和網站的前端框架，由Twitter的設計師Mark Otto和Jacob Thornton合作開發。
它基于HTML、CSS和JavaScript，旨在通過提供一系列預定義的CSS類、JavaScript插件和HTML模板，簡化Web開發過程，使開發者能夠快速創建美觀且功能豐富的網頁?。
如果你只是需要使用 Bootstrap 的預編譯 CSS 或 JS 文件，你可以直接使用?BootCDN?提供的免費 CDN 加速服務。
?CSS文件
<!-- CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">?JS文件
<!-- jQuery and JavaScript Bundle with Popper -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>?
一、網頁制作概述
HTML代碼構成了網頁的基礎結構。編寫HTML時，應關注語義化標簽、鏈接和圖像、表格和列表的使用，以創建清晰、易于導航的網頁。
HTML完成后，使用CSS添加風格和色彩。CSS影響網頁的外觀和格式，包括顏色、字體和布局。選擇合適的顏色、字體和布局，可以提升網頁的吸引力。
最后一步是添加交互效果和動態功能，如動畫、表單驗證和交互反饋，以增強用戶體驗。
創建一個登錄頁面通常涉及HTML和CSS的基本知識。下面是一個簡單的登錄頁面的示例，包括了基本的HTML結構以及一些CSS樣式來美化頁面。
二、登錄頁面
2.1?HTML內容
首先，我們創建一個基本的HTML結構。在你的HTML文件中，你可以這樣寫：
<!doctype html>
<html lang="en"><head><!--設置編碼--><meta charset="utf-8"><!--添加頁面視口--><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Signin Template · Bootstrap v4.6</title><!-- Bootstrap core CSS -->
<link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Custom styles for this template --><link href="./css/styles.css" rel="stylesheet"></head><body class="text-center"><form class="form-signin" action="/login" method="post"><img class="mb-4" src="./assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"><h1 class="h3 mb-3 font-weight-normal">歡迎登錄</h1><label for="inputEmail" class="sr-only">郵箱地址</label><input type="email" id="inputEmail" class="form-control" placeholder="請輸入郵箱地址" required autofocus><label for="inputPassword" class="sr-only">密碼</label><input type="password" id="inputPassword" class="form-control" placeholder="請輸入密碼" required><div class="checkbox mb-3"><label><input type="checkbox" id="remember" value="remember-me"> 記住我</label></div><button class="btn btn-lg btn-primary btn-block" type="submit">登 錄</button><nav class="navbar fixed-bottom navbar-light bg-light justify-content-center"><p class="mt-5 mb-3 text-muted">Copyright © 2019-2024</p></nav></form></body>
</html>
2.2?CSS樣式
接下來，我們添加一些CSS來美化這個登錄頁面。在一個css目錄下創建一個名為styles.css的文件，并添加以下內容：
html,body {height: 100%;
}body {display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;padding-top: 40px;padding-bottom: 40px;background-color: #f5f5f5;
}.form-signin .checkbox {font-weight: 400;
}.form-signin .form-control {position: relative;box-sizing: border-box;height: auto;padding: 10px;font-size: 16px;
}.form-signin {width: 100%;max-width: 330px;padding: 15px;margin: auto;
}.form-signin .form-control:focus {z-index: 2;
}
.form-signin input[type="email"] {margin-bottom: -1px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {margin-bottom: 10px;border-top-left-radius: 0;border-top-right-radius: 0;
}
三、技術說明書
登錄頁面主要應用了web前端2個模塊的技術HTML + CSS
HTML模塊
主要針對頁面的結構搭建，使用了Bootstrap樣式，比如添加按鈕樣式，還有輸入框和選擇框的樣式；該頁面整體采用的是form表單樣式作為主要元素加上clsss屬性，其中包含:
表單標簽form
段落標簽 p
字體標簽 h1
Bootstrap的圖標等。
另外，還有輸入框的自帶表單驗證功能：
CSS模塊
主要采用的是浮動式布局的方式，頁面搭建主要通過設置form登錄表單的clss屬性來確定每個元素的位置，然后針對不同的位置定位。針對每個元素通過margin和padding屬性來設置不同模塊的相對位置，設置文字顏色color屬性等。?
綜上所述
-
HTML?部分定義了登錄表單的結構，包括用戶名和密碼輸入框以及一個提交按鈕。表單的
action屬性設置為/login，這通常是服務器端處理登錄請求的URL。你可以根據實際情況修改這個值。method屬性設置為post，這是處理登錄信息時的標準方法。 -
CSS?部分提供了樣式，包括背景顏色、邊框、陰影和按鈕的樣式，使得登錄表單看起來更加美觀和用戶友好。你可以根據需要調整這些樣式。
-
通過以上步驟，你就可以創建一個基本的登錄頁面了。
四、頁面效果圖
