最终效果图：

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. Java面试必考题之线程的生命周期，结合源码，透彻讲解!

    写在开头 在前面的几篇博客里,我们学习了Java的多线程,包括线程的作用.创建方式.重要性等,那么今天我们就要正式踏入线程,去学习更加深层次的知识点了. 第一个需要学的就是线程的生命周期,也可以将之理 ...

  2. moviepy 官方网址

    https://zulko.github.io/moviepy/ Gitee 说我有违规信息 醉了 { title: "moviepy", url: "https://z ...

  3. vid = two 切开 分开 - 两个眼睛 还有看的含义 - 词根

    vid = two 切开 分开 - 两个眼睛 还有看的含义 - 词根 vi = wo acs 构词

  4. JNI中AttachCurrentThread和DetachCurrentThread的问题

    在<Java与CC++交互JNI编程>中有讲过AttachCurrentThread和DetachCurrentThread的使用. 我们知道在jni中我们可以使用pthread或者std ...

  5. 21_显示YUV图片&视频

    一.显示YUV图片 显示 YUV 图片和显示 BMP 图片的大致流程是一样的.显示 BMP 图片我们可以直接获取到 BMP 图片的 surface,然后直接从 surface 创建纹理.显示 YUV ...

  6. 总体最小二乘法（Total Least Squares）拟合直线

    前言 最小二乘法是最小化每个点到直线的垂直误差,由于误差采用的是垂直误差,导致越接近垂直线(平行于\(y\)轴),拟合效果越差,无法拟合垂直线. 通过最小化每个点到直线的距离误差可以解决最小二乘法无法 ...

  7. 三维模型3DTile格式轻量化压缩在移动智能终端应用方面的重要性分析

    三维模型3DTile格式轻量化压缩在移动智能终端应用方面的重要性分析 随着移动智能终端设备的不断发展和普及,如智能手机.平板电脑等,以及5G网络技术的推广应用,使得在这些设备上频繁使用三维地理空间数据 ...

  8. Python glob库的用法

    一.匹配指定文件夹下的所有文件 files = glob.glob("C:\\Users\\liuchunlin2\\Desktop\\测试数据\\*") print(files) ...

  9. 在 SwiftUI 中使用 Metal Shader

    简介 从 iOS 17/macOS 14 开始,SwiftUI 支持使用 Metal shader 来实现一些特效.主要提供三个 View Modifier:colorEffect. distorti ...

  10. Avalonia项目生成银河麒麟操作系统安装包

    1 在项目根目录添加xxx.desktop文件,文件内容: [Desktop Entry] Name=xxx Type=Application Exec=/usr/share/xxx/xxx Icon ...