最终效果图：

html文件：

<!--

 * @Qusetion:

 * @Author: 一届书生

 * @Date: 2020-04-07 08:17:36

 * @LastEditTime: 2020-04-07 10:51:21

 -->

<html>

  <head>

    <meta charset="UTF-8" />

    <link rel="stylesheet" href="style.css" />

    <title>login</title>

  </head>

  <body>

    <div class="login-container">

      <div class="left-container">

        <div class="title"><span>登录页面</span></div>

        <div class="input-container">

          <input type="text" name="username" placeholder="用户名" />

          <input type="password" name="password" placeholder="密码" />

        </div>

        <div class="button-container">

          <button>忘记密码</button>

          <!-- </div> -->

          <!-- <div class="button2-container"> -->

          <button>Login</button>

        </div>

      </div>

      <div class="right-container">

        <div class="regist-container">

          <span class="regist">注册</span>

        </div>

      </div>

    </div>

  </body>

</html>

　　

* {

  padding: 0;

  margin: 0;

}

body {

  /* background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);

   */

  /* background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); */

  background-image: linear-gradient(

    to left top,

    #a7cef6 0%,

    rgb(51 105 232) 100%

  );

}

body .login-container {

  width: 450px;

  height: 300px;

  outline: 0;

  margin: 13% 35%;

  /* margin-top: 13%; */

  /* background-color: #fff; */

  border-radius: 10px;

  box-shadow: 0 1px 35px 0 #264f73;

}

body .login-container .left-container {

  width: 68%;

  height: 100%;

  display: inline-block;

  border-top-left-radius: 15px;

  border-bottom-left-radius: 15px;

  background-image: linear-gradient(

    to left top,

    #a7cef6 0%,

    rgb(51 105 232) 100%

  );

}

body .login-container .left-container .title {

  color: white;

  font-size: 18px;

  font-weight: 700;

  margin: 7% 8%;

}

body .login-container .left-container .title span {

  border-bottom: 3px solid #fff;

}

body .login-container .left-container .input-container {

  margin: 20% 5%;

  /* padding: 10px 20px; */

}

body .login-container .left-container .input-container input {

  width: 95%;

  margin-top: 10px;

  border: 0;

  transition: 0.2s;

  background: none;

  outline: 0;

  display: block;

  color: #fff;

  font-size: 15px;

  border: 2px solid #dfe6ec;

  border-width: 2px;

  border-radius: 3px;

  line-height: 30px;

  padding: 0 0 0 10px;

}

body .login-container .left-container .input-container input:hover {

  border: 2px solid #fff;

}

::-webkit-input-placeholder {

  color: aliceblue;

}

body .login-container .left-container .button-container button {

  background: none;

  border: 0;

  outline: 0;

  background-color: #fff;

  border-radius: 3px;

  font-size: 15px;

  font-weight: 600;

  color: #3b6f9c;

  width: 80px;

  height: 30px;

  margin-left: 50px;

  transition: 0.2s;

  display: inline;

}

body .login-container .left-container .button-container button:hover {

  background-color: rgb(81, 139, 245);

  color: #fff;

}

body .login-container .right-container {

  display: inline-block;

  background-color: none;

  height: calc(100%-120px);

  width: 130px;

  vertical-align: top;

  padding: 60px 0;

}

body .login-container .right-container .regist-container {

  text-align: center;

  color: #fff;

  font-size: 16px;

  font-weight: 500;

}

body .login-container .right-container .regist-container span {

  border-bottom: 2px solid #fff;

}

　　

CSS：注册页面的编写练习的更多相关文章

  1. CSS注册页面案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HTML&CSS基础学习笔记1.22-简单的注册页面

    一个简单的注册页面 表单提交是前后端数据交互的一种方式. 代码区是一个注册页面,其中包含了以下标签:<form>.<table>.<input>.<butto ...

  3. 微信小程序相关二、css介绍，菜单制作，表单相关，京东注册页面

    一.第二天上午 1.1上午因为有其他的课所以没有去这个课,不过下午看复习的时候的概括,讲了DTD,语法特性,css选择器以及权重,还有一些简单的样式 1.2 DTD Docuement Type 声明 ...

  4. HTML+CSS+JS设计注册页面

    HTML实战--设计一个个人信息填写界面 应用的技术:HTML+CSS+JS CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用 效果图: 代码: <!DOCTYPE html&g ...

  5. HTML&CSS——网站注册页面

    1.表单标签 所有需要提交到服务器端的表单项必须使用<form></form>括起来! form 标签属性:  action,整个表单提交的位置(可以是一个页面,也可以是一个后 ...

  6. 注册页面css版本

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 注册页面-使用form模块搭建

    基于Django的form模块,快速的搭建注册页面,每个限制条件,都放在form模块里面,不单独对每一项编写标签,使用模版的 for 循环来渲染. 首先设置form模块 在blogs模块下创建一个bl ...

  8. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  9. 使用jQuery开发一个带有密码强度检验的超酷注册页面

    在今天的jQuery教程中,我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面,希望大家喜欢! 相关的插件和类库 complexify - 一个密码强度检验jQu ...

  10. 如何在nopcommerce3.3注册页面添加密码强度检查仪？

    我刚刚完成了nopCommerce注册页面的密码强度检查仪,因为我觉得在电子商务交易平台,安全问题是非常重要的.在注册页面有必要添加一个密码强度检测仪,以便通知用户他们的密码是否足够强大.今天,大多数 ...

随机推荐

  1. Redis单线程为什么如此之快

    一.概述 Redis的高并发和快简单可以归结为一下几点: 1.Redis是基于内存的: 2.Redis是单线程的: 3.Redis使用多路复用技术. 4.高效的数据结构 但具体怎么做的呢,下面来详细看 ...

  2. 调试分析 Linux 0.00 多任务切换

    当执行完 system_interrupt 函数,执行 153 行 iret 时,记录栈的变化情况. 任务0在刚进入system_interrupt函数时(调用中断int 0x80处理程序),栈空间为 ...

  3. 4- 信号量& 互斥量

    信号量,计数值 问题:  还是那个AB任务互斥调度的问题,B等A执行完毕的过程中,判断标志位会耗费CPU资源 利用信号量,当没有信号的时候,不参与调度 计数信号量(不能用来传输数据) static S ...

  4. 发现这个ip有bt下载，所以改路由，让其访问到一个不存在的ip上 route add

    管理员权限cmd 发现这个ip有bt下载,所以改路由,让其访问到一个不存在的ip上 route add -p 195.154.181.225 mask 255.255.255.255 127.0.0. ...

  5. vue 动态加载css，改变网站皮肤模式

    Vue.mixin({ created () { require('view-design/dist/styles/iview.css') } }) 参考资料:https://blog.csdn.ne ...

  6. C#泛型的类型参数约束

    常用约束 约束告知编译器类型参数必须具备的功能. 在没有任何约束的情况下,类型参数可以是任何类型. 编译器只能假定 System.Object 的成员,它是任何 .NET 类型的最终基类. 如果客户端 ...

  7. Python根据时间命名并创建文件源码

    自己写的,产品中验证ok的代码,直接上实例: import time def file_create_func(): loca = time.strftime('%Y-%m-%d-%H-%M-%S') ...

  8. 脑电测量ADS1299芯片调试总结

    问题一:读出来ID不对? 笔者经过查阅官网资料和测试,发现这个一般是上电或者启动次序不对引起的. 特别是上电次序不同会导致这类问题. 问题二:内部时钟和外部时钟的选择是什么? 就拿内部时钟来说吧,首先 ...

  9. day22--Java集合05

    Java集合05 11.HashSet课堂练习 11.1课堂练习1 定义一个Employee类,该类包括:private成员属性name,age 要求: 创建3个Employee对象放入HashSet ...

  10. 2023年VR虚拟现实的10个应用行业

    1.医疗保健 现代医疗保健的培训方式离不开VR虚拟现实..由于医疗行业的特殊性,不允许拿大量的病人来练手,但医疗又非常注重实践,一些新手医生就缺乏锻炼的机会,而VR虚拟现实技术很好的解决了这一问题.医 ...