body{
margin: 0;
height: 100%;
box-sizing: border-box;
background-color: black;
position: relative;
color: white;
}
#bg{
width: 100%;
height: 100%;
background-image: url(bg.jpg);
background-size: auto 100%;
background-position:10% center;
background-repeat: no-repeat;
/*滤镜效果;blur:模糊度(模糊程度);
自己查滤镜效果有哪些*/
filter: blur(10px);
}
main{
/*定位*/
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
header{
margin-bottom: 5rem;
}
header span:nth-child(1){
/*左浮动*/
float: left;
position: relative;
top: 1rem;
left: 1rem;
}
header span:nth-child(2){
position: relative;
top: 1rem;
}
header span:nth-child(3){
/*右浮动*/
float: right;
position: relative;
top: 1rem;
right: 1rem;
}
#head{
width: 15%;
/*随着main的大小变化,但是有上限*/
max-width: 200px;
border-radius: 50%;
}
#account,#password{
width: 70%;
margin: 3rem auto;
border-bottom: 2px solid lightgray;
text-align: left;
padding-bottom: 0.5rem;
font-size: 1.2rem;
}
#password span:nth-child(2){
/*调整密码圆点的字符间距
letter:字母
space:空间,间距*/
letter-spacing: 0.3rem;
}
#login{
width: 70%;
line-height: 4rem;
margin: 2rem auto;
background-color: green;
border-radius: 10px;
font-size: 1.3rem;
}
footer img{
width: 4rem;
}
<section id="bg"></section>
<main>
<header>
<span>返回</span>
<span>登录</span>
<span>注册</span>
</header>
<!--头像-->
<img id="head" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img.jpg" alt="头像">
<!--账号-->
<section id="account">
<!-- 中文空格-->
<span> 账号 1156669337@qq.com</span>
</section>
<!--密码-->
<section id="password">
<!--圆点;
这些符号的编码可以从word办公软件中获取-->
<span> 密码 </span>
<span></span>
</section>
<!--登录-->
<section id="login">登录</section>
<!--忘记密码-->
<section id="forget">忘记密码?</section>
<!--第三方登录-->
<footer>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="weibo.png" alt="采用微博登录">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="qq.png" alt="采用qq登录">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="weixin.png" alt="采用微信登录">
</footer>
</main>
</body>
点击查看更多内容
9人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦