说明

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

    golang 简介 来历 很久以前,有一个IT公司,这公司有个传统,允许员工拥有20%自由时间来开发实验性项目.在2007的某一天,公司的几个大牛,正在用c++开发一些比较繁琐但是核心的工作,主要包括 ...

  2. 百度网盘(百度云)SVIP超级会员共享账号每日更新（2023.12.27）

    一.百度网盘SVIP超级会员共享账号 可能很多人不懂这个共享账号是什么意思,小编在这里给大家做一下解答. 我们多知道百度网盘很大的用处就是类似U盘,不同的人把文件上传到百度网盘,别人可以直接下载,避免 ...

  3. tikv-ctl的简单学习

    tikv-ctl的简单学习 摘要 最近在学习使用 tidb. 有一个场景,单独使用了tikv作为键值对的数据库. 但是比较不幸.总是出现宕机的情况 因为这个环境是单独使用tikv 二进制进行安装的 没 ...

  4. 编译打包rabbitmq然后一键部署的简单方法

    摘要 之前总结过一版,但是感觉不太全面 想着本次能够将使用中遇到的问题总结一下. 所以本次是第二版 介质下载 rabbitmq 不区分介质的打包文件 rabbitmq-server-generic-u ...

  5. expect 的简单学习与使用

    背景 最近工作中总有很多重复的事项. 比较繁琐,想着能够简单一点是一点的角度 准备采用expect来建华部分工作量. 其实还可以使用其他方式来处理. 但是感觉expect还是能够简单明了的. 所以暂时 ...

  6. Flutter开发桌面应用的一些探索

    引言 在移动应用开发领域,Flutter已经赢得了广泛的认可和采用,成为了跨平台移动应用开发的瑞士军刀.然而,Flutter的魅力并不仅限于移动平台,它还可以用于开发桌面应用程序,为开发人员提供了一种 ...

  7. Ant Design Vue中Table的选中详解

    <template> <a-table :columns="columns" :data-source="data" :row-selecti ...

  8. AppCan 打包无限次下载解决方案

    1.下载AppCan 官网上打包好的文件apk文件 2.将apk文件放在指定的服务器文件内,谇文件发布到IIS,一般都会用已发布发的网站上面随便一个目录就可以了. 3.MIME类型中填写apk的MIM ...

  9. 每日一库：使用Viper处理Go应用程序的配置

    在开发Go应用程序时,处理配置是一个常见的需求.配置可能来自于配置文件.环境变量.命令行参数等等.Viper是一个强大的库,可以帮助我们处理这些配置. 什么是Viper? Viper是一个应用程序配置 ...

  10. 从零开始配置vim(28)——DAP 配置

    首先给大家说一声抱歉,前段时间一直在忙换工作的事,包括但不限于交接.背面试题准备面试.好在最终找到了工作,也顺利入职了.期间也有朋友在催更,在这里我对关注本系列的朋友表示感谢.多的就不说了,我们正式进 ...