支持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. hadoop Non DFS Used是什么

    首先我们先来了解一下Non DFS User是什么? Non DFS User的意思是:非hadoop文件系统所使用的空间,比如说本身的linux系统使用的,或者存放的其它文件   它的计算公式: n ...

  2. LNMP(二)

    第二十一课 LNMP(二) 目录 一.默认虚拟主机 二.Nginx用户认证 三.Nginx域名重定向 四.Nginx访问日志 五.Nginx日志切割 六.静态文件不记录日志和过期时间 七.Nginx防 ...

  3. while +for+字符串

    # while 循环嵌套# user_from_db='egon'# pwd_from_db='123'# while True:# usr_inp=input('username>>&g ...

  4. HDU5616 天平能否称出物体重量问题 01背包变形或者折半搜索

    //hdu5616 void solve1(){dp[0]=1;for(int i=1;i<=n;i++){for(int j=INF;j>=val[i];j--){dp[j]|=(dp[ ...

  5. 剑指Offer 10. 矩形覆盖 (递归)

    题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 题目地址 https://www.nowcoder.com/ ...

  6. Eclipse安装Activiti Designer插件

    本人使用的是在线安装: 打开Eclipse -> Help -> Install New SoftWare-> Add 然后按照如下对话框输入: Name:Activiti BPMN ...

  7. 安装ucenter以及单点实现

    1.下载ucenter包 最好是utf-8格式2.解压得到4个安装包 3.1)新建一个站点c 把upload中的所有文件复制到站点根目录下中2)访问出现 Please click here to in ...

  8. Cronolog切割tomcat日志

    Cronolog切割tomcat 安装cronolog 1. 将cronolog-1.6.2.tar.gz 上传至/opt 目录 2. 解压缩 #解压缩 tar -zxvf cronolog-1.6. ...

  9. arm-linux-ld:u-boot.lds:1: ignoring invalid character `#' in expression

    在裁剪uboot的时候出现下面错误: LDS u-boot.lds LD u-boot arm-linux-: ignoring invalid character `#' in expression ...

  10. hdu5003 Osu!排序实现水题

    Osu! is a famous music game that attracts a lot of people. In osu!, there is a performance scoring s ...