首页 > web前端 > js教程 > DEV 挑战:让我的标记板球联赛更加精彩

DEV 挑战:让我的标记板球联赛更加精彩

王林
发布: 2024-07-30 08:04:23
原创
671 人浏览过

这是前端挑战 v24.07.24 的提交,Glam Up My Markup:娱乐

我建造了什么

虚构的纽约板球联赛网页

使用 Javascript,我将这些部分放入 div 容器中,这样我就可以使用 Flex 按照我想要的方式修改它们。

document.addEventListener("DOMContentLoaded", () => {
        const container = document.createElement('div');
        container.className = 'container';

        const sections = document.querySelectorAll('section');
        const parent = sections[0].parentNode;
        const footer = document.querySelector('footer');

        sections.forEach((section) => {
            container.appendChild(section);
        });

        parent.insertBefore(container, footer);

});
登录后复制

我使用AI生成了背景标题图像并使用CSS对其进行了修改。

div 容器的背景包含休闲板球联赛徽标,该徽标已使用 CSS 转换为装饰元素。

我用纽约的颜色来设计它,让它感觉合适。

演示

Cricket League webpage

旅行

结局的感觉是运动、活跃和有趣,但不过分。悬停时,这些部分的内部会发出轻微的光芒。

感谢您的浏览,github在这里:
https://github.com/AnnaVi11arrea1/Cricket-League-Markup

直播:https://annavi11arrea1.github.io/Cricket-League-Markup/

感谢您的浏览!

以上是DEV 挑战:让我的标记板球联赛更加精彩的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板