网易云网页制作心得体会

在国庆的短短一个星期里，我将用我所学的所有前端知识以及新接触的知识融合，按照最新的网易云官网首页，制作了一个简易版的网易云页面。在制作过程中，我先把网易云的各个模块分开，一个一个的给它们单独设置好它们的样式。我按照导航栏，横幅区，内容主体区，以及右边侧栏的模块进行逐一调整。在这其中，设置导航栏的时候就遇到了当我缩小网页时，导航栏里的文字排版都乱了的情况，后面去了解学习到了可以通过设置flexbox的弹性布局，配合固定宽度，使网页即使缩小也不会变形，还可以根据各个盒子，元素的需求，设置不同的伸缩。还有印象比较深刻的就是当鼠标靠近卡片时，播放按钮在正中间显示，它的位置我不知道应该怎么精确定位。后来我通过询问deepseek，学习到了相对定位和绝对定位的作用以及用到了微调元素位置的transform:translate，从而实现了把播放按钮放在卡片的正中间。除了以上收获，还有就是接触了一点js 的使用。在处理滚动页面回到顶部的按钮时，我学习到可以使用js的事件监听以及DOM操作的使用，实现了点击按钮滚动页面回到顶部的一个交互动作。以上是我对第一次制作网页的一点心得体会。