一个简单的登录页面，效果不错哦！

效果图：

jsp代码：

<%@ page contentType="text/html; charset=utf-8" language="java"%>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>荣辉科技员工登录系统</title>
<link href="${pageContext.request.contextPath}/static/css/login.css" rel="stylesheet">
<div class="circle">
</div>

</form>

</div>
      <table width="100%" height="27" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center" class="word_login">CopyRight © 2011 www.anhuironghui.com 安徽省荣徽科技有限公司<br>
            本站请使用IE6.0或以上版本 1024*768为最佳显示效果</td>
        </tr>
      </table>

</body>
</html>

css代码：

@keyframes moon {
to {
box-shadow: inset 10rem 0 whitesmoke;
transform: rotate(10deg);
}
}

html {
background-color: black;
height: 100%;
}

.circle {
width: 10rem;
height: 10rem;
background: #000000;
margin: 3rem auto;
border-radius: 50%;
box-shadow: inset -2rem 0 white;
}

body {
background: black;
color: #fff;
font: 300 87.5%/1.5em 'Open Sans', sans-serif;
}

.title {
font-family: Vollkorn;
color: white;
font-size: 48px;
text-align: center;
margin: -0rem;
}
/* Fonts */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
/* Simple Reset */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Form Layout */

.form-wrapper {
background: #000000;
border-radius: 2px;
margin: 50px auto;
position: relative;
width: 300px;
}

form {
padding: 30px 20px 0;
}

.form-item {
margin-bottom: 10px;
width: 100%;
}

.form-item input {
border: none;
background: #1F1F1F;
border-radius: 2px;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
height: 50px;
padding: 0 16px;
transition: background 0.3s ease-in-out;
width: 100%;
}

.form-item input:focus {
background: #4d545e;
outline: none;
}

.button-panel {
margin: 20px 0 0;
width: 100%;
}

.button-panel .button {
background: #8B0000;
border: none;
border-radius: 2px;
color: #fff;
cursor: pointer;
height: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
transition: background 0.3s ease-in-out;
width: 100%;
}

.button:hover {
background: #660000;
}

.form-footer {
font-size: 0.9em;
padding: 20px 0;
text-align: center;
}

.form-footer a {
color: #e3e3e3;
text-decoration: none;
transition: color 0.3s;
}

.form-footer a:hover {
color: #c0c0c0;
}

转载于:https://www.cnblogs.com/yishang/p/5108830.html

一个简单的登录页面，效果不错哦！相关推荐

实现一个简单的登录页面
实现一个简单的登录页面设计了一个登录页面,感觉还挺不错的实现效果设计的还是挺好看的吧分析需要的功能一个登录页面一个注册页面翻转效果输入后的正则判断,给用户提示信息翻转要清空页面的全部信 ...
写一个简单的登录页面!!!(html)
写一个简单的登录页面!!! 大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面那,该如何做呢? 首先现在html里的body里写一个头部header标签(双标签 ...
element ui登录界面_Vue和Element-UI做一个简单的登录页面
如下所示,是vue+ElementUI写的一个登录页面: Login.vue部分 class="demo-ruleForm login-container"> 登陆界面记住 ...
Vue实现一个简单的登录页面【自定义】
创建一个自定义插件 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Android开发实现简单QQ登录页面
Android开发实现极为简单的QQ登录页面设计一个简单QQ登录页面,无任何功能.然后打包安装到手机. 1.首先创建一个空白页面 2.打开样式设计的页面在activity_main.xml中写入代 ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...
用 Flutter 写一个精美的登录页面（最新版）
用 Flutter 写一个精美的登录页面(最新版) 主体结构标题输入框登录按钮其他登录方式注册按钮完整源码参考了博客:用flutter写一个精美的登录页面.但是那篇文章是 18 年的,较 ...
设计一个简单的购物页面（html+css+php）
水平有限,精力有限,很多东西写得可能不那么详细,有不懂可以留言提问,懂的尽量解答首先讲一下,购物页面肯定会涉及到数据库部分的,我这篇文章数据库方面不会详细讲,就简单给个思路.购物需要用到cookie ...

一个简单的登录页面，效果不错哦！

一个简单的登录页面，效果不错哦！相关推荐

最新文章

热门文章