HTML5作為一種新興的技術(shù)，其在登錄界面炫酷代碼的編寫方面也有著不少亮點(diǎn)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄界面炫酷代碼</title>
<style>
body {
background-color: #444444;
font-family: "Open Sans", Arial, sans-serif;
}
.login-wrap {
width: 320px;
margin: 0 auto;
margin-top: 100px;
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}
.login-title {
font-size: 24px;
color: #444444;
text-align: center;
margin: 0 0 20px 0;
}
.form-label {
font-size: 16px;
color: #444444;
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-input {
width: 100%;
border: none;
background-color: #f2f2f2;
padding: 10px;
border-radius: 3px;
margin-bottom: 20px;
}
.form-submit {
width: 100%;
background-color: #ff784d;
border: none;
color: #ffffff;
padding: 10px;
border-radius: 3px;
cursor: pointer;
}
.form-submit:hover {
background-color: #ff6600;
}
</style>
</head>
<body>
<div class="login-wrap">
<h1 class="login-title">登錄</h1>
<form>
<label for="username" class="form-label">用戶名</label>
<input type="text" name="username" id="username" class="form-input">
<label for="password" class="form-label">密碼</label>
<input type="password" name="password" id="password" class="form-input">
<input type="submit" value="登錄" class="form-submit">
</form>
</div>
</body>
</html>如上所示，這個登錄界面的代碼使用了HTML5的優(yōu)美語法，增加了表單元素的美觀程度，又保持了其實(shí)用性。同時，其使用了CSS3中的漸變、陰影等效果，增加了視覺效果，使登錄頁面更加醒目可愛。
總體來說，HTML5的登錄界面炫酷代碼讓用戶愛不釋手，同時也能在實(shí)現(xiàn)時，省去繁瑣的介紹，更高效的實(shí)現(xiàn)界面效果。
上一篇php url引入css
下一篇php css日歷樣式