说明

之前一直偏重于后端技术研究，最近设计网站感觉前端太菜，遂集中看了下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. 如何部署两个JMS网关，形成双机热备

    大家使用JMS的过程中,可能会留意到,不管是微服务在注册时,还是RemoteClient构造时,所指向的网关都是一个NetAddress数组,之所以网关地址是多个,而不是一个,那是因为网关是一个双击热 ...

  2. Go-数据类型-数字

    Go数字类型 整数 int 类 int(在32机器上为int32,在64位机器上为int64) int8 int16 int32 int64 unit类 uint(在32机器上为uint32,在64位 ...

  3. MySQL 8.2.0部署安装验证

    MySQL 8.2.0部署安装验证 背景 昨天捯饬了半天Oracle23c Free版本发现自己白忙活了. 然后想着继续看一下 MySQL8.2. 看看会不会又继续白忙活 下载与安装 https:// ...

  4. [转帖]Run Grafana behind a reverse proxy

    On this page Introduction Configure NGINX Configure HAProxy Configure IIS Configure Traefik Summary ...

  5. [转帖]TLB缓存是个神马鬼，如何查看TLB miss？

    https://zhuanlan.zhihu.com/p/79607142 介绍TLB之前,我们先来回顾一个操作系统里的基本概念,虚拟内存. 虚拟内存 在用户的视角里,每个进程都有自己独立的地址空间, ...

  6. [转帖]Tomcat maxKeepAliveRequests

    https://www.cnblogs.com/turn2i/p/10480088.html 在写这个问题前,其实我是为了分析项目碰到的一个tcp close wait问题.这个问题就不在这里讲了. ...

  7. [转帖]Prometheus 都可以采集那些指标？-- 常用 Exporter 合集

    Prometheus 可以通过各种 Exporter 来获取很多指标,并且只要符合 Prometheus 规范的都可以获取到,本文汇总一些常用的采集器到这里.  Prometheus Exporter ...

  8. CPU实际频率查看

    cat /sys/devices/system/cpu/cpu3/cpufreq/cpuinfo_cur_freq

  9. [转帖]如何在本地编译安装部署自动化回归测试平台 AREX

    https://zhuanlan.zhihu.com/p/613877597 AREX 官方 QQ 交流群:656108079 本文将详细为大家介绍一下自动化回归测试平台 AREX 以及如何在本地进行 ...

  10. [转贴]一图弄懂ASCII、GB2312、GBK、GB18030编码

    一图弄懂ASCII.GB2312.GBK.GB18030编码 https://blog.csdn.net/LightUpHeaven/article/details/92008630 转载君子不器.  ...