原神5.1前端网页HTML+CSS+JS

  这篇文章主要是总结一下我在制作页面的时候用到的一些技术以及经验总结，博主也是第一次写网页，代码也是在不断地“进化”，哪里写的不好大家可以随意指出。

  下面就是一些经验总结，如果想看具体效果我这里也不好展示，需要的可以看b站上的视频：

HTML+CSS+JS试做原神5.1前端网页_哔哩哔哩_bilibili，不想看我唠嗑的直接看最后我会放网盘链接。

   1.布局（开头）

  我们很多人刚学完HTML+CSS就非常手痒想要做一下自己的网页，但刚开始发现不知道该怎么上手，也就是最开始的布局不知道怎么写比较好。这里我主要讲一下两种情况：

记得最开始放一段代码（可以有效删除元素的内外边距，有助于后面布局）：

* {
    margin: 0;
    padding: 0;
}

  1.普通页面，也就是会出现滚轮条，可以直接上下拉动

这种界面没什么好说的，直接无脑往上放div即可，如果你还是不放心，我们可以指定

overflow-x: hidden;

意思就是说我们的横向如果有内容超出了，就不会显示，然后指定一个具体的宽度，一般屏幕的默认大小是1912×954，高度可以不用管。然后就可以div盒子往里面加采用一般的流式布局即可。

  2.整块滑动的界面（没有滚动条，上下滑动时一整块界面一起动）

例如这样:

这边我的思路是这样的：我们对整个界面分块处理，用一个大盒子包裹

也就是直接设置上图box的高度，里面的盒子全部采用定位的布局方式，然后我们直接指定盒子的宽高，最后只需要使用js在每次滑动界面的时候，修改每个和盒子的top即可（大概就是这样）

elements.forEach(function (elementId) {
        document.getElementById(elementId).addEventListener('mousewheel', function (e) {
            e = e || window.event;
            if (!canScroll)
                return;
            canScroll = false;
            setTimeout(function () {
                canScroll = true;
            }, 500); // 设置响应时间间隔，这里是1秒
            if (e.wheelDelta > 0) { //当滑轮向上滚动时  
                console.log("滑轮向上滚动" + num);
                if (num == 5 || yunxugundong == false) {
                    return;
                }
                else {
                    num = num + 1;
                    $(".header").animate({
                        top: '+=954px',
                    });
                    $(".bg2").animate({
                        top: '+=954px',
                    });
                    $(".bg3").animate({
                        top: '+=954px',
                    });
                    $(".bg4").animate({
                        top: '+=954px',
                    });
                    $(".bg5").animate({
                        top: '+=954px',
                    });
                    $(".bg6").animate({
                        top: '+=954px',
                    });
                }
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                console.log("滑轮向下滚动" + num);
                if (num <= 0 || yunxugundong == false) {
                    if (yunxugundong == false)
                        return;
                    else if (num <= 0) {
                        const element = document.querySelector('.bg6');
                        element.style.animation = 'bounce 0.5s ease alternate';
                        setTimeout(function () {
                            element.style.animation = '';
                        }, 500);
                    }
                }
                else {
                    num = num - 1;
                    $(".header").animate({
                        top: '-=954px',
                    });
                    $(".bg2").animate({
                        top: '-=954px',
                    });
                    $(".bg3").animate({
                        top: '-=954px',
                    });
                    $(".bg4").animate({
                        top: '-=954px',
                    }