<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<style>
* {
margin: 0 auto;
padding: 0px;
}
body {
background-image: url(img/tp/tm-img-08.jpg);
/* 让这张图片他变成动态的 */
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.wrap {
border: 1px rgb(210, 54, 54);
width: 400px;
height: 400px;
background-image: url(img/tp/tm-img-03.jpg);
}
.header-ar {
width: 100%;
height: 400px;
border: 1px;
position: relative;
line-height: 50px;
}
h1 {
text-align: center;
font-family: 楷体;
}
.zhanghao {
position: relative;
left: 15%;
font-size: 20px;
top: 2%;
}
.shojihao-type1 {
position: relative;
left: 15%;
font-size: 20px;
top: 2%;
width: 200px;
}
.shojihao-type1:hover {
background-color: rgb(217, 207, 227);
}
.minma-2 {
position: relative;
left: 15%;
font-size: 20px;
top: 2%;
}
.shojihao-type2 {
position: relative;
left: 15%;
font-size: 20px;
top: 2%;
width: 200px;
}
.shojihao-type2:hover {
background-color: rgb(217, 207, 227);
}
.wjmm {
font-size: 15px;
position: relative;
left: 15%;
top: 3%;
}
a {
text-decoration: none;
padding: 0%;
}
.zhuc {
position: relative;
left: 0%;
font-size: 20px;
top: 2%;
}
.denglu {
position: relative;
left: 8%;
font-size: 20px;
top: 2%;
}
.xiahuaxian {
position: relative;
top: 30%;
float: left;
width: 36%;
}
.xiahuaxian1 {
position: relative;
top: 18%;
float: right;
width: 36%;
}
.gengduo-denglu {
position: relative;
top: 24%;
right: 20%;
}
.denglu-xianghei {
text-align: center;
border: 1px;
position: relative;
width: 40%;
top: 24%;
left: 0%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header-ar">
<h1>登录界面</h1>
<span class="zhanghao">账号</span>
<input class="shojihao-type1" type="text" placeholder="输入手机号"><br>
<span class="minma-2">密码</span>
<input class="shojihao-type2" type="password" placeholder="输入密码">
<span class="wjmm"><a href="">忘记密码?</a ></span><br />
<button class="zhuc">注册</button>
<button class="denglu">登录</button>
<hr class="xiahuaxian">
<span class="gengduo-denglu">更多登录</span>
<hr class="xiahuaxian1">
<div class="denglu-xianghei">
<a href="">< img src="qq.png" alt="" width="20px" height="20px"></a >
<a href="">< img src="微信.png" alt="" width="20px" height="20px"></a >
<a href="">< img src="邮箱.png" alt="" width="20px" height="20px"></a >
</div>
</div>
</div>
</body>
</html>
扫一扫
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
