【Web前端期末大作业】-世界杯赛程网页设计与实现

最新推荐文章于 2024-07-24 10:40:52 发布

MIKE笔记(同名B站)

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量974

点赞数 19

分类专栏： Web前端期末大作业文章标签：前端 Web前端期末大作业网页设计

本文链接：https://blog.csdn.net/m0_51607907/article/details/135072965

版权

Web前端期末大作业专栏收录该内容

9 篇文章 7 订阅

订阅专栏

前言

012-【Web前端期末大作业】-世界杯赛程网页设计与实现
🥇个人主页：@MIKE笔记
🥈文章专栏：Web前端期末大作业
⛄源码咨询： wx：mikenote 15💴带走

网页目录树

5个静态页面、10个css、4个js；

在这里插入图片描述

1️⃣网页介绍

网站建设工具
1.使用VScode（当然使用记事本也是可以的）智能，快捷，支持代码补全，节省了开发时间，并且支持多种语言只需安装插件配置文件即可。
2.网站建设学习资源

b站
CSDN

3.网站建设步骤及思路分享

网站建设步骤在我一点学习的导航栏里有更为清晰的体现，这里就不一一赘述了
网站的思路分享：整体的布局，以及内容，搜寻所需要的素材，建立站点。布局的好坏直接影响了你网页看起来的效果，在此我推荐一些常用的网站布局，一般是导航栏在顶部，下面分为左右结构，分清主次或者上中下三层结构等等，很多布局我觉得可以参考一些大型网站的布局或者一些个人博客的布局，以此增加自己的审美以及知识库。建议壁纸在一些桌面软件里找，会比较清晰。同时建设网页的过程不会是一帆风顺的，要想有理想的效果一定是需要一定时间去调试使用的。

2️⃣网页架构

📢前端三件套：

html
css
js

3️⃣系统环境

环境	版本 / 下载
系统	win 10 /win 11
vscode	2023

【【Web前端期末大作业】-世界杯赛程网页设计与实现】
备注：以上版本为博主电脑配置，可点击进入官网下载

4️⃣网页展示

视频展示：【【Web前端期末大作业】-世界杯赛程网页设计与实现】

图片展示

在这里插入图片描述

在这里插入图片描述

5️⃣代码展示

下面展示一些 内联代码片。

主页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/homePage.css">
    <link rel="stylesheet" href="../less/HomePage.css">
    <script src="../js/homePage.js"></script>
    <title>世界杯指南</title>
</head>

<body>
    <!-- 整体 -->
    <div class="homePage">
        <!-- 导航栏 -->
        <div class="nav">
            <div class="nav-centre">
                <!-- 左侧logo -->
                <span class="logo"><a href="#"><img src="../img/logo.png"></a></span>
                <!-- 右侧链接 -->
                <span class="nav-right">
                    <span><a href="../html/index.html">首页</a></span>
                    <span><a href="../html/competitionRules.html">比赛规则</a></span>
                    <span><a href="../html/news.html">最新资讯</a></span>
                    <span><a href="../html/championHot.html">夺冠热门</a></span>
                    <span><a href="../html/schedule.html">世界杯赛程</a></span>
                </span>
            </div>
        </div>
        <!-- 视频 -->
        <div class="video">
            <video src="../video/2.mp4" autoplay="autoplay" muted loop></video>
        </div>
        <!-- 关于世界杯 -->
        <div class="about">
            <!-- 标题 -->
            <div class="about-1"><img src="../img/01.png"></div>
            <div class="about-1-1"><img src="../img/05.png"></div>
            <!-- 内容1 -->
            <div class="about-2-3">
                <div class="about-2">
                    <div class="about-2-1">
                        <img src="../img/02.png">

                    </div>
                    <div class="about-2-2"><span>国际足联世界杯（FIFA World
                            Cup），简称“世界杯”，是由全世界国家级别球队参与，象征足球界最高荣誉，并具有最大知名度和影响力的足球赛事。世界杯全球电视转播观众超过35亿。世界杯每四年举办一次，任何国际足联会员国（地区）都可以派出代表队报名参加这项赛事。</span>
                    </div>
                </div>
            </div>
            <!-- 内容2 -->
            <div class="about-3">
                <div class="about-3-2"><span>巴西国家队是夺得世界杯冠军最多的球队（5次），并且在3夺世界杯后永久地保留了前任世界杯冠军奖杯雷米特杯。现代足球发源地为英格兰
                        ，其代表队在1966年首夺世界杯。而现在的世界杯奖杯是大力神杯，由4夺世界杯冠军的德国在1974年首次捧杯并一直沿用。2002年韩日世界杯，中国国家队首次晋级世界杯决赛圈。</span>
                </div>
                <div class="about-3-1">
                    <img src="../img/04.png">
                </div>
            </div>
        </div>
        <!-- 历届冠军 -->
        <div class="champions">
            <div class="champions-1">
                <img src="../img/06.png">
            </div>
            <div class="champions-2">
                <div class="champions-2-1">
                    <img src="../img/07.png">
                    <p>2018-法国France</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/08.png">
                    <p>2014-德国Germany</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/09.png">
                    <p>2010-西班牙Spain</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/10.png">
                    <p>2006-意大利Italy</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/11.png">
                    <p>2002-巴西Brazil</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/12.png">
                    <p>1998-法国France</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/13.png">
                    <p>1994-巴西Brazil</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/14.png">
                    <p>1990-联邦德国Federal Germany</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/15.png">
                    <p>1986-阿根廷Argentina</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/16.png">
                    <p>1982-意大利Italy</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/17.png">
                    <p>1978-阿根廷Argentina</p>
                </div>
                <div class="champions-2-1">
                    <img src="../img/18.png">
                    <p>1974-联邦德国Federal Germany</p>
                </div>
            </div>
        </div>
        <!-- 视频 -->
        <div class="video-1">
            <img src="../img/19.png">
            <video src="../video/3.mp4" controls poster="../img/20.png"></video>
        </div>
        <!-- 页脚 -->
        <div class="foot">
            <div class="foot-1">
                <img src="../img/22.png">
            </div>
            <div class="link">
                <ul>
                    <li><a>
                            <h4>Premier</h4>
                        </a></li>
                    <li><a>Home</a></li>
                    <li><a>Fixture</a></li>
                    <li><a>Results</a></li>
                    <li><a>Tables</a></li>
                    <li><a>Transfers</a></li>
                    <li><a>Broadcast</a></li>
                    <li><a>Tickets</a></li>
                    <li><a>Clubs</a></li>
                </ul>
                <ul>
                    <li><a>
                            <h4>League</h4>
                        </a></li>
                    <li><a>Players</a></li>
                    <li><a>Managers</a></li>
                    <li><a>News</a></li>
                    <li><a>Social</a></li>
                    <li><a>Youth</a></li>
                    <li><a>Safeguarding</a></li>
                    <li><a>History</a></li>
                    <li><a>Referees</a></li>
                </ul>
                <ul>
                    <li><a>
                            <h4>Fantasy</h4>
                        </a></li>
                    <li><a>FPL Home</a></li>
                    <li><a>My Team</a></li>
                    <li><a>FPL Transfers</a></li>
                    <li><a>Leagues</a></li>
                    <li><a>FPL Fixtures</a></li>
                    <li><a>Statistics</a></li>
                    <li><a>The Scout</a></li>
                </ul>
                <ul>
                    <li><a>
                            <h4>Stats</h4>
                        </a></li>
                    <li><a>Dashboard</a></li>
                    <li><a>Player Starts</a></li>
                    <li><a>Club Stats</a></li>
                    <li><a>All-time Stats</a></li>
                    <li><a>Records</a></li>
                    <li><a>Head-to-Head</a></li>
                    <li><a>Player Comparison</a></li>
                    <li><a>Awards</a></li>
                </ul>
                <ul>
                    <li><a>
                            <h4>Communities</h4>
                        </a></li>
                    <li><a>Latest</a></li>
                    <li><a>Programmes</a></li>
                    <li><a>PL Kicks Heroes</a></li>
                    <li><a>Strategy</a></li>
                    <li><a>PL Primary Stars</a></li>
                </ul>
            </div>
            <!-- 赞助商 -->
            <div class="sponsor">
                <ul>
                    <li><img src="../img/24.png"></li>
                    <li><img src="../img/25.png"></li>
                    <li><img src="../img/26.png"></li>
                    <li><img src="../img/27.png"></li>
                    <li><img src="../img/28.png"></li>
                </ul>
            </div>
            <!--版权声明-->
            <div class="copyright">
                <div class="copyrightLeft">©&nbsp;1930-2022&nbsp;FIFA&nbsp;WORLD&nbsp;CUP. All rights
                    reserved.</div>
            </div>
        </div>
        <!-- 广告位招租 -->
        <div class="ad">
            <img class="ad-1" src="../img/1.gif" />
            <img class="ad-2" src="../img/29.png" />
        </div>
        <!-- 鼠标悬停二维码 -->
        <div class="code">
            <img src="../img/30.png">
        </div>
    </div>
    <script>

    </script>
</body>

</html>

其他页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/championHot.css">
    <script src="../js/championHot.js"></script>
    <title>夺冠热门</title>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="nav-centre">
            <!-- 左侧logo -->
            <span class="logo"><a href="#"><img src="../img/logo.png"></a></span>
            <!-- 右侧链接 -->
            <span class="nav-right">
                <span><a href="../html/index.html">首页</a></span>
                <span><a href="../html/competitionRules.html">比赛规则</a></span>
                <span><a href="../html/news.html">最新资讯</a></span>
                <span><a href="../html/championHot.html">夺冠热门</a></span>
                <span><a href="../html/schedule.html">世界杯赛程</a></span>
            </span>
        </div>
    </div>
    <!-- 内容-1 -->
    <div class="all-1">
        <img src="../img/41.png">
        <p>The 2022 Qatar World Cup is about to open</p>
        <p>All the top 32 of the World Cup came on the stage</p>
        <p>Pointing to the champion of the World Cup</p>
    </div>
    <!-- 内容2 -->
    <div class="all-2">
        <div class="all-2-1">
            <h1>FIFA WORLD QATAR2022</h1>
            <p>2022年卡塔尔世界杯即将拉开大幕，世界杯32强尽数登场</p>
            <P>各队逐鹿中原，剑指世界杯冠军，一场场鹿战马上开始</P>
        </div>
    </div>
    <!-- 内容3 -->
    <div class="all-3">
        <div class="all-3-img">
            <img src="../img/31.png">
        </div>
        <div class="all-3-2">
            <h1>巴西国家男子足球队</h1>
            <p>Brazil National Men's Football Team</p>
            <img src="../img/43.png" alt="">
        </div>
    </div>
    <div class="all-3">
        <div class="all-3-2">
            <h1>法国国家男子足球队</h1>
            <p>French National Men's Football Team</p>
            <img src="../img/44.png" alt="">
        </div>
        <div class="all-3-img">
            <img src="../img/32.png">
        </div>
    </div>
    <div class="all-3">
        <div class="all-3-img">
            <img src="../img/33.png">
        </div>
        <div class="all-3-2">
            <h1>阿根廷国家男子足球队</h1>
            <p>Argentina National Men's Football Team</p>
            <img src="../img/45.png" alt="">
        </div>
    </div>
    <div class="all-3">
        <div class="all-3-2">
            <h1>英格兰国家男子足球队</h1>
            <p>England National Men's Football Team</p>
            <img src="../img/46.png" alt="">
        </div>
        <div class="all-3-img">
            <img src="../img/34.png">
        </div>
    </div>
    <div class="all-3">
        <div class="all-3-img">
            <img src="../img/35.png">
        </div>
        <div class="all-3-2">
            <h1>西班牙国家男子足球队</h1>
            <p>Spain National Men's Football Team</p>
            <img src="../img/47.png" alt="">
        </div>
    </div>
    <div class="all-3">
        <div class="all-3-2">
            <h1>德国国家男子足球队</h1>
            <p>German National Men's Football Team</p>
            <img src="../img/48.png" alt="">
        </div>
        <div class="all-3-img">
            <img src="../img/36.png">
        </div>
    </div>
    <div class="all-3">
        <div class="all-3-img">
            <img src="../img/37.png">
        </div>
        <div class="all-3-2">
            <h1>荷兰国家男子足球队</h1>
            <p>Netherlands National Men's Football Team</p>
            <img src="../img/49.png" alt="">
        </div>
    </div>
    <div class="all-3">
        <div class="all-3-2">
            <h1>比利时国家男子足球队</h1>
            <p>Belgium National Men's Football Team</p>
            <img src="../img/50.png" alt="">
        </div>
        <div class="all-3-img">
            <img src="../img/38.png">
        </div>
    </div>
    <!-- 页脚 -->
    <div class="foot">
        <div class="foot-1">
            <img src="../img/22.png">
        </div>
        <div class="link">
            <ul>
                <li><a>
                        <h4>Premier</h4>
                    </a></li>
                <li><a>Home</a></li>
                <li><a>Fixture</a></li>
                <li><a>Results</a></li>
                <li><a>Tables</a></li>
                <li><a>Transfers</a></li>
                <li><a>Broadcast</a></li>
                <li><a>Tickets</a></li>
                <li><a>Clubs</a></li>
            </ul>
            <ul>
                <li><a>
                        <h4>League</h4>
                    </a></li>
                <li><a>Players</a></li>
                <li><a>Managers</a></li>
                <li><a>News</a></li>
                <li><a>Social</a></li>
                <li><a>Youth</a></li>
                <li><a>Safeguarding</a></li>
                <li><a>History</a></li>
                <li><a>Referees</a></li>
            </ul>
            <ul>
                <li><a>
                        <h4>Fantasy</h4>
                    </a></li>
                <li><a>FPL Home</a></li>
                <li><a>My Team</a></li>
                <li><a>FPL Transfers</a></li>
                <li><a>Leagues</a></li>
                <li><a>FPL Fixtures</a></li>
                <li><a>Statistics</a></li>
                <li><a>The Scout</a></li>
            </ul>
            <ul>
                <li><a>
                        <h4>Stats</h4>
                    </a></li>
                <li><a>Dashboard</a></li>
                <li><a>Player Starts</a></li>
                <li><a>Club Stats</a></li>
                <li><a>All-time Stats</a></li>
                <li><a>Records</a></li>
                <li><a>Head-to-Head</a></li>
                <li><a>Player Comparison</a></li>
                <li><a>Awards</a></li>
            </ul>
            <ul>
                <li><a>
                        <h4>Communities</h4>
                    </a></li>
                <li><a>Latest</a></li>
                <li><a>Programmes</a></li>
                <li><a>PL Kicks Heroes</a></li>
                <li><a>Strategy</a></li>
                <li><a>PL Primary Stars</a></li>
            </ul>
        </div>
        <!-- 赞助商 -->
        <div class="sponsor">
            <ul>
                <li><img src="../img/24.png"></li>
                <li><img src="../img/25.png"></li>
                <li><img src="../img/26.png"></li>
                <li><img src="../img/27.png"></li>
                <li><img src="../img/28.png"></li>
            </ul>
        </div>
        <!--版权声明-->
        <div class="copyright">
            <div class="copyrightLeft">©&nbsp;1930-2022&nbsp;FIFA&nbsp;WORLD&nbsp;CUP. All rights
                reserved.</div>
        </div>
        <!-- 鼠标悬停二维码 -->
        <div class="code">
            <img src="../img/30.png">
        </div>

    </div>
    <!-- 弹窗广告 -->
    <div class="ad">
        <div class="ad-1">
            <img src="../img/51.png">
            <!-- 倒计时 -->
            <div class="ad-2">6秒后自动关闭</div>
        </div>
    </div>
</body>

</html>

完整源码+v:mikenote,15元带走。

结语

我个人觉得建设一个网站首先就是要规划好整体的布局，以及内容，搜寻所需要的素材，建立站点。布局的好坏直接影响了你网页看起来的效果，在此我推荐一些常用的网站布局，一般是导航栏在顶部，下面分为左右结构，分清主次或者上中下三层结构等等，很多布局我觉得可以参考一些大型网站的布局或者一些个人博客的布局，以此增加自己的审美以及知识库。建议壁纸在一些桌面软件里找，会比较清晰。同时建设网页的过程不会是一帆风顺的，要想有理想的效果一定是需要一定时间去调试使用的。