一个通用的登录界面：
鼠标放上去效果（IE8好像不起作用）：
所用图片：
页面HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>系统登录</title> <link href="css/login.css" rel="stylesheet" type="text/css" /> </head> <body style="text-align:center;" > <div class="container"> <div class="login"> <div class="login_top"></div> <div class="login_center"> <div class="form_body"> <input name="textfield" type="text" class="Username_input" id="textfield" placeholder="Username" /> <input name="textfield2" type="Password" class="Password_input" id="textfield2" placeholder="Password"/> <div class="button_body"> <div class="error" id="error"></div> <input name="loginBtn" id="loginBtn" type="submit" value="登 录" class="login_button" onclick="loginSubmit();"> </div> </div> </div> </div> </div> </body> </html>
防止按钮错位，加了个button_body的DIV
分步分析：
1、整个body样子即最终效果样子
但其去掉background后效果如图（两边是白的，页面上看不出）：
说明.container只是中间那部分，两边是使用背景条填充的。即材料中的login_bg图片
* {
margin: 0;
padding: 0;
}
body {
font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif;
font-size: 12px;
background: #2a445f url(../images/login/login_bg.jpg) left top repeat-x;
}
2、.container部分
即去掉两边填充的空白后的这块
.container {
position:absolute;
width: 850px;
height: 588px;
left: 50%;
top: 0;
margin-left: -425px;
background:url(../images/login/login_bg2.jpg) 0 0 no-repeat;
}
3、.login部分
中间蓝色阴影部分，真正的登录框部分
.login {
margin: 133px 0 0 234px;
width:382px;
height:282px;
}
4、login_top部分
真正登录框中，上面蓝色阴影部分。
.login_top {
width: 382px;
height: 115px;
float:left;
margin:0px;
background: url(../images/login/login_top.png) no-repeat;
}
5、login_center部分
真正登录框中，下面阴影部分
.login_center {
width: 382px;
height: 167px;
float:left;
margin:0px;
background:url(../images/login/login_center.png) no-repeat;
}
6、form_body部分
阴影部分
.form_body {
padding-left: 46px;
float: left;
width: 290px;
height: 143px;
}
form_body为margin-left时，IE下会错位，原因未知。。
文本框通用部分：
input[type="text"], input[type="password"] {
background-color: #ffffff;
border: 1px solid #d5d5d5;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
注意几点：
1、文本框后面的小人是通过background，偏移实现
input.Username_input {
background: url(../images/login/icon_input.png) 99% 9px no-repeat;
..
}
2、LOGO与文本框间的空白是通过在LOGO下留白实现
3、整个界面的底色是通过小背景图片填充实现
4、鼠标移动上去边框变粗，聚焦时边框变色（小细节）
input.Username_input {
background: url(../images/login/icon_input.png) 99% 9px no-repeat;
margin-bottom: 11px;
padding: 0;
padding-top: 6px;
height: 32px;
width: 288px;
color: #555;
font-size: 14px;
border: 1px solid #d5d5d5;
background-color: fff;
line-height: 14px;
text-indent: 6px;
}
input.Username_input:hover {
background: url(../images/login/icon_input.png) 99% 9px no-repeat;
border: 1px solid #b5b5b5;
}
input.Username_input:focus {
background: url(../images/login/icon_input.png) 99% -31px no-repeat;
border-color: rgba(82, 168, 236, 0.8);
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
全部CSS代码：
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif;
font-size: 12px;
background: #2a445f url(../images/login/login_bg.jpg) left top repeat-x;
}
.container {
position:absolute;
width: 850px;
height: 588px;
left: 50%;
top: 0;
margin-left: -425px;
background:url(../images/login/login_bg2.jpg) 0 0 no-repeat;
}
.login {
margin: 133px 0 0 234px;
width:382px;
height:282px;
}
.login_top {
width: 382px;
height: 115px;
float:left;
margin:0px;
background: url(../images/login/login_top.png) no-repeat;
}
.login_center {
width: 382px;
height: 167px;
float:left;
margin:0px;
background:url(../images/login/login_center.png) no-repeat;
}
.form_body {
padding-left: 46px;
float: left;
width: 290px;
height: 143px;
}
input[type="text"], input[type="password"] {
background-color: #ffffff;
border: 1px solid #d5d5d5;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input.Username_input {
float: left;
background: url(../images/login/icon_input.png) 99% 9px no-repeat;
margin-bottom: 11px;
padding: 0;
padding-top: 6px;
height: 32px;
width: 288px;
color: #555;
font-size: 14px;
border: 1px solid #d5d5d5;
background-color: fff;
line-height: 14px;
text-indent: 6px;
}
input.Username_input:hover {
background: url(../images/login/icon_input.png) 99% 9px no-repeat;
border: 1px solid #b5b5b5;
}
input.Username_input:focus {
background: url(../images/login/icon_input.png) 99% -31px no-repeat;
border-color: rgba(82, 168, 236, 0.8);
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
input.Password_input {
float: left;
background: url(../images/login/icon_input.png) 99% -71px no-repeat;
margin-bottom: 11px;
padding: 0;
padding-top: 6px;
height: 32px;
width: 288px;
color: #555;
font-size: 14px;
border: 1px solid #d5d5d5;
background-color: fff;
line-height: 14px;
text-indent: 6px;
}
input.Password_input:hover {
background: url(../images/login/icon_input.png) 99% -71px no-repeat;
border: 1px solid #b5b5b5;
}
input.Password_input:focus {
background: url(../images/login/icon_input.png) 99% -111px no-repeat;
border-color: rgba(82, 168, 236, 0.8);
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.button_body {
float: left;
margin-top: 14px;
width: 290px;
height: 35px;
}
input.login_button {
float: right;
clear: right;
background: #215a98 url(../images/login/icon_key.png) 22px 9px no-repeat;
cursor: pointer;
border: 1px solid #1a497d;
border-bottom: 1px solid #283b4f;
width: 102px;
height: 35px;
font-family: "微软雅黑";
font-size: 15px;
color: #fff;
text-indent: 21px;
}
input.login_button:hover {
background: #1e4b84 url(../images/login/icon_key.png) 22px 9px no-repeat;
cursor: pointer;
border: 1px solid #173e69;
border-bottom: 1px solid #123860;
}
.error {
float: left;
margin-top: 8px;
font-size: 12px;
color: #F00;
}
..
相关推荐
实现没有登录重定向到登录页面login.aspx 用户首次登录网站给出用户名和密码的输入提示，否则给出登录过的用户名 实现用户名和密码的非空、数据验证 通过验证后将用户重定向到Defalut.aspx页面，并传递...
自己写的登录页面自己写的登录页面自己写的登录页面自己写的登录页面
简单通用登录页面模板，用户登录界面模板，有表单验证功能。
三个登录页面源码。 1.科幻炫酷登录页面。 下载免费享用。 语言：Java，css，js 三个登录页面源码。 1.科幻炫酷登录页面。 下载免费享用。 语言：Java，css，js
实现静态的登录页面，借助于bootstrap框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 ...
html登录页面,html登录页面
漂亮登录页面模版 漂亮登录页面模版漂亮登录页面模版漂亮登录页面模版漂亮登录页面模版漂亮登录页面模版
这是一个静态的html登录页面，如果自己你会ps的话你可以根据自己的需要来修改相应的图片！
jsp登录页面设计jsp登录页面设计jsp登录页面设计
用vue2实现的一个登录页demo， 背景图可直接替换，成品案例直接可运行 设计技术： vue2、element-ui、vue-router、滑块校验 安装包 npm install 开发运行 npm run serve 编译运行 npm run build 代码解读： ...
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
vue版炫酷的登录页
spring-security多登录页面配置，包括前台和后台分开登录界面，注销登录返回不同的界面等。
好看的蓝色后台登录页面模板源码下载
漂亮的用户登录页面模板，可以根据自己的需要选择添加或删除一些内容
使用flutter 实现基础的登录页手机号码获取验证码，60s倒计时，通过路由页面切换，页面结构 1.标题 2.手机号输入框 3.验证码输入框 4.获取验证码 5.60s倒计时 6.登录按钮 7.跳转到主页
3.登录页先引用-代码如下 import Cookies from 'js-cookie'//cook引用 2021-08-09 import { encrypt, decrypt } from '@/utils/jsencrypt'//rememberMe-password加密 1.加载页面使用getCookie存下 created(){ ...
flex登录页代码
php 连接mysql数据库做简单的登录页面，实现用户的登录注册功能，连接数据库需改动一下conn.php里面的链接参数
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口 预览:http://dongnan185.com:8083/videos/vue3.mp4 一共两个包： 一个接口包 连的本地postgresql 表及信息有截图 库自己装 一个vue包 ...