效果预览：http://keleyi.com/keleyi/phtml/divcss/21.htm

HoverTree开源项目实现了分层后，准备实现管理员后台登录，这里先把登录界面的HTML模板整理好。

推荐：http://hovertree.com/h/bjaf/loucldil.htm

html代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>很漂亮的用户登录界面HTML模板-柯乐义</title><base target="_blank" />

<style>

*{

padding:0px;

margin:0px;

}

a{color:White}

body{

font-family:Arial, Helvetica, sans-serif;

background:url(http://keleyi.com/keleyi/phtml/divcss/21/images/grass.jpg) no-repeat center;

font-size:13px;

}

img{

border:0;

}

.lg{width:468px; height:468px; margin:100px auto; background:url(http://keleyi.com/keleyi/phtml/divcss/21/images/login_bg.png) no-repeat;}

.lg_top{ height:200px; width:468px;}

.lg_main{width:400px; height:180px; margin:0 25px;}

.lg_m_1{

width:290px;

height:100px;

padding:60px 55px 20px 55px;

}

.ur{

height:37px;

border:0;

color:#666;

width:236px;

margin:4px 28px;

background:url(http://keleyi.com/keleyi/phtml/divcss/21/images/user.png) no-repeat;

padding-left:10px;

font-size:16pt;

font-family:Arial, Helvetica, sans-serif;

}

.pw{

height:37px;

border:0;

color:#666;

width:236px;

margin:4px 28px;

background:url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;

padding-left:10px;

font-size:16pt;

font-family:Arial, Helvetica, sans-serif;

}

.bn{width:330px; height:72px; background:url(http://keleyi.com/keleyi/phtml/divcss/21/images/enter.png) no-repeat; border:0; display:block; font-size:18px; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-weight:bolder;}

.lg_foot{

height:80px;

width:330px;

padding: 6px 68px 0 68px;

}

</style>

</head>

<body class="b">

<div class="lg">

<form action="#" method="POST">

<div class="lg_top"></div>

<div class="lg_main">

<div class="lg_m_1">

<input name="username" value="hovertree" class="ur" />

<input name="password" type="password" value="keleyi.com" class="pw" />

</div>

</div>

<div class="lg_foot">

<input type="button" value="点这里登录" class="bn" /></div>

</form>

</div>

<div style="text-align:center;">

<p><a href="http://keleyi.com/">首页</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a> <a href="http://keleyi.com/a/bjae/6asac24d.htm">原文</a></p>

</div>

</body>

</html>

下载地址：http://files.cnblogs.com/jihua/hovertreelogin.rar

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

很漂亮的用户登录界面HTML模板的更多相关文章

  1. 美化VC界面(用户登录界面)

    源代码:下载 VC开发程序单调的界面相信大家都是深有感触,提到界面美化编程,人们都会说做界面不要用VC写,太难了.一句俗语:难者不会,会者不难.VC的美化界面编程并没有人们想像的那么难.这篇文章是我写 ...

  2. Android studio 开发一个用户登录界面

    Android studio 开发一个用户登录界面 activity_main.xml <?xml version="1.0" encoding="utf-8&qu ...

  3. html简约风用户登录界面网页制作html5-css-jquary-学习模版

    2018--12-12 喜迎双十二,咳咳,,,,我不是打广告哈,购物的节日也不要忘记学习. 大家好,我又来了. 今天抽出来空把自己的学习心得给大家分享,这是一个可开发可扩展的用户登录界面,用于开发学习 ...

  4. jQuery和CSS3炫酷GOOGLE样式的用户登录界面

    这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效.该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作.username和password输入框採用浮动标签特效. ...

  5. 编写Java程序，使用Swing布局管理器与常用控件，实现用户登录界面

    返回本章节 返回作业目录 需求说明: 使用Swing布局管理器与常用控件,实现用户登录界面 实现思路: 创建用户登录界面的类LoginFrame,在该类中创建无参数的构造方法,在构造方法中,设置窗体大 ...

  6. Google用户登录界面 Android实现

    实验效果: 项目目录: Java代码(放在Src文件下) package com.bn.chap9.login; import java.io.BufferedReader; import java. ...

  7. java web用户登录界面

    做这次实验,主要用到了mysql  java web 的 内容 实验代码: IUserDao.java package com.jaovo.msg.dao; import java.util.List ...

  8. Qt 用户登录界面

     使用QT创建自己的登录窗口: 主要步骤:    1.窗口界面的绘制     2.沟通数据库进行密码验证 void MainWindow::on_pushButton_clicked() { // 连 ...

  9. 记一次自启动的docker容器将宿主机的开机用户登录界面覆盖事件

    宿主机的系统为CentOS7_7.7.1908,默认为GUI启动,安装了宝塔面板,docker-ce为最新版. 在启动了一个centos7的容器(镜像为centos官方镜像)后,将该容器重启策略设置为 ...

随机推荐

  1. SQL Server ErrorLog

    SQL Server 使用ErrorLog记录SQL Server启动和运行过程中的信息,具体信息参考:<SQLSERVER errorlog讲解>.通常来说,ErrorLog是指SQL ...

  2. 【Win 10应用开发】多窗口视图

    Windows App一般情况下,同一时刻只能有一个应用程序实例在运行,为了在特殊需求下可以同时呈现不同的UI,SDK提供了多视图操作支持. 应用程序可以创建新的应用视图,以新的视图为基础可以呈现与主 ...

  3. MVC4做网站后台:模块管理1、修改模块信息

    网站可能会包含一些模块:像文章.产品.图片.留言等. 栏目模块主要实现功能,启用或禁用模块,模块权限设置,模块上传设置等. 权限设置和上传设置以后专门考虑,先来显示或禁用模块. 1.在顶部导航栏添加管 ...

  4. .Net 转战 Android 4.4 日常笔记目录

    .Net 转战 Android 4.4 日常笔记(1)--工具及环境搭建 .Net 转战 Android 4.4 日常笔记(2)--HelloWorld入门程序 .Net 转战 Android 4.4 ...

  5. 【原创】开源Math.NET基础数学类库使用(11)C#计算相关系数

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  6. 【基础进阶】URL详解与URL编码

    作为前端,每日与 URL 打交道是必不可少的.但是也许每天只是单纯的用,对其只是一知半解,随着工作的展开,我发现在日常抓包调试,接口调用,浏览器兼容等许多方面,不深入去理解URL与URL编码则会踩到很 ...

  7. 窥探Swift之别具一格的Struct和Class

    说到结构体和类,还是那句话,只要是接触过编程的小伙伴们对这两者并不陌生.但在Swift中的Struct和Class也有着令人眼前一亮的特性.Struct的功能变得更为强大,Class变的更为灵活.St ...

  8. 自己实现简单的string类

    1.前言 最近看了下<C++Primer>,觉得受益匪浅.不过纸上得来终觉浅,觉知此事须躬行.今天看了类类型,书中简单实现了String类,自己以前也学过C++,不过说来惭愧,以前都是用C ...

  9. 高级javascript---严格模式

    严格模式 (JavaScript)   严格模式是一种将更好的错误检查引入代码中的方法. 在使用严格模式时,你无法使用隐式声明的变量.将值赋给只读属性或将属性添加到不可扩展的对象等. 本主题后面的代码 ...

  10. C#创建安全的栈(Stack)存储结构

    在C#中,用于存储的结构较多,如:DataTable,DataSet,List,Dictionary,Stack等结构,各种结构采用的存储的方式存在差异,效率也必然各有优缺点.现在介绍一种后进先出的数 ...