制作网易云首页有感

回顾制作网易云首页的过程，有挑战也有收获。

一.对网易云首页的整体感受：

从设计感来讲，网易云首页没有堆砌信息，而是用大面积留白，柔和的卡片式布局，色彩鲜明，简约又不失温度。

二.网易云的整体结构和细节：

网易云的结构搭建并不复杂。从大的方面有分为三大模块，分别是顶部导航栏、核心内容区和底部信息栏。但是细节特别多，如各种图标还有各种hover效果，非常锻炼耐心。

三.技术实现：

布局属性：主要用了盒子模型属性（margin、padding、border),定位属性position(relative和absolute)和弹性布局display:flex。在使用过程中，position的应用可以很好避免浮动带来的层级冲突。

动画技术：css动画，通过关键帧Keyframes和过渡transition 还有animation实现了轮播图的自动播放。

图形处理：采用 “精灵图 + 背景定位” 的方式，将多个小图标整合到一张图中，通过 background-position 精准调取所需图形，减少了图片请求次数，也实现了特殊图形的展示。

四.问题：

一是下拉菜单被遮挡，排查后发现是层级问题，添加 z-index 属性后解决；二是轮播图制作耗时较长，最初用 ul 列表装图片时，会影响上方模块显示，尝试多种调整方式无效，最终改用 div 单独包裹图片才解决问题。

五.收获：

通过这次制作，更好地巩固了HTML和CSS的知识点，看着空白的页面一点一点地变得丰富起来，成就感满满。