前端项目3-01：登录页面

一、效果图

二、全部代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>码农魔盒</title><style>.bg{position: fixed;top: 0;left:0;object-fit: cover;width: 100vw;height: 100vh;}.box{width: 950px;height: 450px;box-shadow: 0 5px 15px rgba(0,0,0,.8);display: flex;position: fixed;top: 50%;left:50%;transform: translate(-50%,-50%);box-sizing: border-box;padding: 20px;background: rgba(47,1,74,.8);}.left{width: 65%;}.left>img{display: block;width: 100%;height: 100%;object-fit: cover;}.right{width: 35%;height: 100%;box-sizing: border-box;padding: 0 20px;}h1{color: #fff;text-align: center;margin-top: 45px;}.inputItem{height: 44px;padding: 0;padding-left: 8px;border: none;background: #fff;outline: none;width: 100%;font-size: 16px;margin-top: 20px;}.btn{background: linear-gradient(to right,#65CBF7,#B3A5FC);box-shadow: 0 5px 15px rgba(255, 255, 255, .6);color: #9C3493;font-weight: bold;border: none;border-radius: 30px;height: 46px;width: 100%;font-size: 18px;display: block;margin: auto;margin-top: 50px;}</style></head><body><img src="img/bg.jpg" alt="" class="bg"><div class="box"><div class="left"><img src="img/bg.jpg" alt=""></div><div class="right"><h1>用户登录</h1><input type="text" class="inputItem" placeholder="请输入账号"><input type="password" class="inputItem" placeholder="请输入密码"><button class="btn">登录</button></div></div></body>
</html>

三、代码详解

.bg{position: fixed;top: 0;left:0;object-fit: cover;width: 100vw;height: 100vh;
}

position: fixed：固定定位，相对于浏览器窗口
top:0; left:0：从左上角开始
object-fit: cover：图片覆盖整个区域，可能会裁剪
100vw/100vh：占满整个视口宽度和高度

.box{width: 950px;height: 450px;box-shadow: 0 5px 15px rgba(0,0,0,.8);display: flex;position: fixed;top: 50%;left:50%;transform: translate(-50%,-50%);box-sizing: border-box;padding: 20px;background: rgba(47,1,74,.8);
}

box-shadow：添加阴影效果，增强立体感
display: flex：使用 Flexbox 布局
top:50%; left:50%：定位到页面中心
transform: translate(-50%,-50%)：向上向左移动自身宽高的 50%，实现精确居中
box-sizing: border-box：让内边距包含在元素总宽高内
rgba(47,1,74,.8)：半透明深紫色背景

.left{width: 65%;
}
.left>img{display: block;width: 100%;height: 100%;object-fit: cover;
}

.left：左侧区域占 65% 宽度
display: block：将图片转为块级元素
object-fit: cover：图片覆盖整个区域

.right{width: 35%;height: 100%;box-sizing: border-box;padding: 0 20px;
}

.right：右侧区域占 35% 宽度
padding: 0 20px：左右内边距 20px

h1{color: #fff;text-align: center;margin-top: 45px;
}

color: #fff：白色文字
text-align: center：文字居中对齐
margin-top: 45px：顶部外边距 45px

.inputItem{height: 44px;padding: 0;padding-left: 8px;border: none;background: #fff;outline: none;width: 100%;font-size: 16px;margin-top: 20px;
}

height: 44px：统一高度 44px
padding-left: 8px：左侧内边距 8px
border: none：无边框
outline: none：取消聚焦时的默认边框
width: 100%：宽度占满父容器

.btn{background: linear-gradient(to right,#65CBF7,#B3A5FC);box-shadow: 0 5px 15px rgba(255, 255, 255, .6);color: #9C3493;font-weight: bold;border: none;border-radius: 30px;height: 46px;width: 100%;font-size: 18px;display: block;margin: auto;margin-top: 50px;
}

linear-gradient：从左到右的渐变色背景
box-shadow：白色半透明阴影
color: #9C3493：深紫色文字
border-radius: 30px：圆角边框
margin: auto：水平居中
margin-top: 50px：顶部外边距 50px

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/86569.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/86569.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！