实现一个好看通用且响应式布局，自适应的登录/注册页面

实现一个好看通用且响应式布局，自适应的登录/注册页面

提示：以下是本篇文章正文内容，下面案例可供参考

一、页面设计？

页面设计了一个滑动的效果，一个盒子里一边为登录一边为注册，然后中间有一个遮挡盒子，遮挡盒子通过左右滑动，实现显示登录页面还是注册页面。然后登录与注册的表单输入里添加了一个blur事件，label与input好像存在一种里外的错觉感，十分吸引人。然后给整个页面添加了@media 实现了响应式布局。并且轮播图和它的文字也采用了动画的效果。轮播图按钮通过jsdata-value绑定属性 使下面按钮与轮播图相对应。

效果图:

 当我们点击上面的sign in or sign up 时，遮挡盒子通过左右滑动，实现显示登录页面还是注册页面

二、页面整体布局

以下是对整个页面布局的解释：

1. 代码包含一个

   标签，表示页面的主要内容。

2. 表单部分包含两个

   标签，分别是登录表单和注册表单。

3. 每个表单都包含一个

   标签，用于包含表单的各个元素。

4. 每个表单都包含一个

   标签，用于包含表单的标题和切换按钮。

5. 每个表单都包含一个

   标签，用于包含表单的实际输入字段。

6. 每个表单都包含一个标签，用于提交表单。

7. 每个表单都包含一个

   标签，用于包含其他相关信息，例如忘记密码链接和服务条款。

8. 轮播图部分包含一个

   标签，用于包含轮播图的所有元素。

9. 轮播图部分包含一个

   标签，用于包含轮播图的图片和文本。

10. 轮播图部分包含一个

    标签，用于包含轮播图的小圆点。

11. 轮播图部分包含三个标签，用于显示轮播图的图片。

12. 轮播图部分包含一个

    标签，用于显示轮播图的文本。

总之，这段代码是一个简单的登录和注册表单以及轮播图的示例，可以用于Web开发中的登录和注册页面

    
    

        
        

            
            

                
                

                    
                    
                        
                        

                            
前端学习
                        
                        
                        

                            
欢迎回来
                            
Not registered yet?
                            Sign up
                        
                        
                        

                            
                            

                                
                                Name
                            
                            
                            

                                
                                Password
                            
                            
                            
                            
                            
忘记密码?
                                获取帮助
                            
                        
                    
                    
                    

                        
                        

                            
                            
前端学习
                        
                        
                        

                            
注册
                            
Already have an account?
                            Sign In
                        
                        
                        

                            
                            

                                
                                Name
                            
                            
                            

                                
                                Email
                            
                            
                            

                                
                                Password
                            
                            
                            
                            
                            
 注册前我已阅读并同意
                                服务条款和隐私协议
                            
                        
                    
                
                
                

                    
                    

                        
                        
                        
                    
                    
                    

                        
                        

                            

                                
开始你的学习旅程
                                
准备创造奇迹吧
                                
学习是一切创建力的开始
                            
                        
                        
                        

                            
                            
                            
                        
                    
                
            
        
    
    

三，样式设置

在整个页面样式布局里，我们主要采用flex弹性布局和grid布局。然后通过定位实现我们所在的位置。在这个页面里我们使用translate动画进行移动，采用left right进行布局分布。

/* 重置所有元素的内边距、外边距和盒模型为border-box */
*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 设置页面背景颜色、字体颜色和背景图片 */
body {
    color: #fff; /* 设置字体颜色为白色 */
    background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.fe2cb92a9809a66b8ea0b5046d1ed9aa?rik=%2fV8LlDUqV6ALpg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1308%2f17%2fc2%2f24561028_1376699679461.jpg&ehk=B6h1WTUP7MXtzYqgUfEXmcFR2epNpUivg8Ev2udBFXA%3d&risl=&pid=ImgRaw&r=0); /* 设置背景图片 */
    background-repeat: no-repeat; /* 设置背景图片不重复 */
    background-size: cover; /* 设置背景图片覆盖整个页面 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* 设置字体 */
}

/* 设置主要区域的样式 */
main {
    width: 100%; /* 设置主要区域的宽度为100% */
    overflow: