效果预览：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. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  2. Android之startService()和bindService()区别

    1. 生命周期: startService()方式启动,Service是通过接受Intent并且会经历onCreate()和onStart().当用户在发出意图使之销毁时会经历onDestroy(), ...

  3. Android音视频之MediaRecorder音视频录制

    前言: 公司产品有很多地方都需要上传音频视频,今天抽空总结一下音频视频的录制.学习的主角是MediaRecorder类. MediaRecorder类介绍: MediaRecorder类是Androi ...

  4. 网络通信简单实例BIO,NIO,AIO

    这里,我将做一个简单的通信程序,分别使用三种原始的通信工具:BIO,NIO,AIO. 功能就是一个服务器,一个客户端.服务器就是处理请求,返回响应.而客户端就是连接服务器,发送请求,接收响应. 第一步 ...

  5. 你所不知道的15个Axure使用技巧

    你有用原型开发工具吗?如果有,那你用的是Axure还是别的? 从以前就喜欢使用Axure,主要是觉得它能清楚的表达设计的思路,还有交互的真实再现,能让看的人一目了然,昨天看了这篇博文,便更加确定Axu ...

  6. Linux使用lvresize扩展或缩减lv大小

    环境:CentOS 6.7 一.新建并挂载目录 /u01 和 /data 1.创建目录挂节点/u01,/data mkdir -p /{u01,data} 2.创建lv,名称是lv_u01,大小10g ...

  7. Hibernate之HQL添加过滤器查询的用法

    HQL查询过程中支持添加过滤器.使用步骤是这样的: 首先在要查询的实体对象的映射中使用<filter-def>标签配置过滤器,并在相对应的<class>标签中添加对应的< ...

  8. hibernate笔记--组件映射方法

    假设我们需要保存学生student的信息,student中有一个address属性,我们知道像这种信息其值可能会有多个,就像一个人会有两个以上的手机号,这种情况在hibernate中应该这样配置: 新 ...

  9. 重温Servlet学习笔记--Cookie对象

    首先要了解cookie必须得先了解http协议,,Cookie是http协议指定的,先由服务器保存cookie到浏览器,在下次浏览器请求服务器时把上次请求得到的cookie归还给服务器,cookie以 ...

  10. Linux(Centos)快速搭建SVN

    前言 项目中源码或者文档需要进行管理与版本记录,历数此类工具VSS.CVS.SVN.GIT等等,有非常多的版本控制系统.SVN现在还是很常见,把笔记总结搬上博客,SVN这个再不放以后估计只能写GIT的 ...