最终效果图：

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. period 发音 per + iod 没有ri音 (per=round od=hod=way)

    period 发音 per + iod 没有ri音 pɪər iə d peri-在周围 + od-=hod-路,引申词义时期,阶段,句号等. per = round period 美: [ˈpɪrɪ ...

  2. 基于stm32H730的解决方案开发之SD卡的读写调试

    一 概述 在嵌入式小系统领域,SD卡存储是一个非常重要的功能.可从难度上,它又是非常难的.因为它涉及到两个大的功能点,一个是文件系统,这个难度非一般.另外一个是sd卡的底层驱动.涉及到的接口多,所以也 ...

  3. SPEAK 510全向麦克风无线蓝牙拾音器产品体验及评测

    产品简介     大家开会的时候,很多人都直接使用手机app了,比如,zoom,腾讯会议等.既方便又快捷.由于手机设备拾音距离有限,也不是针对会议场景做的,所有,在多人会议的时候,问题就出来了.这个时 ...

  4. C++4中cast类型强制转换方式

    static_cast<type_id>(expr) 用于基本类型的转换,也可以将继承关系的对象指针或引用之间进行上下转型,但是在没有运行时类型检查的情况下,不保证类型安全. static ...

  5. 像使用stl一样使用线段树 ——AtCoder Library(转载https://zhuanlan.zhihu.com/p/459579152）

    地址:https://zhuanlan.zhihu.com/p/459579152 我这里翻译一下官方的文档. 首先需要满足几个性质. (注意 ∗ 是个操作,不是单纯的一个乘号) 1)操作满足结合律 ...

  6. 喜讯！瑞云科技被授予“海上扬帆”5G融合应用专委会成员单位

    2022年7月19日,5G应用"海上扬帆"行动计划云启航大会暨"海上扬帆"融合应用专委会成立大会在沪成功举办. 受上海信通院工创中心邀请和信任,深圳市瑞云科技有 ...

  7. 记录--uniapp中生成二维码并展示

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 uniapp生成二维码并展示 1.下载weapp-qrcode.js文件并放在utils文件中链接: https://pan.baidu. ...

  8. FFmpeg开发笔记（七）欧拉系统编译安装FFmpeg

    FFmpeg支持Linux.macOS.Windows.Android等操作系统,其中Linux系列包括Ubuntu.Debian.Mint.CentOS.RHEL.Fedora等分支.FFmpeg官 ...

  9. Topshelf C# 开发 Windows 服务程序最简单的方式

    Topshelf 官方网站: http://topshelf-project.com/ Topshelf 文档地址: https://topshelf.readthedocs.io/en/latest ...

  10. KingbaseES V8R6 集群运维案例--麒麟系统bug导致sys_monitor.sh无法启动集群

    案例说明: 麒麟信安操作系统,在部署了KingbaseES V8R6集群后,sys_monitor.sh在启动集群时,启动数据库服务失败,导致集群无法正常启动.后连接现场分析发现,此环境只要通过ssh ...