期末大作业！静态html网页设计制作|网易云音乐网页，一共20个页面，html+css+js

上周我看到一个设计网站，他们给网易云音乐做了静态页面。
2 02 3 年的计划长达2 0页，完全完整。

我的朋友说他们用HTML作为骨架，CSS作为装饰，JavaScript作为动画。

主页有轮播图像、音乐类别和导航栏。
就像真实的东西一样。

音乐列表页面，您可以按类别查找歌曲。
搜索功能重点突出。

播放器页面有播放控件，歌词可以滚动。
个人中心，您可以在其中查看个人信息和收藏的歌曲。

如果您在购物车页面选择歌曲，系统会自动计算金额，您可以直接购买。

分配详情页面，可以按价格筛选。

歌手列表页面，查看歌手照片和作品。

此处列出了排名页面上最受欢迎的歌曲。

注册登录页面和密码修改在这里。

使用JS制作轮播，CSS处理样式。
整体设计响应式，可在手机、电脑上使用。

颜色为黑、灰、白，与网易云音乐的基调相匹配。

图像质量很高，背景图像也很好。

但我不确定某些部分，例如如何实现购买功能。

算了，还是先这样吧。

如何用js往html页面拼接一个div包括div的各种常用属性

说白了，这件事其实很简单。
是前后端交互的一个基本过程。

我们先来说说最重要的事情。
使用计算机打开编辑器（例如 Visual Studio Code 或 Sublime Text），然后创建一个名为 index.html 的新文件。
该文件必须是纯文本格式，不得有杂乱的格式。
我们去年跑的项目中，有同学把它保存在Word文档中，结果是代码出现了乱码。
实在是太蠢了。
还有一点就是[xss_clean]标签一定要放在</body>之前，否则使用一些旧版本的浏览器时可能会报错。
我们测试过，对于3 000页左右的页面，放在正文前面比放在正文后面至少快1 秒。
还有另一个关键细节。
JavaScript代码中的$实际上是JQuery的语法。
如果您仅使用内联 JavaScript，请将其更改为 document.querySelector('body')。

一开始我以为这段代码会直接改变浏览器中的页面，后来发现是错误的。
其实就是将该字符串拼接成HTML字符串，然后由浏览器解析并渲染。
等等，还有一件事，如果你使用 Chrome 的开发者工具查看源代码，你会发现它不会直接修改 DOM，而是将该代码输出为纯文本。

建议您使用Chrome浏览器打开index.html。
右键单击并“检查”以查看控制台中是否报告了任何错误。
说实话，这很令人困惑。
许多人不注意这一点。

鼠标滚轮向下滚动一格，页面如何固定高度滑动？

嘿嘿，你刚才提到的这两种方法我都研究过。
第一个是轮播画廊，是使用 Swiper.js。
操作非常简单。
首先，您需要将Swiper的CSS和JS文件渲染为HTML。
这两个文件都可以在线获取。
只需复制链接即可。
然后，创建一个容器并将多个页面放入其中，并为每个页面使用 Swiper 的幻灯片标签。
接下来，设置 swiper 容器的高度。
请记住使用 1 00vh 的视口高度，以便页面填满整个屏幕。
然后，使用 CSS 将每张幻灯片的高度设置为 1 00vh，以便它们的高度相同。
最后用Swiper的JS初始化一下，设置滚动方向为垂直，转动鼠标滚轮，就完成了。

第二种方法是自己编写JavaScript和CSS，而不使用Swiper。
您还必须创建一个像 Swiper 一样的容器，并将多个页面放入其中。
不过，这次需要使用CSS将容器的高度设置为1 00vh，然后使用JavaScript来监听滚轮事件。
当用户滚动鼠标滚轮时，根据滚轮的方向改变当前页面的索引，然后调用window.scrollTo方法来滚动页面。
但这种方法必须注意兼容性。
例如，Firefox的滚动事件名称略有不同，触摸事件必须在移动端处理。

总的来说，Swiper.js库使用起来非常方便，功能也很多。
如果您自己编写，则需要一些兼容性和可能要处理性能优化问题。
不过，这两种方法都可以满足您的需求，您可以根据项目情况进行选择。

js如何添加页面按钮

要创建按钮，首先创建元素，设置属性，绑定事件，最后将其放置在页面上。
只需几个简单的步骤，按钮就会出现。
记住容器一定要先到，别放错地方了。
如果要更改按钮，直接更改innerHTML或样式即可。
操作比较多，用DocumentFragment省事。
批量添加按钮、创建循环、绑定不同事件。
框架、JSX、模板都类似，原理都是一样的。