CSS——网易云音乐之登录页面的实现

• 前言
• 一、结构的布局
• 二、实现过程
  • 1.HTML结构
  • 2.CSS样式
• 总结

        本文所要讲述的内容是关于网易云音乐登录页面的实现过程，在以往的文章里讲过，我会将网易云系列按时更新下去，千里之行始于足下，和我一样初学前端的小白可自行找一些练习项目，一些知识点还是要多多实践才会掌握的更加牢固，大家一起加油啊！

        在着手实现之前我们照例要分析结构，只有结构清楚明了，后面的CSS样式写起来才会较为轻松容易一些，所以如果是和我一样初学HTML，CSS 的小伙伴要写诸如这样的小demo时要学会分析结构，多思考、脑海里有大致的结构时再动手书写。大致的结构划分如下图所示：

1. 首先，还是整体用一个外部容器承载，随后可分为上下两个部分，即标题与下方白色方框区域。
2. 随后再划分中间结构，可看出中间区域四周都有外边距，将位置固定后，再书写具体左右两边的登录区域（左侧用户手机号登录区域，右侧多种登录方式选择区域）
3. 随后就是底部的同意服务条款区域（使用的是input 中的checkbox），以及右侧的二维码。

代码如下（示例）：

 
    
        
        
            登录
            ×
        
        
        
            
                
                
                    
                    手机号登录
                    注册
                
                
                

                    
微信登录
                    
QQ登录
                    
微博登录
                    
网易邮箱账号登录
                
            

        
        
        
            
            同意
            《服务条款》
            《隐私政策》
            《儿童隐私政策》
        
        
        
            
        
    

代码如下（示例）：

        以上就是今天所要分享的内容，好了，今天就写到这儿吧，依旧真挚祝福看到这篇文章的朋友平安喜乐。