效果预览：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. MySQL常用命令和常见问题

    MySQL常用命令和常见问题 --创建数据库并设置字符集 create database wip default character set utf8 collate utf8_general_ci; ...

  2. 微小，但是美好的改变 G2 2.2发布

    G2 2.2.0, 『微小,但是美好的改变.』 # 一.丰富可视化交互形式 #### 选择: [图形的单选.多选](https://g2.alipay.com/tutorial/geom-select ...

  3. 没有水果机的也来体验下Visual Studio for Mac

    在去年微软已经宣布.NET将实现真正的跨平台,并且发布了Mac和Linux版的Visual Studio Code编辑器,但强大的Visual Studio确只有Windows版. 还坚守.NET开发 ...

  4. .Net 转战 Android 4.4 日常笔记（10）--ADT集成环境更新SDK

    今天下载了一份原来来参考,却发现SDK版本偏低我没有安装 用SDK Manager却一直更新不了出现 Failed to fetch URL https://dl-ssl.google.com/and ...

  5. 一起学微软Power BI系列-官方文档-入门指南(3)Power BI建模

    我们前2篇文章:一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍 和一起学微软Power BI系列-官方文档-入门指南(2)获取源数据 中,我们介绍了官方入门文档与获取 ...

  6. CSS之水平垂直居中

    在css的世界里,如果我们想让一个块级元素水平居中,想必大家都知道利用margin:0 auto;嘛,这样就可以让块级元素在它的父元素中水平居中了. 列如这样: <!DOCTYPE html&g ...

  7. 关于在BAE上部署ThinkPHP框架的问题

    现在有点小兴奋,因为在在BAE上部署ThinkPHP框架的问题快折腾一天了,午觉都没睡,不过没白整总算有点结果.不扯淡了,直入正题吧. 之前熟悉ThinkPHP框架,想在BAE上用ThinkPHP做点 ...

  8. 你真的了解load方法么？（转载）

    本文授权转载,作者:左书祺(关注仓库,及时获得更新:iOS-Source-Code-Analyze) 因为 ObjC 的 runtime 只能在 Mac OS 下才能编译,所以文章中的代码都是在 Ma ...

  9. 利用SkyDrive Pro 迅速批量下载SharePoint Server 上已上传的文件

    在上一篇<SharePoint Server 2013 让上传文件更精彩>,我们一起了解了如何快速的方便的上传批量文件到SharePoint Server 2013 ,而在这一篇日志中您将 ...

  10. 1Z0-053 争议题目解析520

    1Z0-053 争议题目解析520 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 520.Which of the following are not disabled by de ...