首頁 > web前端 > js教程 > DEV 挑戰:讓我的標記板球聯賽更加精彩

DEV 挑戰:讓我的標記板球聯賽更加精彩

王林
發布: 2024-07-30 08:04:23
原創
672 人瀏覽過

這是前端挑戰 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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板