CSS——网易云音乐之下载客户端页面的实现

文章目录

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

---

前言

  今天要和大家分享的是网易云音乐下载客户端页面的实现过程。

---

一、结构的分析

示例图：

 结构的分析：

照例，在书写样式之前我们首先要分析结构，可以发现左右两侧的结构大致相同，在这里我就例举左边的结构，如图所示：

---

二、实现过程

1.HTML结构

代码如下（示例）：

        

            

                
                

                    
                    其他操作系统客户端
                
                
                

                    
                    

                        

                            
在电脑上听
                        
                        
                        

                            

                                
                                
                            
                        
                        
                        

                            下载电脑端
                        
                    
                    
                    

                        

                            
在手机上听
                        
                        
                        

                            
                            
                        
                        
                        

                             下载手机端
                        
                    
                
            
        

2.CSS样式

代码如下（示例）：

 .other-ios {
            width: 157px;
            height: 60px;
            position: absolute;
            top: 0;
            right: 0;
        }

        .other-ios:hover i,
        .other-ios:hover span {
            opacity: 0.7;
        }

        .other-ios i {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 20px 2px 0px 0px;
            background-image: url(../img/下载客户端图库/下载.png);
            background-size: contain;
            vertical-align: text-bottom;
        }

        .other-ios span {
            font-size: 14px;
            color: #ffffff;
        }

        /* 选择电脑与手机区域外部容器样式设置 */
        .download {
            height: 539.81px;
            position: relative;
        }

        /* 左侧电脑端区域样式设置 */
        .left-list {
            width: 556px;
            height: 539.81px;
        }

        .left-title {
            height: 25.29px;
            margin: 0px 0px 33px;
            font-size: 22px;
            color: #ffffff;
            text-align: center;
        }

        .left-list img {
            width: 577px;
            height: 328px;
            margin: 0px 0px 3px;
        }

        .ios-type {
            height: 31.06px;
            margin: 26px 0px;
        }

        .iostype-inner {
            width: 334px;
            margin: 0 auto;
        }

        .apple-ios>i {
            display: inline-block;
            width: 154px;
            height: 44px;
            margin-right: 30px;
            background-image: url(../img/下载客户端图库/苹果下载.png);
            background-size: contain;
            background-repeat: no-repeat;
        }


        .windows>i {
            display: inline-block;
            width: 140px;
            height: 44px;
            background-image: url(../img/下载客户端图库/windows下载.png);
            background-size: contain;
            background-repeat: no-repeat;
        }

        .download-computer a {
            display: inline-block;
            width: 300px;
            height: 65px;
            line-height: 65px;
            text-align: center;
            color: #d10000;
            font-size: 22px;
            border-radius: 65px;
            margin: 0 128px;
            background-color: #ffffff;
        }

        .download-computer a:hover {
            opacity: 0.7;
            cursor: pointer;
        }

---

总结

    以上就是今天所要分享的内容，依旧诚挚祝福看到屏幕前的你平安喜乐~