HTML+CSS简单登录界面

初学HTML和CSS，业余时间写了一个极其简单的登录界面

（不得不说，地平线4的画质实在太棒，随便截了一张当界面背景）

界面效果

实现代码：

HTML部分：

<!DOCTYPE html><html><head><meta charset=\"UTF-8\" /><title>请登录</title><link rel=\"stylesheet\" href=\"登录界面-1.css\" type=\"text/css\" /><link rel=\"stylesheet\" href=\"./css/font-awesome.css\" type=\"text/css\" /><script src=\"登录界面-1.js\"></script></head><body><div id=\"Login-box\"><h2 style=\"color: #fff;\">请登录</h2><div class=\"form\"><form name=\"Form\" onsubmit=\"return validateForm()\" method=\"POST\"><div class=\"item\"><i class=\"fa fa-user-circle-o\" aria-hidden=\"true\"></i><input type=\"text\" placeholder=\"Username\" name=\"user\" /></div><div class=\"item\"><i class=\"fa fa-key\" aria-hidden=\"true\"></i><input type=\"password\" placeholder=\"Password\" name=\"key\" /></div><button type=\"submit\">Login</button></form></div><div id=\"Register\"><pre><a href=\"C:\\Users\\17229\\Documents\\NJUPT实验代码\\AAA前端\\精选界面\\Weather\\Weather.html\">注册</a></pre></div></div></body></html>

CSS部分：

* {margin: 0;padding: 0;}body {background-image: url(\"背景3.jpg\");background-repeat: no-repeat;background-size: 100% auto;}#Login-box {width: 25%;height: auto;margin: 0 auto;margin-top: 15%;padding: 20px 20px 10px 20px;text-align: center;background-color: rgba(0, 0, 0, 0.5);border-radius: 6px;}#Login-box .form .item {margin-top: 13px;}#Login-box .form .item i {font-size: 16px;color: #fff;}#Login-box .form .item input {border: 0;border-bottom: 2px solid white;padding: 5px 10px;background-color: rgba(255, 255, 255, 0);background-color: hsb;}input::-webkit-input-placeholder {color: #999;}#Login-box .form button {margin-top: 15px;width: 150px;height: 30px;font-size: 18px;font-weight: 600;font-family: Arial, Helvetica, sans-serif;background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);border: 0;border-radius: 15px;transition: 0.9s;}#Login-box .form button:hover {transform: scale(1.1) translate3d(0, 0, 0);transition: 0.4s;background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);}#Login-box #Register {font-size: 13px;float: right;bottom: 15px;box-sizing: border-box;position: relative;}a {color: #999;transition: 1s;}a:link {text-decoration: none;}a:hover {color: #fff;transition: 0.4s;}

JavaScript实现少量事件处理

function validateForm() {var x = document.forms[\"Form\"][\"user\"].value;if (x == \"\") {alert(\"请填写用户名！\");return false;}var y = document.forms[\"Form\"][\"key\"].value;if (y == \"\") {alert(\"密码为空！\");return false;}}