版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/84646776
效果图:
源码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- 适配手机-->
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<style>
* {
margin: 0px;
padding: 0px;
}
.biaoti {
/*弹性盒子*/
display: flex;
/*子元素水平均匀排列*/
justify-content: space-between;
/*竖直居中*/
align-items: center;
width: 100%;
height: 45px;
background-color: cornflowerblue;
color: #fff;
/*相对于窗口浮在最上面*/
position: fixed;
left: 0px;
top: 0px;
}
.btImg {
width: 18px;
height: 18px;
margin-left: 5px;
}
.btZhuCe {
font-size: 12px;
color: #fff;
margin-right: 10px;
}
.image {
width: 90px;
height: 90px;
/*设置为块级元素*/
display: block;
/*水平居中*/
margin: 0 auto;
/*距离顶部65px*/
margin-top: 85px;
}
.content {
width: 257px;
margin: 0 auto;
margin-top: 65px;
}
.shuru {
width: 257px;
height: 45px;
/*竖直居中*/
/*弹性盒子*/
display: flex;
align-items: center;
/*子布局在父布局的左右两端*/
justify-content: space-between;
/*添加底边框*/
border-bottom: 1px #CCC solid;
/*超出部分隐藏*/
overflow: hidden;
}
.icon {
width: 17px;
height: 17px;
}
.shurukaung {
width: 235px;
height: 45px;
/*去掉外边线*/
outline: none;
/*去掉边框*/
border: none;
}
.denglu {
width: 100%;
border-radius: 5px;
line-height: 45px;
text-align: center;
color: #fff;
background-color: cornflowerblue;
margin-top: 15px;
}
.tongyi {
height: 30px;
/*弹性盒子*/
display: flex;
/*子元素从左到右排列*/
justify-content: flex-start;
/*子元素竖直居中*/
align-items: center;
}
.tongyibuju {
height: 30px;
/*弹性盒子*/
display: flex;
/*子元素从左到右排列*/
justify-content: flex-start;
/*子元素竖直居中*/
align-items: center;
}
.tongyiImg {
width: 15px;
height: 15px;
}
.tongyiWenZi {
margin-left: 5px;
}
.xieyi {
color: cornflowerblue;
}
.kefu {
width: 100%;
line-height: 45px;
text-align: center;
margin-top: 90px;
color: #999;
}
</style>
</head>
<body>
<div class="biaoti">
<img class="btImg" src="img/back.png">
<span>登录</span>
<span class="btZhuCe">注册</span>
</div>
<img class="image" src="img/linkgap_icon2.png">
<div class="content">
<div class="shuru">
<img class="icon" src="img/login_username.png">
<input class="shurukaung" type="text" placeholder="用户名">
</div>
<div class="shuru">
<img class="icon" src="img/login_password.png">
<input class="shurukaung" type="text" placeholder="密码">
</div>
<div class="denglu">登录</div>
<!-- 协议-->
<div class="tongyi">
<div onclick="onCheck();" class="tongyibuju">
<img id="tongyiImg" class="tongyiImg" src="img/login_agree1.png">
<div class="tongyiWenZi">同意</div>
</div>
<div class="xieyi">《服务协议》</div>
</div>
</div>
<!-- 客服电话-->
<div class="kefu">客服电话:400-168-0808</div>
<script>
var istrue = false;
function onCheck() {
var tongyiimg = document.getElementById("tongyiImg");
if (istrue) {
console.log("同意");
tongyiimg.src = "img/login_agree1.png";
istrue = false;
} else {
tongyiimg.src = "img/login_noagree.png";
console.log("不同意");
istrue = true;
}
}
</script>
</body>
</html>
源码下载
https://download.csdn.net/download/zhaihaohao1/10818970