作着玩：登录页（纯css，不支持ie9以下）
支持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以下）的更多相关文章
- CSS学习笔记（7）--html页面的CSS、DIV命名规则
html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- Spring Security笔记：自定义登录页
以下内容参考了 http://www.mkyong.com/spring-security/spring-security-form-login-example/ 接上回,在前面的Hello Worl ...
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- 适合码农工作时玩的游戏：Scrum
适合码农工作时玩的游戏:Scrum 昨天遇到一个来自微软的面试者,在面试的最后,我简单介绍了一下我们团队使用一周一次的 Scrum 来做项目管理.他回答说:” 我在微软也用 Scrum,不过我们一周两 ...
- 演示：纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
随机推荐
- spring boot 添加客户端负载均衡
1.pom.xml文件中,添加依赖包 <dependency> <groupId>org.springframework.cloud</groupId> <a ...
- LoadLibrary和GetModuleHandle
0x01 区别 LoadLibrary是把一个模块映射进调用进程的地址空间,需要时增加引用计数,每调用一次,引用计数增加一,需要通过相同步骤地调用FreeLibrary来减少引用次数,当为0时,系统 ...
- java中的线程问题（三）——继承Thread VS 实现Runnable的区别
从java的设计来看,通过继承Thread或者实现Runnable接口来创建线程本质上没有区别,从jdk帮助文档我们可以看到Thread类本身就实现了Runnable接口,如果一定要说它们有什么区别, ...
- springcloud学习计划
后续参考学习spring cloud https://blog.csdn.net/forezp/article/details/70148833 https://github.com/forezp/S ...
- Alpha冲刺10
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10045588.html 作业博客:https://edu.cnblogs.com/campus ...
- nodejs -- 主模块 ,初始化.
一:知识点: 1-1: 模块初始化: 1-2 主模块: 二: 测试 2-1: 代码: 1) 主模块 1: main.js var counter1 = require("./counte ...
- Python2入门（1）
一.基础语法1 - 输出语句 print "hello world",print默认输出换行,如果需要实现不换行需在变量末尾加上逗号,; 2 - python合法标识符 3 - 字 ...
- python爬虫挂代理
以下是GET的方法,使用的代理接口网站是 http://www.xicidaili.com/nn/ #-*- coding:utf-8 -*- from bs4 import BeautifulSou ...
- Quartz动态修改数据库cronExpression（无须重启服务器即可更改定时时间）
quartz通过动态设置配置文件确实可以实现与数据库的同步,但现实开发上线后我们基本是不会对配置文件等进行变动,因为重启一次服务器所需的成本太多. 这时,就需要我们仅仅修改数据库就能实现动态的更新定时 ...
- JavaScript 基础篇1
JavaScript引用问题 1:<script>标签引用嵌入html页面中,在外部引用中是JavaScript文件时必须用src属性设置相应的文件的URL.2:在不使用defer和asy ...