支持chrome FireFox 和 IE10+，（IE9也能显示，IE9以下不支持）

<style type="text/css">

body{position:relative;}

#login{position:relative;width:500px;margin:0 auto;box-shadow:2px 0px 10px rgba(0,0,0,0.5);border-radius:16px;}

.login-bg{position:absolute;width:1000px;height:190px;left:-250px;right:-250px;top:70px;background:#76ceff;z-index:-1;}

.login-head{box-sizing:border-box;width:100%;height:35px;border:1px solid #0f80c2;border-top-left-radius:16px;border-top-right-radius:16px;z-index:1;}

.login-head-in{box-sizing:border-box;width:100%;height:33px;border:1px solid #5bcefd;border-top-left-radius:16px;border-top-right-radius:16px;

    background:#1ab4f2;

    background:linear-gradient(0deg,#1ab4f2 0,#0592e2 45%,#14a3ef 50%,#02b4fe 100%);

    }

.login-body{box-sizing:border-box;width:100%;height:260px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;

    padding:50px;text-align:center;font-size:16px;z-index:1;

    background:#ecf9ff;

    background:radial-gradient( #fff 25%, #c6eaf8 100%);

    }

.login-body label{font-family: "微软雅黑";font-size:16px;margin-right:0.5em;}

.input32{height:32px;box-sizing:border-box;font-family: "微软雅黑";font-size:16px;line-height:20px;padding:5px 10px;border:1px solid #d0d0d0;}

.button32{height:32px;box-sizing:border-box;font-family: "微软雅黑";font-size:16px;line-height:20px;padding:5px 10px;border:1px solid #5fcffd;

    border-radius:5px;color:#FFF;text-shadow:2px 0px 4px #0c7dc1;text-shadow: 0px 0px 3px #094568;cursor:pointer;

    background:#1ab4f2;

    background:linear-gradient(0deg,#1ab4f2 0,#0592e2 45%,#14a3ef 50%,#02b4fe 100%);

    }

.button32-box{display:inline-block;border:1px solid #0c7dc1;border-radius:5px;}

</style>

</head>

<body>

<h2>支持chrome FireFox 和 IE10+，（IE9也能显示，IE9以下不支持）</h2>

<div id="login">

    <div class="login-bg"></div>

    <div class="login-head">

        <div class="login-head-in"></div>

    </div>

    <div class="login-body">

        <p><label>用户</label><input type="text" name="" class="input32"></p>

        <p><label>密码</label><input type="text" name="" class="input32"></p>

        <div class="button32-box"><input type="submit" name="" value="登录" class="button32"></div>

    </div>

</div>

作着玩：登录页（纯css，不支持ie9以下）的更多相关文章

  1. CSS学习笔记（7）--html页面的CSS、DIV命名规则

    html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...

  2. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  4. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  5. Spring Security笔记：自定义登录页

    以下内容参考了 http://www.mkyong.com/spring-security/spring-security-form-login-example/ 接上回,在前面的Hello Worl ...

  6. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  7. 适合码农工作时玩的游戏：Scrum

    适合码农工作时玩的游戏:Scrum 昨天遇到一个来自微软的面试者,在面试的最后,我简单介绍了一下我们团队使用一周一次的 Scrum 来做项目管理.他回答说:” 我在微软也用 Scrum,不过我们一周两 ...

  8. 演示：纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 纯CSS无hacks的跨游览器多列布局

    利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...

  10. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

随机推荐

  1. Problem D: 平面上的点——Point类 (IV)

    Description 在数学上,平面直角坐标系上的点用X轴和Y轴上的两个坐标值唯一确定.现在我们封装一个“Point类”来实现平面上的点的操作. 根据“append.cc”,完成Point类的构造方 ...

  2. springcloud学习总结

    最近花了一周的时间对springcloud的常用组件进行了一些入门级的了解,也破天荒的积极起来用博客进行了学习的记录,只是希望以后用的时候能对自己有所帮助,也希望给跟我一样对springcloud毫无 ...

  3. [Spring Boot]什么是Spring Boot

    <Spring Boot是什么> Spring Boot不是一个框架 是一种用来轻松创建具有最小或零配置的独立应用程序的方式 用来开发基于Spring的应用,但只需非常少的配置. 它提供了 ...

  4. C++ File Binary

    论操作非文本文件时,std::ios::binary的重要性 今天在读取图片文件的时候,根据图片数据的高宽对图片数据进行读取,但是出现了图片数据读取不完整,但是文件已经到达末尾的情况,中间想过read ...

  5. linux 查看当前系统版本号

    为避免现场未能完全安装系统,使用yum 安装版本需一致 第一种方法: [root@sky9896sky]# lsb_release -a bash:lsb_release: command not f ...

  6. WEBBASE篇： 第四篇， CSS知识2

    CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素   (2)%   (3) in 英寸  lin = 2.54cm (4)pt 磅 1pt = 1/72in    ppi ...

  7. xgboost中XGBClassifier(）参数详解

    http://www.cnblogs.com/wanglei5205/p/8579244.html 常规参数 booster gbtree 树模型做为基分类器(默认) gbliner 线性模型做为基分 ...

  8. 录制JMeter脚本的方式

    一.使用BadBoy录制JMeter脚本 JMeter和BadBoy下载地址:点击去下载 1.打开BadBoy并输入你要录制脚本的网址 这里我输入百度的网址,可以看到step下已经有一个请求了 2.录 ...

  9. js基本类型，隐式转换，变量

    Js笔记(脚本语言 node.js) Js五种基本类型:数字,字符串,布尔,null,undefined: HTML结构,表现,行为分离. 变量命名规则: 以字母或[下划线开始($)]不推荐,后面跟上 ...

  10. PythonStudy1——Python 值拷贝 浅拷贝 深拷贝

    拷贝:对值进行复制的过程 # 值拷贝:应用场景最多  ls = [1, 'abc', [10]] ls1 = ls # ls1直接将ls中存放的地址拿过来  # ls内部的值发生任何变化,ls1都会随 ...