文章目录

• 前期准备：
• 步骤
• 整体代码
• 往期回顾

  ---

  前期准备：

  • 宽度 + 居中
  • 内边距
  • 表单

    步骤

    • 先准备一个框，作为登录界面的容器

      
      （图片来源网络，侵删）

      .frame{
                  height: 380px;
                  width: 600px;
                  margin: 150px auto 0;
                  border: 1px solid black;
              }
      

    • 将里面输入登录样式内容（表单）

        
      
          Email address
          
        
        
      
          Password
          
        
        
      
          File input
          
          
      Example block-level help text here.
        
        
      
          
             Check me out
          
        
        Submit
      
      

      • 修改上诉内容，改成自己需要的

        
            
        
                
        登录
                
                    
        
                        用户名
                        
                    
                    
        
                        密码
                        
                    
                    
        
                    登录
                    
                
            
        
        

            .frame {
                height: 380px;
                width: 500px;
                margin: 150px auto 0;
                border: 1px solid black;
                padding-top: 50px;
                padding-left: 100px;
                padding-right: 100px;
                box-shadow: 5px 5px 5px #aaa;
            }
            .text {
                text-align: center;
            }
            .button{
                margin-left:123px;
                margin-top: 10px;
            }
        
        

        整体代码

        
        
            
            Title
            
            
            
            
            
                .frame {
                    height: 380px;
                    width: 500px;
                    margin: 150px auto 0;
                    border: 1px solid black;
                    padding-top: 50px;
                    padding-left: 100px;
                    padding-right: 100px;
                    box-shadow: 5px 5px 5px #aaa;
                }
                .text {
                    text-align: center;
                }
                .button{
                    margin-left:123px;
                    margin-top: 10px;
                }
            
        
        
        
            
        
                
        登录
                
                    
        
                        用户名
                        
                    
                    
        
                        密码
                        
                    
                    
        
                    登录
                    
                
            
        
        
        
        

        [外链图片转存中…(img-KWx34OSG-1720206079524)]

        往期回顾

        1.【快速开发网站】

        2.【浏览器能识别的标签1】

        3.【浏览器能识别的标签2】

        4.【浏览器能识别的标签3】

        5.【浏览器能识别的标签4】

        6.【案例1：用户注册】

        7.【案例2：用户注册改进】

        8.【快速了解 CSS】

        9.【常用选择器概念讲解】

        10.【CSS基础样式介绍1】

        11.【CSS基础样式介绍2】

        12.【CSS基础样式介绍3】

        13.【CSS基础样式介绍3】

        14.【案例 小米商城头标】

        15.【案例 小米商城头标总结】

        16.【案例 小米商城二级菜单】

        17.【案例 商品推荐部分】

        18.【伪类简单了解】

        19.【position】

        20.【案例 小米商城中app图标代码】

        21.【边框及总结】

        22.【BootSrap初了解】

        23.【BootSrap的目录栏】

        24.【BootSrap的栅格系统】

        25.【案例 博客案例】