在網頁中，登錄頁面是必不可少的。但是，一個好看的登錄頁面不僅能夠提高用戶的體驗，也是對網站的一個突出表現。要實現這樣的功能，我們需要運用 HTML 和 CSS 代碼。下面是一個簡單的登錄頁面的動態界面樣式代碼示例。
<html> <head> <title>登錄頁面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-box"> <h1>登錄</h1> <form> <label for="username">用戶名:</label> <input type="text" id="username" name="username" required> <label for="password">密碼:</label> <input type="password" id="password" name="password" required> <button type="submit">登錄</button> </form> </div> </body> </html>
在上面的代碼中，使用了一個 class 為 "login-box" 的 div 標簽，來定義登錄框的樣式。將 h1 標簽用于用戶名和密碼框的標題。在 form 表單中，使用 label 和 input 標簽來定義用戶名和密碼輸入框，并且必須填寫。
最后，為了美觀，使用了一個名為 "style.css" 的樣式表文件。下面是該樣式表的代碼示例。
.login-box {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
width: 300px;
border: 2px solid #333;
border-radius: 8px;
padding: 20px;
}
h1 {
font-size: 28px;
text-align: center;
color: #333;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: #666;
}
input[type="text"], input[type="password"] {
display: block;
margin-bottom: 20px;
border: 2px solid #ddd;
border-radius: 4px;
padding: 10px;
width: 100%;
}
button[type="submit"] {
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
padding: 10px 20px;
width: 100%;
}
button[type="submit"]:hover {
background-color: #111;
}可以看到，在 CSS 文件中，首先定義了登錄框的整體樣式，包括了盒子模型和邊框等屬性。接著，定義了標題、標簽和輸入框的屬性，如字體大小、顏色以及邊框等。最后，為按鈕定義了鼠標懸停效果。
總的來說，上面的代碼示例展示了如何實現一個簡單但美觀的登錄頁面，同時也對 HTML 和 CSS 代碼的相關知識進行了介紹，可以幫助初學者更好地學習和實踐。