效果图
我们先要明白网页是怎么做出来的
将背景去掉
只剩下一个框
三个input 标签
一个btn标签
将这些标签全集中在一起
用一个div标签全部装起来
然后再利用a标签或者是利用其他标签
在框内写出自己想要的样试
然后把 标签放在一起
再将css样试写上
把定位标签
得到的初始化结果可能是这样
然后在css中修改文件的样试
在定位中修改位置摆放
放几张图片
就完成了
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<style>
body {
padding:0;
/* margin:0 */
overflow:hidden;
background-image:url(bg1.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
canvas {
padding:0;
margin:0;
opacity:0.25;
}
div.btnbg {
position:fixed;
left:0;
top:0;
}
</style>
<div class="loginmain">
<div class="login-title">
<span>管理员登录</span>
</div>
<div class="login-con">
<div class="login-user">
<div class="icon">
<img src="image/user_icon_copy.png" alt="">
</div>
<input type="text" name="usernem" placeholder="用户名" autocomplete="off" value="">
</div>
<div class="login-pwd">
<div class="icon">
<img src="image/lock_icon_copy.png" alt="">
</div>
<input type="password" name="pwd" placeholder="密码" autocomplete="off" value="">
</div>
<div class="login-yan">
<div class="icon">
<img src="image/key.png" alt="">
</div>
<input type="text" name="pwd" placeholder="验证码" autocomplete="off" value="">
</div>
<div class="login-btn">
<input type="button" value="登录">
</div>
</div>
</div>
</body>
</html>
更多推荐
用DW登简单制作登入页面
发布评论