Html/Css简单的登录页面设计

1.效果图如下

Html/Css简单的登录页面设计_第1张图片

2.涉及到的知识点

代码实现如下:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  body{
  background:url("images/0.jpg");
  background-repeat: no-repeat;
  background-size:100% 100%;
  }
     .box{
	 width:800px;
	 height:400px;
	 border:2px solid #66cc99;
	 border-right-color:#ffffff;
	 border-bottom-color:#ffffff;
	 border-left-color:#ffffff;
	 margin: 100px auto;
	 background:#66cccc;
	 border-radius:15px;
	 position:relative;
	 background:url("images/01.jpg");
     background-repeat: no-repeat;
     background-size:100% 100%;
	 }	
	 .box h1{
	 text-align:center;
	 color:gray;
	 text-shadow:2px 2px 2px #ccffff;
	 }
	 .box .box1{
	 width:300px;
	 height:200px;
	 border:2px solid gray;
	 border-radius:15px;
	 position:absolute;
	 left: 0;
	 right: 0;
	 top: 0;
	 bottom: 0;
	 margin: auto;
	 Background:rgba(0,0,0,0.3);
	 }
	 .box input{
	 width:200px;
	 height:35px;
	 }
	 .a{
	 margin:30px 10px 0px 10px ;
	 }
	 .b{
	 margin:20px 10px 20px 10px;
	 }
	 button{
	 width:207px;
	 height:35px;
	 font-size:14px;
	 font-weight:blod;
	 color:#ffffff;
	 }
	 p{
	 text-align:center;
	 color:#ffffff;
     font-size:14px;
	 font-weight:blod;
	 text-shadow:2px 2px 2px #33ff66;
	 }
	 a{
	 text-decoration:none;
	 color:black;
	 }
	 .a,.b,button{
	 Background:rgba(0,0,0,0.5);
	 }
	 input:focus{
	 background-color:#ffffff;
	 }
</style>
 </head>
 <body>
  <div id="" class="box">
	<h1>Welcome to VMS</h1>
	<div id="" class="box1">
	<center>
	<input class="a" type="text"  placeholder="账号"/>
	<input class="b" type="password" placeholder="密码"/><br>
	<a href="https://www.autohome.com.cn/beijing/" target="_blank"><button>登录 </button></a><font size="" color=""></font>
	</center>
   </div>
  </div>
  <p>&copy;版权--JAC:Dream<p>
 </body>
</html>

主要用到的知识点如下:
首先,用到了盒子相关的知识,两个盒子,
其次,用到了定位相关的知识,
然后,用到了文本框,密码框相关的知识,
然后,用到了边框处理优化相关的知识
最后,用到背景图片,按钮,透明度相关的知识

你可能感兴趣的:(html,css,css3)