您的位置：首页 > Web前端 > CSS

CSS 实现系统登录界面（一）

2016-08-11 18:31 453 查看

设置页面背景被全部覆盖实现过程中出现，图片周边存在边框，白边。这个边是 body 标签的边框，去除边框实现代码详细如下：

<bodystyle="margin:0">

可除去页面的边界。

设置登录界面中提交表单的文本框位置，可以通过 div 标签的相对位置实现。同时，设置文本是否显示在图层之上可以通过图层索引实现。

<div id="Layer1" style="position:relative; width:100%; height:100%; z-index:-1;top:0px;left:0px;margin:0;">

<div style="position: absolute;z-index:5;left:0;top:5%; width:100%;text-align: center">

<div style="position: absolute;z-index:5;left:0;top:20%; width:100%;">

保证在div之中，各个模块的排列分布。

详细代码实现如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 登陆界面 </title>
</head>

<body style="margin: 0;">
<div id="Layer1" style="position:relative; width:100%; height:100%; z-index:-1;top:0px;left:0px;margin:0;">
<img src="000.jpg" height="100%" width="100%" />
<div style="position: absolute;z-index:5;left:0;top:5%; width:100%;text-align: center">
<h1 style="text-align: center;font-size: 48px">
* * 管理系统
</h1>
</div>

<!--<div  style="position: absolute;z-index:5;left:42%;top:20%; width:100%;">-->

<!--<div class="container">-->
<!--<h1 class="gdName" style="text-align: center;font-size: 48px"> **** 系统</h1>-->
<!--<div class="login">-->
<!--<form id="loginForm">-->
<!--<input class="form-control" type="text"  name="username" id="inputEmail" value=""  placeholder="12位员工编号" required autofocus>-->
<!--<input class="form-control" type="password"  name="password" id="inputPassword" value="" placeholder="密码" required>-->
<!--<p id="loginInfo"></p>-->
<!--<button type="button" class="btn btn-primary btn-block" id="loginButton">登录</button>-->
<!--<div class="checkbox">-->
<!--<input id="me" value="me" name="rememberMe" type="checkbox" value="remember-me" style="position: relative;"><label for="me" style="padding-left: 1px">记住密码</label>-->
<!--</div>-->
<!--</form>-->
<!--</div>-->
<!--</div>-->

<div style="position: absolute;z-index:5;left:0;top:20%; width:100%;">
<center>
<form action = "login_check.jsp" method = "post">
<table border = "1">
<tr>
<td colspan = "2">
用户登录
</td>
</tr>
<tr>
<td>
用户昵称
</td>
<td>
<input class="form-control" type="text"  name="username" id="inputEmail" value=""  placeholder="12位员工编号" required autofocus>
</td>
</tr>
<tr>
<td>
用户密码
</td>
<td>
<input class="form-control" type="password"  name="password" id="inputPassword" value="" placeholder="密码" required>
</td>
</tr>
<tr>
<td colspan = "2">
<input type = "submit" value = "登陆">
<input type = "reset" value = "重置">
</td>
</tr>
<tr>
</tr>
</table>
</form>
</center>
</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

CSS 实现 系统登录界面 （一）

CSS 实现系统登录界面（一）