效果预览：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. Android笔记——Android中visibility属性VISIBLE、INVISIBLE、GONE的区别

    在Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为"visible "."invisible"."gone&quo ...

  2. $stateParams

  3. [WPF]带下拉列表的文本框

    控件我已经弄好了,代码比较多,所以没办法全面介绍. 一开始我是直接继承Selector类来实现,做是做出来了,不过发现性能不太好.于是,我就想着自己来实现.毕竟我是做给自己用的,也不考虑过多的东西,也 ...

  4. 万能Adapter以及ViewHolder性能优化

    //CommonAdapter import android.content.Context; import android.widget.BaseAdapter; import java.util. ...

  5. .NET平台开源项目速览(6)FluentValidation验证组件介绍与入门(一)

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下FluentValidation验证组件.那里只是概述了一下,并没有对其使用和强大功能做深入研究 ...

  6. MapReduce的理解

    1 什么是MapReduce? Map本意可以理解为地图,映射(面向对象语言都有Map集合),这里我们可以理解为从现实世界获得或产生映射.Reduce本意是减少的意思,这里我们可以理解为归并前面Map ...

  7. ASP.NET sync over async（异步中同步，什么鬼？）

    async/await 是我们在 ASP.NET 应用程序中,写异步代码最常用的两个关键字,使用它俩,我们不需要考虑太多背后的东西,比如异步的原理等等,如果你的 ASP.NET 应用程序是异步到底的, ...

  8. 关于JqueryEasyUI集合Kindeditor

    写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...

  9. 小菜学习Winform（六）剪切板和拖放复制

    前言 在做winform项目的时候有时候会用到复制粘贴,在.net中提供了Clipboard类来操作剪切板,我们来看下. clipbrd.exe clipbrd是系统剪切板程序,但是在vista及以上 ...

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

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