黑客登录界面科幻黑色主题网页模板表单验证代码

最新推荐文章于 2025-10-24 16:58:01 发布

原创

最新推荐文章于 2025-10-24 16:58:01 发布 · 3.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

本文提供了一款黑客登录界面的科幻黑色主题网页模板，包括HTML代码实现，具备表单验证功能。

黑客登录界面科幻黑色主题网页模板表单验证代码

效果：

在这里插入图片描述

html代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Index</title>
		<style type="text/css">
			label {
   
   
				cursor: pointer;
				color: white;
			}

			* {
   
   
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			#Total {
   
   
				box-shadow: 2px 2px 10px 1px #00fffd;
				background: black;
				opacity: 0.9;
				width: 40%;
				min-height: 800px;
				margin: 0 auto;
				border-radius: 10px;
				overflow: hidden;
				border-left: 0.5px solid #00fffd;
				border-right: 0.5px solid #00fffd;
				border-bottom: 0.5px solid #00fffd;
			}

			#Total #Title {
   
   
				background: #00fffd;
				color: white;
				width: 100%;
				letter-spacing: 5px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 20px;
				font-weight: bold;
			}

			#Total .item,
			#Total .item_ {
   
   
				width: 90%;
				margin: 10px auto;
				height: 25px;
				line-height: 25px;
				font-size: 18px;
				font-weight: bold;
				position: relative;
			}

			#Total .item.item,
			#Total .item_.item {
   
   
				margin-top: 20px;
			}

			#Total .item .important,
			#Total .item_ .important {
   
   
				color: #6385d1;
			}

			#Total .item input,
			#Total .item_ input {
   
   
				position: absolute;
				width: 60%;
				height: 40px;
				top: 50%;
				left: 20%;
				margin-top: -20px;
				font-size: 15px;
				outline: none;
				border: 1px solid rgba(0, 0, 0, 0.2);
				border-radius: 5px;
				transition: box-shadow .5s