最终效果图：

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. 2023 Gartner RPA魔力象限报告解读：国产厂商“破纪录”跃升意味着什么？

    2023 Gartner RPA魔力象限报告解读:象限跃升彰显国产RPA厂商实力 2023 Gartner RPA魔力象限报告四大行业趋势,国产RPA厂商已在践行 文/王吉伟 8月3日,全球著名咨询调 ...

  2. ANDROID : NEW IDEA

    •前言 学习了 Android 开发后,小脑袋瓜中时不时会蹦跶出一些想法: 这些想法大都是我现在实现不了的,所以就需要记录一下,等学到相关知识时,在着手解决. •NEW IDEA 1 将一款 APP( ...

  3. 使用POI操作Excel时new XSSFWorkbook ()报错java.lang.NoSuchMethodError解决方案

    使用最新的POI3.11时,在运行 Workbook  workBook = new XSSFWorkbook ();这段代码时出现错误: java.lang.NoSuchMethodError: j ...

  4. 关于easyExcel导出文字合并居中和服务器导出失败踩了一天的坑

    参考:https://blog.csdn.net/hanyi_/article/details/118117484,https://blog.csdn.net/sunyuhua_keyboard/ar ...

  5. 大年学习linux（第三节---用户管理）

    三.用户管理 用户和用户组操作命令 ld Finger Pwck 检查/etc/passwd配置文件内的信息与实际主文件夹是否存在,还可比较/etc/passwd和/etc/shadow的信息是否一致 ...

  6. web前端工程化合集

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.Git 1. git 和 svn 的区别 git 和 svn 最大的区别在于 git 是分布式的,而 svn 是集中式的.因此我们不能 ...

  7. drools中no-loop和lock-on-active的区别

    一.背景 在我们编写drools规则的过程中,可能会发生死循环,那么该怎么解决呢?如果想某一个规则只执行一次,即别的规则导致该规则重新执行,也不需要执行,那么该怎么解决呢? 二.解决方案 针对以上问题 ...

  8. Oracle日期加减

    1.直接加减数字 SELECT SYSDATE "当前时间", SYSDATE + 1 "加一天", SYSDATE + (1 / 24) "加一小时 ...

  9. MybatisPlus的association 属性及案例

    <select id="getMatUnitList" resultMap="matUnitVOMap"> SELECT a.CODE, a.min ...

  10. KingbaseES数据库导入数据invalid byte sequence for encoding

    一.适用版本: KingbaseES数据库所有版本. 二.问题现象: 使用备份的数据进行还原,还原过程中发生异常. 日志信息: sys_restore: connecting to database ...