您的位置:首页 - 教程 - CSS - 正文
使用DIV+CSS开发一个简单漂亮的登录页面

查看效果:http://hovertree.com/texiao/css/12.htm

Demo1
Demo2
Demo3
Demo4

源代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML5简单漂亮的登录页面 - 何问起 </title><base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/texiao/css/12/loginhovertree.css">
<style>.hvtholder{width:789px;margin:5px auto;}a{color:blue}</style>
</head>
<body>
<div class="hvtholder">
<h2>登录HoverTreeCMS管理面板</h2>
<br /><br />
<a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/menu/css/">CSS</a>
<a href="http://hovertree.com/hvtart/bjae/dh4pqx2p.htm">原文</a>
<a href="http://hovertree.com/map/">导航</a>
<a href="http://hovertree.com/texiao/jquery/13.htm">Demo1</a>
<a href="http://hovertree.com/texiao/jquery/14.htm">Demo2</a>
<a href="http://hovertree.com/texiao/jquery/15.htm">Demo3</a>
</div>
<div class="contenthovertree">

<!-- 登录面板 -->
<div class="panel">
<!-- 账号和密码组 -->
<div class="group">
<label>账号</label>
<input placeholder="何问起提示:请输入账号">
</div>
<div class="group">
<label>密码</label>
<input placeholder="何问起提示:请输入密码" type="password">
</div>
<!-- 登录按钮 -->
<div class="login">
<button>登录</button>
</div><div class="tipshovertree">
默认账号:hovertree
<br />默认密码:hovertree.com
</div>
</div>

<!-- 注册按钮 -->
<div class="register">
<button>创建新账号</button>
</div>
</div>
</body>
</html>

源代码中用到:placeholder
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点或者输入内容时消失。
注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。

placeholder 属性是 HTML5 中的新属性。


loginhovertree.css源代码:

/*按照样图要求,添加一个浅灰色背景*/
body{
background-color: #F2F2F2;
}

/*设置内容模块距离顶部一个有一段距离150px*/
.contenthovertree {
margin-top: 20px;
}

/*登录和注册按钮的整体样式*/
.contenthovertree button {
height: 30px;/*登录和注册按钮的高度*/
color: white;/*登录和注册按钮字体颜色为白色*/
font-size: 18px;/*登录和注册按钮的字体大小*/
border: 0px;/*无边框*/
padding: 0px;/*无内边距*/
cursor: pointer;/*登录和注册按钮的选择时为手形状*/
}


/*登录面板*/
.contenthovertree .panel {
background-color: white;/*登录面板背景颜色为白色*/
width: 302px;/*宽度为302px*/
text-align: center;/*子内容居中*/
margin: 0px auto;/*自身居中*/
padding-top: 20px;/*顶部的内边距为20px*/
padding-bottom: 20px;/*底部的内边距为20px*/
border: 1px solid #ddd;/*边框颜色为灰色*/
border-radius: 5px;/*边框边角有5px的弧度*/
}

/*登录和密码组*/
.contenthovertree .panel .group {
text-align: left;/*子内容居中*/
width: 262px;/*宽度为262px*/
margin: 0px auto 20px;/*自身居中,并距离底部有20px的间距*/
}
.contenthovertree .panel .group label {
line-height: 30px;/*高度为30px*/
font-size: 18px;/*字体大小为18px*/
}
.contenthovertree .panel .group input {
display: block;/*设置为块,是为了让输入框独占一行*/
width: 250px;/*宽度为250px*/
height: 30px;/*高度为30px*/
border: 1px solid #ddd;/*输入框的边框*/
padding: 0px 0px 0px 10px;/*左边内边距为10px,显得美观*/
font-size: 16px;/*字体大小*/
}
.contenthovertree .panel .group input:focus{

border-left: 1px solid #CC865E;/*当输入框成为焦点时,左边框颜色编程褐色*/
}
.contenthovertree .panel .login button {
background-color: #CC865E;/*按钮的背景颜色*/
width: 260px;/*按钮的宽度*/
}
.contenthovertree .panel .login button:hover {
background-color: white;/*按钮选中后背景颜色为白色*/
color: #CC865E;/*按钮选中后字体颜色为褐色*/
border: 1px solid #CC865E;/*按钮选中后边框颜色为褐色*/
}


/*注册按钮*/
.contenthovertree .register {
text-align: center;/*子内容居中*/
margin-top: 20px;/*顶部的内边距为20px*/
}
.contenthovertree .register button {
background-color: #466BAF;/*按钮的背景颜色为蓝色*/
width: 180px;/*按钮的宽度*/
}

.contenthovertree .register button:hover {
background-color: white;/*按钮选中后背景颜色为白色*/
color: #466BAF;/*按钮选中后字体颜色为蓝色*/
border: 1px solid #466BAF;/*按钮选中后边框颜色为蓝色*/
}
.tipshovertree{text-align:left;width:260px;margin-left:20px;margin-top:10px;color:gray}

评论: