稍微好看点的登录页面html

预览图如下，图片自己配,小图标到阿里矢量库自己找

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org"><head>
<meta charset="utf-8">
<title>login</title>
<style type="text/css">
*{margin: 0;padding: 0;
}
html{
background-image:url(/static/background.jpg);
}
#wrap {height: 75%;width: 100;background-image:url(/static/background.jpg);background-repeat: no-repeat;background-position: center center;position: relative;
}
#head {height: 46px;width: 100;background-color: #66CCCC;text-align: center;position: relative;
}
#wrap .logGet {height: 408px;width: 368px;  position: absolute;background-color: #FFFFFF;top: 20%;right: 15%;
}
.logC a button {width: 100%;height: 45px;background-color: #ee7700;border: none;color: white;font-size: 18px;
}
.logGet .logD.logDtip .p1 {display: inline-block;font-size: 28px;margin-top: 30px;width: 86%;
}
#wrap .logGet .logD.logDtip {width: 86%;border-bottom: 1px solid #ee7700;margin-bottom: 60px;margin-top: 0px;margin-right: auto;margin-left: auto;
}
.logGet .lgD img {position: absolute;top: 12px;left: 8px;
}
.logGet .lgD input {width: 100%;height: 42px;text-indent: 2.5rem;
}
#wrap .logGet .lgD {width: 86%;position: relative;margin-bottom: 30px;margin-top: 30px;margin-right: auto;margin-left: auto;
}
#wrap .logGet .logC {width: 86%;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;
}.title {font-family: "宋体";color: #FFFFFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */font-size: 36px;height: 40px;width: 30%;
}.copyright {font-family: "宋体";color: #FFFFFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */height: 60px;width: 40%;text-align:center;
}.copyright .img .icon {display: inline-block;width: 24px;height: 24px;margin-left: 22px;vertical-align: middle;
/*  background-image: url(th:'@{/static/41a5da805fd87a785882119e9ff84d8e.jpg}');*/background-repeat: no-repeat;vertical-align: middle;margin-right: 5px;
}.copyright .img .icon1 {display: inline-block;width: 24px;height: 24px;margin-left: 22px;vertical-align: middle;background-image: url(%E5%9C%B0%E5%9D%80.png);background-repeat: no-repeat;vertical-align: middle;margin-right: 5px;
}
.copyright .img .icon2 {display: inline-block;width: 24px;height: 24px;margin-left: 22px;vertical-align: middle;background-image: url(%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.png);background-repeat: no-repeat;vertical-align: middle;margin-right: 5px;
}
</style>
</head><body>
<div class="header" id="head"><div class="title">在线考试系统</div></div><div class="wrap" id="wrap"><div class="logGet"><!-- 头部提示信息 --><div class="logD logDtip"><p class="p1">登录</p></div><!-- 输入框 --><div class="lgD"><img th:src="@{/static/user.png}" src="../static/user.png" width="20" height="20" alt=""/><input type="text"placeholder="输入用户名"  name="userAccount" id="userAccount" value=""/><span ></span></div><div class="lgD"><img th:src="@{/static/pwd.png}" src="../static/pwd.png" width="20" height="20" alt=""/><input type="password"placeholder="输入用户密码" name="userPwd" id="userPwd"/><span ></span></div><div class="logC"><a href="#" id="loginButton"><button>登 录</button></a></div></div>
</div>
</body>
<script type="text/javascript" th:src="@{/static/js/jquery-3.2.1.min.js}" ></script>
<script type="text/javascript" th:src="@{/static/js/login.js}" ></script>
<script type="text/javascript"  th:src="@{/static/js/ajaxUtil.js}"></script>
</html>

稍微好看点的登录页面html相关推荐

好看的前端登录页面（HTML+CSS）
效果图代码 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
html好看的登录页面1（十三种风格登录页面源码）
文章目录 1.登录风格效果说明 1.1 背景凹起风登录界面 1.2 弹出风登录界面 1.3 科技时尚风登录界面 1.4 蓝色一夏风登录界面 1.5 模糊背景左右风登录界面 1.6 上中下介绍风登录界面 ...
直播系统app源码，简洁好看的登录页面
直播系统app源码,简洁好看的登录页面 1.html <!DOCTYPE html> <html lang="en"> <head><me ...
Android:基础控件按键文本框输入框制作登录页面
基础控件之Button,TextView,EditText,ImageView Button:按键 TextView:文本框 EditText:输入框 ImageView:图片那我们新建一个工程研究 ...
Vue + Spring Boot 项目实战（四）：前后端结合测试（登录页面开发）
前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下: ①打通前后端之间的联系,为接下来的开发打下基础 ②登录页面的开发(无数据库情况下) 文章目录一.后端项目创建 1.1. 项目/ ...
软件测试面试 (二) 如何测试网页的登录页面
这个面试题碰到过很多次, 再次总结下来. 具体需求: 有一个登陆页面, 上面有2个textbox, 一个提交按钮. 请针对这个页面设计30个以上的test case. 此题的考察目的: 面试者是否熟 ...
Emlog5.31后台登录页面自适应源码
简介: 给大家带来一个Emlog5.31后台登录页面自适应源码非常好看. admin\views\css 里面的文件全部放到你的admin\views\css 里面去 admin\views\log ...
非常漂亮的后台登录页面
介绍: 大家好这里是好呆今天给大家更新一期正规源码吧这里一款非常不错的后台登录页面这个ui个人觉得非常好看就给大家搞了一下希望大家多多支持一下会持续给大家更新许多好玩的源码! 源码仅仅是 ...
linux下服务器重定向,linux – DHCP服务器将任何URL重定向到登录页面
我有一个Linux DHCP服务器,我需要将所有网络流量重定向到一个登陆页面,该登陆页面将提供有关如何在网络上注册计算机的说明. 无论用户输入什么URL,都需要将用户重定向到网页(在DHCP服务器上) ...

稍微好看点的登录页面html

稍微好看点的登录页面html相关推荐

最新文章

热门文章