说明

之前一直偏重于后端技术研究，最近设计网站感觉前端太菜，遂集中看了下CSS的内容。后续我会发表一些前端实战的一些例子，给自己记录的同时希望也能分享给大家。

实现效果

主要知识点

  • DIV屏幕垂直居中（自动管理宽度和高度）
  • input标签修饰（padding和focus样式）
  • DIV边框阴影和圆角效果（利用：box-shadow）
  • 如何让label标签垂直右对齐（inline-block）
  • 如何调整line-height使得块级元素不会乱动

源码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>登录</title>

    <style type="text/css">

      body,

      html {

        width: 100%;

        height: 100%;

        font: 14px/1.5 "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro",

          "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial",

          sans-serif;

        background-color: #a08570;

        color: #333;

      }

      .login-body {

        width: 500px;

        margin: auto;

        background-color: #fff;

        padding: 20px;

        text-align: center;

        position: absolute;

        top: 0;

        left: 0;

        bottom: 0;

        right: 0;

        height: 300px;

        box-shadow: rgba(0, 0, 0, 0.05) 30px 30px 5px 2px;

        background: rgb(255, 255, 255);

        border-radius: 5px;

      }

      .form-item {

        padding: 10px 20px 10px 0;

        display: block;

        margin: 5px 0;

      }

      .form-item label {

        display: inline-block;

        text-align: right;

        width: 100px;

        line-height: 1.8em;

      }

      .form-item input {

        padding: 5px;

        line-height: 1.6em;

        margin-left: 15px;

        border-radius: 5px;

        border: 1px solid rgb(209, 209, 209);

      }

      input[type="text"]:focus {

        outline: 1px solid #84bc3c;

      }

      .btn {

        display: inline-block;

        margin-bottom: 0;

        font-weight: 400;

        text-align: center;

        white-space: nowrap;

        vertical-align: middle;

        cursor: pointer;

        background-image: none;

        border: 1px solid transparent;

        padding: 6px 12px;

        font-size: 14px;

        line-height: 1.42857143;

        border-radius: 4px;

      }

      .btn-primary {

        background-color: #3c8dbc;

        border-color: #367fa9;

        color: #fff;

      }

    </style>

  </head>

  <body>

    <div class="login-body">

      <form action="#">

        <div class="title">

          <h1>Login</h1>

        </div>

        <div class="form-item">

          <label for="username">用户名：</label>

          <input type="text" id="username" name="username" />

        </div>

        <div class="form-item">

          <label for="password">密码：</label>

          <input type="text" id="password" name="password" />

        </div>

        <div class="form-item">

          <button type="submit" id="submit" class="btn btn-primary">

            登录

          </button>

        </div>

      </form>

    </div>

  </body>

</html>

HTML+CSS设计一个朴实无华的登录页的更多相关文章

  1. CSS设计一个三列布局的页面

    探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...

  2. 利用HTML和CSS设计一个静态的“小米商城官网首页”

    一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...

  3. No.7 - 使用 animate.css 实现一个优雅的登录框

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  4. spring security之 默认登录页源码跟踪

    spring security之 默认登录页源码跟踪 ​ 2021年的最后2个月,立个flag,要把Spring Security和Spring Security OAuth2的应用及主流程源码研究透 ...

  5. winform设计一个登录界面和修改密码的界面-自动切换窗体（问题[已解] 望一起讨论）(技术改变世界-cnblog)

    http://www.cnblogs.com/IAmBetter/archive/2012/01/14/2322156.html winform设计一个登录界面和修改密码的界面-自动切换窗体(问题[已 ...

  6. 少量代码设计一个登录界面（二） – .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 同上篇文章<少量代码设计一 ...

  7. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

  8. vue 根据接口返回的状态码判断用户登录状态并跳转登录页，登录后回到上一个页面（http拦截器）

    背景:后台接口返回code==501表示用户是未登录状态,需要登录才可访问: 通过http拦截做路由跳转 第一步:src目录下新建http.js文件,内容如下: import Axios from ' ...

  9. webview之如何设计一个优雅健壮的Android WebView？（下）(转)

    转载:https://iluhcm.com/2018/02/27/design-an-elegant-and-powerful-android-webview-part-two/ (这篇文章写得有点晚 ...

  10. webview之如何设计一个优雅健壮的Android WebView？（上）(转)

    转接:https://iluhcm.com/2017/12/10/design-an-elegant-and-powerful-android-webview-part-one/ 前言 Android ...

随机推荐

  1. .NET技术面试题系列(2) -sql server数据库优化规范

    1.数据库优化规范 a.索引 每个表格都要求建立主键,主键上不一定需要强制建立聚集索引. 聚集索引,表中存储的数据按照索引的顺序存储,即逻辑顺序决定了表中相应行的物理顺序,因此聚集索引的字段值应是不会 ...

  2. [转帖]shell编程之循环语句

    目录 一.循环语句 for循环 for语句的结构 嵌套循环 while语句的结构 while语句应用示例 until语句的结构 until语句示例 二.跳出循环 continue跳出循环 break跳 ...

  3. Nginx双层域名时 iframe嵌入/跳转页面的处理过程

    Nginx双层域名时 iframe嵌入/跳转页面的处理过程 背景 两年前在上一家公司内遇到一个Nginx的问题 当时的场景是 双层nginx代理时(一层域名侧, 一层拆分微服务的网关层) 程序里面会打 ...

  4. [转帖]神秘的backlog参数与TCP连接队列

    https://www.cnblogs.com/codelogs/p/16060820.html 简介# 这要从一次压测项目说起,那是我们公司的系统与另几家同行公司的系统做性能比拼,性能数据会直接影响 ...

  5. [转贴]汉字编码：GB2312, GBK, GB18030, Big5

    汉字编码:GB2312, GBK, GB18030, Big5 https://www.cnblogs.com/malecrab/p/5300497.html 前一篇博文:ANSI是什么编码?中有这样 ...

  6. 任意文件下载包含https的图片

    使用a标签进行下载 <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ. ...

  7. [LeetCode刷题记录]113 路径总和 II

    题目描述 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 说明: 叶子节点是指没有子节点的节点. 难度 中等 题解 采用深度搜索优先,遍历每条从根节点到叶子节点的 ...

  8. C# 使用字典将枚举转换为String

    枚举 public enum ColorType { Red = 10, Blue = 20, Green = 30, Yellow = 40, } String var A1 = "AAA ...

  9. github 2fa中国认证及TOTP App

    Because of your contributions on GitHub, two-factor authentication will be required for your account ...

  10. 领域知识图谱的医生推荐系统：利用BERT+CRF+BiLSTM的医疗实体识别，建立医学知识图谱，建立知识问答系统

    领域知识图谱的医生推荐系统:利用BERT+CRF+BiLSTM的医疗实体识别,建立医学知识图谱,建立知识问答系统 本项目主要实现了疾病自诊和医生推荐两个功能并构建了医生服务指标评价体系.疾病自诊主要通 ...