效果预览：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. 在drawable 画胶囊状

    <solid android:color="@color/colorAccent"></solid> <corners android:radius= ...

  2. angular-ui分页组件

    http://angular-ui.github.io/bootstrap/#/pagination 分页组件只提供生成分页按钮,数据的显示需要使用ng-repeat, 注意设置 items-per- ...

  3. GUID简介

    GUID (全局唯一标识符) 编辑 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点. ...

  4. Hibernate学习之hibernate.cfg.xml

    <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...

  5. IOS学习之NSNotificationCenter消息机制

    NSNotificationCenter是 Cococa消息中心,统一管理单进程内不同线程的消息通迅. 添加观察者接收通知: //添加通知中心观察者 [[NSNotificationCenter de ...

  6. YII 的源码分析(三)

    前面已经看完了启动一个yii程序所要经过的流程,以及渲染一个页面是怎么完成的.今天要分析的是yii是如何处理用户请求的.也就是控制和动作部分. 还是以helloworld为例演示这一过程.我们在地址栏 ...

  7. Repository 返回 IQueryable？还是 IEnumerable？

    这是一个很有意思的问题,我们一步一步来探讨,首先需要明确两个概念(来自 MSDN): IQueryable:提供对未指定数据类型的特定数据源的查询进行计算的功能. IEnumerable:公开枚举数, ...

  8. 小菜学习Winform（三）Socket点对点通信

    前言 Socket的英文原义是“孔”或“插座”,其实在网络编程中Socket就是这个意思,就像我们打电话,要首先知道对方的手机号一样,这个手机号就相当于一个Socket号.一个插座,在网络编程中就是i ...

  9. C算法编程题（四）上三角

    前言 上一篇<C算法编程题(三)画表格> 上几篇说的都是根据要求输出一些字符.图案等,今天就再说一个“上三角”,有点类似于第二篇说的正螺旋,输出的字符少了,但是逻辑稍微复杂了点. 程序描述 ...

  10. php使用post动态选择头像和js事件动态改变头像

    <html> <head> <meta http-equit="Content-type" content="text/html" ...