<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: url(img/bg.jpg) no-repeat center center;
background-size: cover;
}
.main {
width: 370px;
height: 380px;
position: absolute;
left: 50%;
top: 50%;
box-sizing: border-box;
padding: 25px 30px;
margin-left: -185px;
margin-top: -190px;
border-radius: 5px;
background-image: url("img/tmbg-white.png");
}
.main > h1 {
color: #333;
font-size: 24px;
font-weight: lighter;
text-align: center;
}
.username, .password, .verification-code {
margin-top: 20px;
position: relative;
}
.username {
margin-top: 25px;
}
.username > input, .password > input, .verification-code > input {
width: 100%;
height: 46px;
font-size: 16px;
box-sizing: border-box;
padding: 10px;
border: 1px solid #ddd;
outline: 0 none;
line-height: 24px;
border-radius: 3px;
}
.username > i, .password > i {
width: 20px;
height: 20px;
position: absolute;
top: 9px;
right: 15px;
}
.username > i {
background-image: url("img/username.png");
}
.password > i {
background-image: url("img/password.png");
}
.verification-code > input {
padding-right: 41px;
}
.verification-code > img {
width: 100px;
height: 44px;
position: absolute;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #ddd;
right: 1px;
top: 1px;
}
.login-btn {
width: 100%;
height: 46px;
color: #fff;
font-size: 16px;
margin-top: 30px;
outline: 0 none;
border: solid 1px #0ae;
border-radius: 3px;
text-align: center;
background-color: #0ae;
}
</style>
</head>
<body>
<div class="main">
<h1>尚学堂人事管理系统</h1>
<form action="login.jsp">
<div class="username">
<input type="text" placeholder="登录账号">
<i></i>
</div>
<div class="password">
<input type="password" placeholder="登录密码">
<i></i>
</div>
<div class="verification-code">
<input type="text" placeholder="填写右侧的验证码">
<img src="img/passcode.jpg" alt="验证码">
</div>
<input type="submit" class="login-btn" value="登录">
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*清除默认样式start*/
* {
padding: 0;
margin: 0;
}
body {
font-family: arial;
}
ul {
list-style: none;
}
.clearfix {
clear: both;
visibility: hidden;
font-size: 0;
line-height: 0;
height: 0;
}
/*清除默认样式end*/
/*设置导航栏样式start*/
.nav-list {
float: right;
margin-right: 15px;
}
.nav-list > li {
float: left;
}
.nav-list > li > a {
display: inline-block;
margin: 10px 2px;
padding: 0px 5px;
color: #333;
font-size: 13px;
font-weight: 600;
line-height: 24px;
}
.nav-list > li > a:hover {
color: #00c;
}
.nav-list > .more > a {
background-color: blue;
border-radius: 2px;
color: white;
text-decoration: none;
}
/*设置导航栏样式end*/
/*搜索模块start*/
.search-box {
/*background-color: blue;*/
}
/*设置logon图片*/
.search-box > .logo {
width: 270px;
margin: 0 auto 20px;
}
/*设置搜索框和提交按钮并排显示*/
.search, input[type="submit"] {
float: left;
}
/*美化搜索框和提交按钮*/
.search > input {
width: 540px;
height: 38px;
/*设置为怪异盒子模型*/
box-sizing: border-box;
}
input[type="submit"] { /*默认为怪异盒子模型*/
width: 100px;
height: 38px;
background-color: #3385ff;
color: #fff;
border: 1px solid #2d78f4;
}
/*设置整个搜索模块左右居中*/
.search-box {
width: 640px;
margin: 25px auto 0;
}
/*优化操作*/
.search > input {
/*清除搜索框右侧的边框*/
border: 1px solid #ccc;
/*transparent: 透明*/
border-right-color: transparent;
/*清除处于编辑状态的蓝色边框*/
outline: 0 none;
/*设置光标位置*/
padding-left: 7px;
}
/*添加小相机*/
.search {
position: relative;
}
.search > i {
/*display: inline-block;*/
height: 16px;
width: 18px;
background-image: url(baidu/xj.png);
background-repeat: no-repeat;
position: absolute; /*子绝父相*/
top: 9px;
right: 7px;
}
.search > i:hover {
background-position: 0 -20px;
}
/*搜索模块end*/
/*底部模块start*/
.footer {
margin: 200px 0 0;
}
/*二维码设置start*/
.footer > .QRCode {
width: 60px;
margin: 0 auto 10px;
}
.footer > .QRCode > i {
display: inline-block;
width: 60px;
height: 60px;
background: url("baidu/zbios_efde696.png") no-repeat;
}
.footer > .QRCode > p {
text-align: center;
line-height: 23px;
color: #666;
font-weight: 700;
font-size: 12px;
}
/*二维码设置end*/
.footer {
margin-bottom: 30px;
}
.footer-txt {
text-align: center;
}
.footer-txt > a, .footer-txt > span {
display: inline-block;
color: #999;
font-size: 12px;
line-height: 23px;
}
.footer-first > a , .footer-txt > .footer-last{
margin: 0 10px;
}
.footer-txt > .tag {
display: inline-block;
background-image: url(baidu/icons_5859e57.png);
background-repeat: no-repeat;
width: 14px;
height: 17px;
position: relative;
top: 3px;
}
.footer-txt > .tag1 {
background-position: -600px -96px;
left: -1px;
}
.footer-txt > .tag2 {
background-position: -623px -96px;
left: -12px;
}
/*底部模块end*/
</style>
</head>
<body>
<!--导航模块start-->
<div class="nav">
<ul class="nav-list">
<li><a href="#">新闻</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">学术</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">设置</a></li>
<li class="more"><a href="#">更多产品</a></li>
</ul>
<!--清除浮动-->
<div class="clearfix"></div>
</div>
<!--导航模块end-->
<!--搜索框模块start-->
<div class="search-box">
<!--logo图片模块-->
<div class="logo">
<img width="270px" src="baidu/bd_logo1.png" alt="图片加载失败">
</div>
<!--搜索框和小相机-->
<div class="search">
<input type="text"> <!--输入框-->
<i></i> <!--小相机-->
</div>
<!--提交按钮-->
<input type="submit" value="百度一下">
</div>
<!--搜索框模块end-->
<!--底部模块start-->
<div class="footer">
<!--二维码-->
<div class="QRCode">
<i></i> <!--二维码背景图片-->
<p>百度</p>
</div>
<p class="footer-txt footer-first">
<a href="#">把百度设为主页</a>
<a href="#">关于百度About</a>
<a href="#">About Baidu</a>
<a href="#">百度推广</a>
</p>
<p class="footer-txt">
<span>©2018 Baidu</span>
<a href="#">使用百度前必读</a>
<a href="#">意见反馈</a>
<span>京ICP证030173号</span>
<i class="tag tag1"></i>
<a href="#" class="footer-last">京公网安备11000002000001号</a>
<i class="tag tag2"></i>
</p>
</div>
<!--底部模块end-->
</body>
</html>
