一个通用的登录界面：
鼠标放上去效果（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;
}
..
相关推荐
在IT行业中，构建一个吸引人的登录页面是提升用户体验的关键步骤之一。这个压缩包包含三个不同设计风格的科幻炫酷登录页面源码，非常适合那些想要为自己的应用程序或网站增添独特视觉效果的开发者。以下是对这些登录...
在构建Web应用时，设计一个简洁且功能完备的登录页面是至关重要的，它不仅需要吸引用户的注意力，还要确保用户能够方便、安全地进行身份验证。本资源提供的“简单通用登录页面模板”是基于Bootstrap框架创建的，...
6. **响应式设计**：考虑到现代网站需要在不同设备上呈现良好，登录页面可能已经包含了响应式设计，通过媒体查询（@media）确保页面在手机、平板电脑和桌面电脑上都有良好的显示效果。 7. **安全考虑**：尽管这是...
在IT行业中，设计一个美观且功能完备的登录首页至关重要，因为它是用户与应用程序初次交互的地方。"漂亮的登录首页 漂亮的登录页面"这个主题着重于如何利用前端技术，尤其是jQuery，来创建吸引人的用户体验。下面将...
### Spring Security 多登录页面配置详解 在许多大型企业级应用中，为了更好地实现权限管理和用户体验，往往会采用多个登录页面的方式来进行用户身份验证。这种方式能够有效地将不同类型的用户（如前台用户、后台...
jsp登录页面设计源代码 jsp登录页面设计是指使用jsp语言来设计一个登录页面，实现用户的身份验证。下面是jsp登录页面设计的详细知识点： 1. HTML代码设计： 登录页面的静态设计使用HTML语言，通过设计HTML代码来...
登录页面是网站或应用程序的重要组成部分，它为用户提供了一个安全的入口点，允许他们验证身份后访问个人账户。在设计上，一个漂亮的登录页面模版能够提升用户体验，吸引用户并增加他们对品牌的信任感。"漂亮登录...
在IT行业中，设计一个吸引人的、用户友好的登录页面对于任何网站或应用程序来说都是至关重要的。"好看的蓝色后台登录页面模板源码下载"提供了一个视觉上美观且功能实用的登录界面设计，它采用蓝色调，这通常给人一种...
【标题】"炫酷的动态登录页面"是一个充满活力和技术感的设计作品，它结合了JavaScript、CSS和jQuery三种核心技术，为用户提供了一种引人入胜的登录体验。在这个登录页面中，用户不仅可以享受到美观的界面设计，还能...
登录页面中的关键元素包括`<form>`、`<input>`、`<label>`等。 - 属性：HTML元素可以有属性，例如`type`、`name`、`id`、`value`等，这些属性提供了额外的信息或控制元素的行为。 2. 表单创建： - `<form>`标签：...
在这个专题中，我们将深入探讨这些技术在构建这样的登录页面中的应用。 首先，HTML5是现代网页开发的基础，提供了更丰富的语义化标签和功能。例如，`<header>`、`<nav>`、`<section>`、`<article>`等标签可以帮助...
在登录页的案例中，CSS可能使用了媒体查询（Media Queries）来实现响应式设计，确保页面在不同设备上都能正常显示。此外，背景视频的样式设置也很关键，包括其透明度、播放循环、全屏覆盖等效果。CSS3的新特性，如...
在Web开发中，登录页面和后台管理页面是网站的核心组成部分，它们确保了用户的安全性和管理员的有效控制。这个压缩包提供的是静态HTML源码文件，意味着它们不包含服务器端的脚本，如PHP、Java或ASP.NET，而是由...
【标题】：“一个漂亮的h5登录页面，包含html,css和js” 这个标题指出我们讨论的是一个使用HTML5、CSS3以及...总的来说，这个登录页面项目展示了Web开发中的基础技术和实践，为用户提供了一个既美观又实用的登录体验。
在创建“vue版炫酷的登录页”时，Vue.js 的核心概念和特性将起到关键作用。首先，Vue 提供了一个声明式的数据绑定系统，允许开发者轻松地将UI与数据模型连接起来，实现数据驱动的开发模式。例如，在login.vue文件中...
在"6套登录模板"中，可能包含了不同设计风格和功能的登录页面示例，比如扁平化设计、暗黑模式、浮动效果、验证提示等。通过学习和研究这些模板，开发者可以了解到如何根据项目需求定制登录界面，同时提升用户体验。 ...
在构建一个引人注目的PC端登录页面时，设计与交互是至关重要的。"酷炫PC端登录页面模板"提供了一个具有前端验证功能的高级示例，它利用了JavaScript、CSS和jQuery技术来实现动态效果，使用户体验更加丰富。下面我们...
本压缩包“JEECG 修改首页和登录页.rar”包含了对JEECG平台首页和登录页面的定制化修改，主要涉及前端Vue组件和CSS样式的调整，以及可能的后端接口逻辑优化，以实现更符合特定需求的用户界面。 首先，JEECG的首页是...
【仿163邮箱登录页面】是一个常见的前端开发练习，主要目标是模仿163邮箱的登录界面，以便学习和掌握网页布局、样式设计以及交互实现等技能。在这个项目中，我们将关注三个主要方面：HTML结构（div标签）、CSS样式...
在IT行业中，网页设计是至关重要的一环，尤其是登录页面，它是用户接触网站或应用的第一步。本资源包含了一些精心设计的HTML和CSS登录页面示例，这些页面具有良好的视觉效果和用户体验。接下来，我们将深入探讨HTML...