超简单的html登录界面

超简单的静态登陆界面

适合初学html的同学

演示效果如下图

可以自己改背景啥的

html代码如下

<!DOCTYPE html>
<html lang="zh-CN"><!-- <html lang="zh-CN"> 向搜索引擎表示该页面是html语言，并且语言为中文网站，其"lang"的意思就是“language”，语言的意思，而“zh”即表示中文 --><head><meta charset="utf-8"><!--声明文档兼容模式，表示使用IE浏览器的最新模式，告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE8引擎来渲染页面。--><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>登陆</title><!-- 引入jQuery核心js文件 --><script src="js/jquery-1.11.3.min.js"></script><!-- 引入BootStrap核心js文件 --><script src="js/bootstrap.min.js"></script><!-- 引入Bootstrap核心样式文件 --><link href="css/bootstrap.css" rel="stylesheet"><style type="text/css">body{background: url("img/background.jpg") no-repeat center center fixed;/*兼容浏览器版本*/-webkit-background-size: cover;-o-background-size: cover;                background-size: cover;} /*背景图*/.test {margin-top: 100px;}</style></head><body><div class="row" ><div class="col-md-4"></div> <div class="col-md-4"   style="background-color: #aaaaaa; opacity:0.8;margin-top: 250px;" ><h1 class="text-center"   style="padding-top:50px;  " >用户登录</h1><form class="form-horizontal " role="form"  action="/WebLog/login" method="post"  ><div class="form-group  "><label for="" class="col-sm-2 control-label">账号</label><div class="col-sm-10"><input type="text" class="form-control" name="username" id=""      placeholder="请输入账号"></div></div><div class="form-group"><label for="lastname" class="col-sm-2 control-label">密码</label><div class="col-sm-10"><input type="password" class="form-control" id="lastname" name="password" placeholder="请输入密码"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox">记住密码</label><label class="col-sm-offset-1"  ><input type="checkbox">自动登录</label><a  class="col-sm-offset-1" href="">忘记密码</a></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">登录</button><a type="submit" class="btn btn-default col-sm-offset-4 " href="register.jsp" >注册</a></div></div></form></div> <div class="col-md-4"></div> </div></body>
</html>

压缩包下载地址

链接：https://pan.baidu.com/s/1sPeX92gEzRvpxvzhWaE_Jg
提取码：wf56

超简单的html登录界面相关推荐

一个简单的用户登录界面
今天我们学习了如何实现一个简单的用户登陆界面,具体要用到两个jsp和一个servlet,具体操作如下: 首先创建一个用户登录界面,inputview.jsp,其源代码如下所示: <!DOCTYP ...
Java简单的用户登录界面+MySQL
1 概述一个简单的Swing登录界面,使用了简单的JDBC. 如图: 2 UI 2.1 主界面主界面使用了31网格布局+三个JPanel,中间的JPanel使用了22网格布局: import ja ...
简单的EasyUI登录界面
使用easyui自带的样式等,做的一个简单的登录界面,效果如下: <!DOCTYPE html> <html> <head><meta name=" ...
用Android Studio设计一个简单个性的登录界面
一.用到的组件: LinearLaout.TableLayout.FrameLayout.RelativeLout 二.效果图展示: 三.步骤及过程: 1.首先新建一个Project,并在app -& ...
php开发路由器界面,PHP制作简单仿路由器登录界面
在php中,可以使用Header函数用户验证: Header('WWW-Authenticate: Basic realm="USER LOGIN"'); Header('HTTP ...
QT学习-超漂亮的软件登录界面模块
开发环境: window10.QT Create5.14.2 封装形式生成动态库,包含.dll文件..a文件.h文件调用方式把dll动态库..a文件.h文件添加进自己的工程,在弹出软件主界面之前 ...
PHP制作简单仿路由器登录界面
在php中,可以使用Header函数用户验证: Header('WWW-Authenticate: Basic realm="USER LOGIN"'); Header('HTTP ...
css实现超有趣的熊猫登录界面
利用css实现带有熊猫背景的登录界面,输入密码时熊猫会把输入框向上举起遮住眼睛效果图: <!DOCTYPE html> <html lang="zh">& ...
在 Android Studio 中创建一个简单的 QQ 登录界面
一,创建一个新的 Android Studio 项目打开 Android Studio,选择 "Start a new Android Studio project",然后填写应 ...
php登录界面模板美化,一款简单好看的登录界面——Typecho美化包 Sign-Page-For-Typecho...
Loading... 一款对Typecho后台登录的美化首发于 MBRBlog 和 Github ![ ][1] ---------- 源码包只有200KB,总体制作时间为一周,开发者为学生党,不定 ...

超简单的html登录界面

超简单的html登录界面相关推荐

最新文章

热门文章