关于web界面设计小练习

最新推荐文章于 2024-05-21 23:21:19 发布

疯掉就疯掉吧

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量126

点赞数

分类专栏： web前端开发文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_62512326/article/details/127620017

版权

web前端开发专栏收录该内容

25 篇文章 3 订阅

订阅专栏

文章目录

一.登陆界面
- 源码
二.QQ登陆界面
- 源码

一.登陆界面

在这里插入图片描述

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<title></title>
	</head>
	<body>
		<div id="login_box">
			<form action="#" method="POST" id="login_form">
			<label>
				<img src="img/user.png"/>
				<input type="text" id="username" name="username" placeholder="请输入用户名"/>
			</label>
			<label>
				<img src="img/pass.png"/>
				<input type="password" id="userpassword" name="userpassword" placeholder="请输入密码"/>
			</label>
			<p>
				<input type="submit" value="登录"/>
				<input type="reset" value="重置"/>
			</p>
			</form>
		</div>
	</body>
</html>

/*通用设置*/
*{
	margin: 0;
	padding: 0;
}
ul,li{
	list-style-type:none ;
	
}
a{
	color: #000;
	text-decoration: none;
}

/*登陆样式*/
#login_box{
	width: 539px;
	height: 416px;
	background: url(../img/bg.png) no-repeat left center ;
	margin: 0 auto;
	position: relative;
}
#login_box form{
	position: absolute;
	top:130px;
	left: 135px;
}
#login_box form label{
	display: inline-block;
	width: 270px;
	height: 38px;
	background-color: #eae7e7;
	margin-bottom: 30px;
}
#login_box form label img{
	display:inline-block;
	width: 40px;
	height: 38px;
	vertical-align: middle;
}
#login_box form label input{
	display: inline-block;
	width: 223px;
	height: 36px;
	border: 1px solid #eae7e7;
	
}
#login_box form p input{
	display: inline-block;
	width: 80px;
	height: 35px;
	margin-left: 40px;
	border-radius: 15px;
	background-color: #fed475;
}

在这里插入图片描述

二.QQ登陆界面

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/QQ.css"/>
		<title></title>
	</head>
	<body>
		<div id="bigfirst">
		   <form>
		    <div id="second1">
		    <img src="img/QQsmall1.png"/>
		    </div>
		    <div id="second2">
		     <div id="third1">
		      <img src="img/head.png"/>
		     </div>
		     <div id="third2">
		      <p><label>账号:<input type="text"></label></p >
		      <p><label>密码:<input type="text"></label></p >
		     </div>
		     <div id="third3">
		      <input type="button" value="安全登录" />
		     </div>
		    </div>
		   </form>
		  </div>
		
	</body>
</html>

*{
 margin: 0;
 padding: 0;
}
ul,li{
 list-style-type: none;
}
a{
 text-decoration: none;
}

#bigfirst{
 width: 400px;
 height: 350px;
 margin: auto;
 margin-top: 30px;
}
#second1{
 width: 400px;
 height: 130px;
 background-color: #2ab0f7;
 background-size: cover;
}
#second1 img{
 margin-left: 115px;
 margin-top: 22px;
}
#second2{
 width: 400px;
 height: 210px;
 background-color: #ebf2f9;
}
#third1{
 width: 150px;
 height: 120px;
 background-size: cover;
 float: left;
}

#third1 img{
 margin-left: 30px;
 margin-top: 30px;
}
#third2{
 width: 250px;
 height: 120px;
 float: right;
 margin-top: 30px;
 line-height: 40px;
}
#third2 input{
 width: 150px;
 height: 21px;
 margin-left: 10px;
 background-color: #ffffff;
}
#third3{
 width: 400px;
 height: 40px;
}
#third3 input{
 background-color: #2ab0f7;
 border: none;
 color: white;
 width: 220px;
 height: 34px;
 margin-left: 150px;
 border-radius: 5px;
}

在这里插入图片描述