最终效果图：

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. Codeforces Round 170 (Div. 1)A. Learning Languages并查集

    如果两个人会的语言中有共同语言那么他们之间就可以交流,并且如果a和b可以交流,b和c可以交流,那么a和c也可以交流,具有传递性,就容易联想到并查集,我们将人和语言看成元素,一个人会几种语言的话,就将这 ...

  2. 基于python的PC电脑报警系统

    一 基本概念 1.这里实现了电脑的安全报警系统,假如有人不小心动了你的电脑,立即触发报警系统.报警是通过pc机的声卡播放报警信号. 2.该的基础是对python的pyxhook和wave库的合理应用. ...

  3. 后端基础PHP-PHP简介及基本函数

    后端基础PHP-PHP简介及基本函数 1.PHP简单介绍 2.PHP基本语法 一.PHP简单介绍 PHP(超文本预处理器),是一种通用的开源脚本语言,标准的后端语言 比较常见的后端语言,ASP|ASP ...

  4. MapStructPlus 1.4.0 发布，体积更轻量！性能更强！

    MapStruct Plus 是 MapStruct 的增强工具,在 Mapstruct 的基础上,实现了自动生成 Mapper 接口的功能,并强化了部分功能,使 Java 类型转换更加便捷.优雅. ...

  5. 使用apache发布网站

    只要建立网站和修改apache的配置文件即可 记事本打开apache\conf下的httpd.conf 用搜索找到DocumentRoot DocumentRoot是设置对外发布的网站目录的命令 将目 ...

  6. 03.Android之View原理问题

    目录介绍 3.0.0.1 View的绘制需要经过哪些过程?有哪些常用回调方法?View的绘制流程的详细流程是怎样的? 3.0.0.2 View绘制流程,当一个TextView的实例调用setText( ...

  7. 记录--a标签跳转新地址无法访问，但手动输入新地址可以访问

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 问题描述 最近遇到一个有意思的问题,项目中有一个地方,点击需要跳转到一个新的域名地址 笔者使用a标签做跳转,跳是跳过去了,可是跳过去以后, ...

  8. 记录--前端如何优雅导出多表头xlsx

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 xlsx导出是比较前后端开发过程中都比较常见的一个功能.但传统的二维表格可能很难能满足我们对业务的需求,因为当数据的维度和层次比较多 ...

  9. 这里有你不得不了解的Java 11版本特性说明

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...

  10. ChatGPT写作提示词指令大全

    1 .用ChatGPT写影评 指令:你是一个自媒体人,同时也是一个专业的影评人.最近熬夜看完了韩剧黑暗荣耀第一季和第二季,忍不住想在公众号分享给粉丝们,请写一篇1000字左右的自媒体文章,并且加上一个 ...