简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 运用表单功能完成登录会话框页面-2019年3月12日
Blogger Information
Blog 5
fans 0
comment 0
visits 1525
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
运用表单功能完成登录会话框页面-2019年3月12日
战国七雄的博客
Original
454 people have browsed it


实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>登录</title>
	<style type="text/css">
	*{margin: 0;padding: 0;}
	p{margin:0;padding:0;}
	body{
		background: #151515
	}
	div{
		width:400px;
		height:450px;
		margin:200px auto;
		background: rgba(188,185,198,0.4);
		border-radius: 10px;
		text-align: center;
	}
	img{
		width: 80px;
		border-radius: 50%;
		margin-top: 50px;

	}
	input{
		width: 300px;
		height:40px;
		margin-top:15px;
		border-radius: 6px;
		border:none; /*去掉元素自带边框*/
		padding-left: 15px;
	}
	button{
		border:none;
		width:315px;
		height:40px;
		border-radius: 6px;
		background:#D84C29;
		color: #fff;
		margin-top:30px;
		font-size: 16px;
		text-align:center;
		letter-spacing:10px;
	}
	</style>
</head>
<body>
<div>
<img src="http://erp.voopuse.com/uploads/images/af/e1e2d0421583a5847edd4a0b311b4a23054eaa.jpg">
<form action=""  method="">
  <input type="text" name="" placeholder="请输入用户名"><br>
  <input type="password" name="" placeholder="请输入密码"><br>
  <button>登录</button>
  </form>

 </div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 


background(背景图 背景色)  背景色(英文单词 16进制颜色 RGB颜色)

background-position:url(图片地址)

背景色透明度
 background: rgba(129,44,44,0.2);

 background:linear-gradient(方向，其实颜色，终止颜色)

边框
样式：dotted 点线  dashed 虚线  solid 实线  double 2个边框

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！