采用CSS3设计的登陆界面

最新推荐文章于 2021-08-06 20:02:05 发布

xuyongsky1234

最新推荐文章于 2021-08-06 20:02:05 发布

阅读量1.1k

点赞数

分类专栏： HTML5+CSS3学习随记 web前端-学习随记文章标签： css3 login box-shadow text-shadow 界面

本文链接：https://blog.youkuaiyun.com/u012688910/article/details/41344243

版权

web前端-学习随记同时被 2 个专栏收录

9 篇文章

订阅专栏

HTML5+CSS3学习随记

4 篇文章

订阅专栏

这是一个利用CSS3特性，如box-shadow和text-shadow，设计的登录界面示例。该界面是作者学习HTML5和CSS3时的实践作品，旨在展示CSS3在界面设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

body部分内容：

<body>
		<form id="form_id" name="form_id" method="get" action="http://baidu.com" onsubmit="return checkUser()">
			<div id="loginForm">
				<div id="loginTitle">LOGIN</div>
				<div id="loginContent">
					<div id="user_info">
						<label>Username:</label><img src="./user.png" /><input id="login_username" type="text" name="login_username" maxlength="32" placeholder="Username" />
						<br />
						<label>Password:</label><img src="./pwd.png" /><input id="login_password" type="password" name="login_password" maxlength="32" placeholder="Password" />
					</div>
					<div id="user_help">
						<input id="login_save" type="checkbox" /><label>Remember me</label>     |     <a href="#" target="_blank">Forgot password?</a>
					</div>
				</div>
				<div id="loginButton">
					<div id="register"><input id="register_button" type="button" name="regButton" value="register" onclick="register()" /></div>
					<div id="login"><input id="login_button" type="submit" name="login_button" value="login" /></div>
				</div>
			</div>
		</form>
	</body>

style部分内容：

<style>
			html,body,div{
				margin:0;
				padding:0;
				font-size:100%;
			}
			html{
				background:url('./bgeight.jpg') no-repeat;
				background-size:cover;
			}
			#loginForm{
				height:200px;
				width:350px;
				position:absolute;
				top:50%;
				left:50%;
				margin:-100px 0 0 -175px;
				box-shadow:0px 0px 25px 12px #c0c0c0;
				border:6px solid;
				border-color:#c0c0c0;
				border-radius:12px;
			}
			#loginTitle{
				height:50px;
				width:100%;
				font-family:blazed,Kunstler Script"New York",Georgia;
				font-weight:bold;
				font-style:oblique;
				font-size:2em;
				text-align:center;
				line-height:50px;
				//-webkit-text-stroke:10px black;
				color:white;
				text-shadow:1px 1px 0 rgba(107,223,248,0.8),2px 2px 0 rgba(107,223,248,0.8),3px 3px 0 rgba(107,223,248,0.8),4px 4px 0 rgba(107,223,248,0.8),5px 5px 0 rgba(107,223,248,0.8);
			}
			#loginContent{
				height:110px;
				width:100%;
				position:relative;
			}
			#loginButton{
				height:40px;
				width:100%;
			}
			#register{
				height:40px;
				width:175px;
				float:left;
			}
			#login{
				height:40px;
				width:175px;
				float:left;
			}
			#register_button{
				height:40px;
				width:175px;
				background:none;
				border-radius:6px;
				border:1px solid;
				border-color:#808080;
				box-shadow:0px 0px 10px 0px #c0c0c0 inset;
				font-weight:bold;
			}
			#login_button{
				height:40px;
				width:175px;
				background:none;
				border-radius:6px;
				border:1px solid;
				border-color:#808080;
				box-shadow:0px 0px 10px 0px #c0c0c0 inset;
				font-weight:bold;
			}
			#user_info{
				position:absolute;
				height:80px;
				width:250px;
				left:75px;
				top:0px;
			}
			#user_help{
				position:absolute;
				height:30px;
				width:230px;
				left:60px;
				top:80px;
			}
			label{
				font-weight:bold;
				width:20px;
			}
			#user_info input{
				background:none;
				width:175px;
			}
			input[type=checkbox]{
				vertical-align:middle;
				margin-top:0;
			}
			#user_help input,#user_help label,#user_help a{
				line-height:30px;
				font-size:12px;
			}
			img{
				height:20px;
				width:20px;
				display:block;
				float:left;
			}
			#user_info label{
				display:block;
			}
		</style>

简单的登陆名与密码判断：

<script>
			function checkUser(){
				var Username=document.getElementById('login_username').value;
				var Password=document.getElementById('login_password').value;
				
				if(Username==""||Username==null){
					alert("The Username can't be null");
					return false;
				}
				if(Password==""||Password==null){
					alert("The Password can't be null");
					return false;
				}
				else
				{
					return true;
				}
			}
		</script>