说明

之前一直偏重于后端技术研究，最近设计网站感觉前端太菜，遂集中看了下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. SpringMVC05——SSM整合

    整合SSM 需求:熟练掌握MySQL数据库,Spring,JavaWeb及MyBatis知识,简单的前端知识 CREATE DATABASE `ssmbuild`; USE `ssmbuild`; D ...

  2. [转帖]Oracle 如何列出正在运行的定时任务

    https://geek-docs.com/oracle/oracle-questions/569_oracle_how_can_i_list_the_scheduled_jobs_running_i ...

  3. 监控服务器所有磁盘的inode使用情况

    监控服务器所有磁盘的inode使用情况 背景 因为前期数据库开启了审计 但是如果是 DB模式的话 $aud 表的冲突和使用太多了 所以专家建议将审计表放到OS 因为数据库的访问量特别高. 审计的信息又 ...

  4. [转帖] 传参base64时的+号变空格问题

    https://www.cnblogs.com/codelogs/p/17255425.html 原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,非公众号转载保留此声明. 问题发生# 上 ...

  5. 人工智能GPT科普知识的简单总结

    人工智能GPT相关知识的简单总结 背景 工作已经很久, 工作十几年来有过好多波新的技术浪潮. 但是每次都离技术前沿比较远. 最近发现只低头拉车是一个没有前途的行为. 人生很短, 选择很重要, 不仅要低 ...

  6. shell补遗_一个巨简单的保证服务存活的脚本

    Shell补遗 背景 公司一台机器总是会在没有更新补丁的情况下启动失败. 查看所有的配置都没有问题. 但是就是不启动 没办法,准备写一个检查进行启动. 最近写shell很少. 所以总结一下. 思路 判 ...

  7. [转帖]美国出口管制条例（EAR）简介

    https://zhuanlan.zhihu.com/p/87962305 第一节.美国出口管制法律体系 下述一系列法律.法规及规则,构成美国完整的出口管理制度,是美国各相关执法部门执法的主要法律依据 ...

  8. [译]深入了解现代web浏览器（三）

    本文是根据Mariko Kosaka在谷歌开发者网站上的系列文章https://developer.chrome.com/blog/inside-browser-part3/ 翻译而来,共有四篇,该篇 ...

  9. 在K8S中，Pod亲和性概念是什么？

    在Kubernetes(简称K8S)中,Pod亲和性和反亲和性(Affinity and Anti-Affinity)是集群调度策略的重要组成部分,它们用于控制Pod如何与节点或其他Pod相对应地放置 ...

  10. centos离线安装chrony

    环境 CentOS Linux release 7.9.2009 (Core) 工具 chrony-2.2.1.tar.gz 下载地址:https://download.tuxfamily.org/c ...