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

一、效果图

二、全部代码

	
		
		
		
	
	
		

			

				
			
			

				
Login
				
				
				forget password?
				Login
			
		
	

三、代码详解

1.主体部分

    

        

            
        
        

            
Login
            
            
            forget password?
            Login
        
    

• .box - 主容器，包含左右两部分
• .left - 左侧区域，显示图片
• .right - 右侧区域，包含登录表单
  • 标题："Login"
  • 用户名输入框
  • 密码输入框
  • 忘记密码链接
  • 登录按钮

---

2.样式设计

body{
    background: linear-gradient(to right,#65CBF7,#B3A5FC);
    width: 100vw;
    height: 100vh;
    margin: 0;
}

• 背景使用从左到右的渐变，从浅蓝色到浅紫色
• 宽度和高度设置为整个视口大小
• 移除默认边距

.box{
    width: 60%;
    height: 450px;
    box-shadow: 0 5px 15px rgba(0,0,0,.8);
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

• 主容器宽度为视口的 60%，高度 450px
• 添加阴影效果增强立体感
• 使用 flex 布局
• 固定定位并居中显示

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

• 左侧区域占 65% 宽度
• 图片设置为块级元素
• 图片宽度和高度占满整个左侧区域
• object-fit: cover 确保图片覆盖整个区域，可能会裁剪部分内容

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

• 右侧区域占 35% 宽度
• 背景为白色
• 使用 border-box 盒模型
• 左右内边距 20px

.inputItem{
    height: 44px;
    padding: 0;
    padding-left: 5px;
    border: none;
    background: none;
    outline: none;
    border-bottom: 3px solid #B3A5FC;
    width: 100%;
    font-size: 18px;
    margin-top: 20px;
}

• 输入框高度 44px
• 无边框，只有底部有 3px 宽的紫色边框
• 无背景色
• 无聚焦边框（outline）
• 宽度占满父容器
• 字体大小 18px
• 顶部外边距 20px

.btn{
    background: linear-gradient(to right,#65CBF7,#B3A5FC);
    color: #9C3493;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    height: 46px;
    width: 80%;
    font-size: 18px;
    display: block;
    margin: auto;
    margin-top: 30px;
}

• 按钮使用与背景相同的渐变效果
• 文字颜色为深紫色
• 粗体文字
• 无边框
• 圆角 30px
• 高度 46px，宽度为父容器的 80%
• 块级元素，居中显示
• 顶部外边距 30px

/* 适配PC */
@media screen and (min-width:960px){
    .box{
        max-width: 950px;
        min-width: 750px;
    }
}

/* 适配ipad */
@media screen and (max-width:960px){
    .box{
        display: block;
        height: auto;
    }
    .left,.right{
        width: 100%;
        margin-top: 0;
    }
    .left{
        height: 200px;
    }
    .right{
        padding: 2vw 2vw;
    }
    h1{
        padding-top: 0;
        margin-bottom: 1vw;
    }
    .inputItem,.forgetPassword,.btn{
        margin-top: 2vw;
    }
}

/* 适配移动 */
@media screen and (max-width:750px){
    .box{
        width: 85%;
    }
}

• 大屏幕 (≥960px)：设置最大和最小宽度
• 平板设备 (≤960px)：
  • 将 flex 布局改为块级布局
  • 左右区域都占满宽度
  • 左侧图片高度固定为 200px
  • 使用视口单位 (vw) 调整间距
• 移动设备 (≤750px)：
  • 主容器宽度调整为 85%