HTML/css是現代網站開發的兩個基本技術,在實現一個漂亮的登錄界面時它們也起著至關重要的作用。下面就通過pre標簽來展示一下我編寫的一個漂亮的登錄界面代碼。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>漂亮的登陸界面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login"> <h2>歡迎登錄</h2> <form> <input type="text" name="username" placeholder="賬號"> <input type="password" name="password" placeholder="密碼"> <button>登錄</button> </form> </div> </body> </html>
這段代碼使用了HTML和CSS來實現登陸界面。其中的樣式代碼存放在style.css文件中，使整個代碼架構更加清晰。其中form是表單的結構，在表單中實現了輸入用戶名、密碼和提交按鈕的功能。整個登錄塊也被包裹在div標簽中，class為login。登錄塊中的標題用了h2標簽加粗，增強了標題的視覺效果。
下面是對應的樣式代碼:
.login {
margin: auto;
width: 300px;
height: 250px;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
padding: 30px;
text-align: center;
}
h2 {
font-size: 28px;
margin-bottom: 30px;
}
form input {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
button {
width: 100%;
background-color: #54a0ff;
color: #fff;
padding: 10px;
border-radius: 5px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #2979ff;
}這段樣式代碼中規定了登錄塊的高度，內外邊距，背景色以及邊框等，以及表單中輸入框的樣式和按鈕的樣式。對按鈕進行了漸變背景色處理，鼠標移上去后按鈕背景色會由淺到深加深視覺效果，可以更好的吸引用戶的關注。
總的來說，這個登錄界面體現了HTML/CSS的基本功，以簡潔大方的設計獲得了不錯的視覺效果。