HTML静态网页成品作业(HTML+CSS)——利物浦足球俱乐部介绍网页设计制作(5个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,共有5个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

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">
    <title>利物浦足球俱乐部</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- logo -->
    <div class="logo w">
        <img src="./images/logo.jpg" alt="">
    </div>
    <!-- 导航 -->
    <div class="nav w">
        <ul>
            <li>
                <a href="./lineup.html">
                    球队阵容
                </a>
            </li>
            <li>
                <a href="./manage.html">
                    管理团队
                </a>
            </li>
            <li>
                <a href="./jersey.html">
                    球队队服
                </a>
            </li>
            <li>
                <a href="./homefield.html">
                    球队主场
                </a>
            </li>
        </ul>
    </div>
    <!-- 展示图片 -->
    <div class="show w">
        <img src="./images/show.jpeg" alt="">
    </div>
    <!-- 内容 -->
    <div class="content w">
        <h2>球队历史</h2>
        <div class="history">
            <p>
                利物浦足球俱乐部(Liverpool F.C.,简称“利物浦”)是一家位于英格兰西北部默西赛德郡港口城市利物浦的足球俱乐部,成立于1892年,是英格兰足球超级联赛的球队之一。
            </p>
            <p>
                利物浦是英格兰足球历史上最成功的俱乐部之一,也是欧洲乃至世界最成功的足球俱乐部之一。 [1]  利物浦一共夺取过19次英格兰顶级联赛冠军、8次英格兰足总杯冠军、9次英格兰联赛杯冠军、16次英格兰社区盾杯冠军、6次欧洲冠军联赛(含欧洲冠军俱乐部杯)冠军、3次欧洲足联欧洲联赛(含欧洲联盟杯)冠军、4次欧洲超级杯冠军以及1次国际足联俱乐部世界杯冠军。
            </p>
            <p>
                利物浦足球俱乐部成立于1892年,由约翰·霍丁创立。俱乐部的成立是在安菲尔德球场的拥有者约翰·霍丁与埃弗顿足球俱乐部之间发生了一次涉及多方面原因的争执之后。1884-1892年间,埃弗顿俱乐部的成立以及比赛一直都在安菲尔德球场。之后约翰·霍丁与生意伙伴奥利尔先生为球队建起了一座新的球场。如何管理俱乐部和经营生意的冲突变得不可调和。霍丁在个人经济利益的驱使下,决定将安菲尔德球场的租金从100英镑涨到250英镑。在安菲尔德踢了8年球的埃弗顿队不得不离开了霍丁和安菲尔德球场,而搬到了新球场古迪逊公园球场。
            </p>
            <p>
                霍丁在空出的的安菲尔德球场上建立了利物浦足球俱乐部。俱乐部最初的名字是埃弗顿足球俱乐部与体育场地股票上市公司简称为Everton Athletic,但是由于足球协会有其他球队叫做埃弗顿,所以该俱乐部更名为利物浦。
            </p>
            <p>
                利物浦成员在兰开夏郡联赛(Lancashire League)的第一个赛季中他们就赢得了冠军,并在随后的第二个赛季成功升到乙级(第二级)联赛。他们获得了乙级联赛的冠军,并且成功升入了甲级(第一级)联赛。
            </p>
            <p>1900/01赛季,利物浦球队获得了第一个顶级联赛冠军头衔,并且在1905/06赛季再次夺冠。 在1914年,利物浦首次晋级英格兰足总杯决赛,但是最终却以01败给了伯恩利。球队在1921/22赛季、1922/23赛季连续两次获得了联赛冠军,但在此之后利物浦再也没有获得过任何冠军。直到1946/47赛季获得球队的第五座联赛冠军。1950年,球队再次晋级足总杯决赛,但是最后输给了阿森纳。
            </p>
            <p>1953/54赛季,利物浦球队降级到了乙级联赛。 在降级后的这段时期内,利物浦遭遇到了球队历史上的最大耻辱,在1958/59赛季足总杯的一场比赛中利物浦以12不敌非职业球队伍斯特城队。
            </p>
        </div>
    </div>
</body>

</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/635573.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TikTok矩阵管理系统:品牌增长的新引擎

随着社交媒体的快速发展&#xff0c;TikTok已成为全球最受欢迎的短视频平台之一。品牌和企业纷纷涌入这个平台&#xff0c;寻求新的增长机会。然而&#xff0c;随着内容的激增和用户群体的多样化&#xff0c;管理TikTok账号变得越来越复杂。这时&#xff0c;TikTok矩阵管理系统…

LLaMa系列模型详解(原理介绍、代码解读):LLaMA 3

LLaMA 3 2024年4月18日&#xff0c;Meta 重磅推出了Meta Llama 3&#xff0c;Llama 3是Meta最先进开源大型语言模型的下一代&#xff0c;包括具有80亿和700亿参数的预训练和指令微调的语言模型&#xff0c;能够支持广泛的应用场景。这一代Llama在一系列行业标准基准测试中展示…

数据仓库实验四:聚类分析实验

目录 一、实验目的二、实验内容和要求三、实验步骤1、建立数据表2、建立数据源视图3、建立挖掘结构Student.dmm4、部署项目并浏览结果5、挖掘模型预测 四、实验结果分析五、实验总结体会 一、实验目的 通过本实验&#xff0c;进一步理解基于划分的、基于层次的、基于密度的聚类…

Python 渗透测试:GhostScript 沙箱绕过.(CVE-2018-16509)

什么是 GhostScript 沙箱绕过 GhostScript 沙箱是一种安全机制,用于在受控环境中运行 GhostScript 解释器,以防止恶意代码的执行。GhostScript 是一个广泛使用的 PDF 和 PostScript 解释器,通常用于在服务器上处理和渲染这些文件格式。Tavis Ormandy 通过公开邮件列表&#xf…

[Algorithm][动态规划][路径问题][不同路径][不同路径Ⅱ][珠宝的最高价值]详细讲解

目录 1.不同路径1.题目链接2.算法原理详解3.代码实现 2.不同路径 II1.题目链接2.算法原理详解3.代码实现 3.珠宝的最高价值1.题目链接2.算法原理详解3.代码实现 1.不同路径 1.题目链接 不同路径 2.算法原理详解 思路&#xff1a; 确定状态表示 -> dp[i][j]的含义 走到dp[…

docker和containerd的区别

docker和containerd的区别 1、容器运行时 1.1 容器运行时概念 容器运行时&#xff08;Container Runtime&#xff09;是一种负责在操作系统层面创建和管理容器的软件工具或组件。它是容器化技术的核心组件之一&#xff0c;用于在容器内部运行应用程序&#xff0c;并提供隔离…

pdf加水印怎么加?3种添加水印方法分享

pdf加水印怎么加&#xff1f;PDF加水印不仅是为了保护文档内容&#xff0c;确保信息的安全性和完整性&#xff0c;更是一种有效的版权保护措施。通过添加水印&#xff0c;您可以在文档中嵌入公司名称、日期、编号等信息&#xff0c;以明确文档的归属权和使用限制。此外&#xf…

Anti Desgin Vue 实现 表格可编辑、新增、删除功能

1、效果图 新增&#xff1a; 删除&#xff1a; 修改&#xff1a; 代码&#xff1a; <template><div><button click"add">添加</button><span style"margin-left: 8px"><template v-if"hasSelected">{…

浏览器的下载行为基本原理

浏览器解析 在使用浏览器访问某些资源时&#xff0c;有些资源是直接下载有些资源是直接打开。例如前端的html&#xff0c;xml&#xff0c;css&#xff0c;图片等资源都是直接打开&#xff0c;而txt&#xff0c;excel等文件是直接下载。那么如何控制访问一个资源时是下载文件还…

stm32学习-光敏传感器控制蜂鸣器

接线 GPIO配置 初始化GPIO 1.使用RCC开启GPIO时钟 void RCC_APB2PeriphClockCmd(uint32_t RCC_APB2Periph, FunctionalState NewState); 作用&#xff1a;外设时钟控制(根据外设连接的总线选择要开启的时钟&#xff09; RCC_AHBPeriph/RCC_APB2Periph/RCC_APB1Periph&#x…

.NET Core Web Api Swagger运行异常

遇到的问题 因为新增了一个控制器方法&#xff0c;从而导致在运行Swagger的时候直接报错&#xff0c;异常如下&#xff1a; SwaggerGeneratorException: Conflicting method/path combination "POST api/UserOperationExample" for actions - WebApi.Controllers.Us…

GMSL图像采集卡,适用于无人车、自动驾驶、自主机器、数据采集等场景,支持定制

基于各种 系列二代 G MS L 图像采集卡&#xff08;以下简称 二代图像采集卡&#xff09;是一款自主研发的一款基于 F P G A 的高速图像产品&#xff0c;二代图像采集卡相比一代卡&#xff0c;由于采用PCIe G en 3 技术&#xff0c;速度和带宽都相应的有了成 倍的提高。该图像…

开源与闭源AI模型的对决:数据隐私、商业应用与社区参与

引言 在人工智能&#xff08;AI&#xff09;领域&#xff0c;模型的发展路径主要分为“开源”和“闭源”两条。这两种模型在数据隐私保护、商业应用以及社区参与与合作方面各有优劣&#xff0c;是创业公司、技术巨头和开发者们必须仔细权衡的重要选择。那么&#xff0c;面对这些…

【经验技巧】谷歌高级搜索语法

谷歌高级搜索语法是一些特殊的搜索指令&#xff0c;可以在谷歌搜索框中使用以帮助您更准确地找到您需要的信息。以下是一些常用的谷歌高级搜索语法&#xff1a; 搜索特定词组&#xff1a;用引号将词组括起来&#xff0c;例如&#xff1a;“人工智能” 排除特定词语&#xff1a…

前端 基础 综合案例 二 注册页面( 简单版)A

案例示例 &#xff1a; 案例 分析 &#xff1a; 我们将 上示网页&#xff0c;拆成两个部分进行分析&#xff1a; 很显然&#xff0c;网页 第一行&#xff0c;是标题&#xff08;青春不常在&#xff0c;抓紧谈恋爱&#xff09;&#xff0c; 我们就用 h4 去完成&#xff1b…

若依nodejs版本过高问题解决方案

由于nodejs版本过高,可能会导致vue-cli项目运行报错。 目录 方法1:每次启动项目前,输入配置命令 方法2:修改package.js

Study--Oracle-03-Oracle19C--RAC集群部署

一、硬件信息及配套软件 1、硬件设置 RAC集群虚拟机&#xff1a;CPU:2C、内存&#xff1a;9G、操作系统&#xff1a;30G、数据库安装目录&#xff1a;100G 数据存储&#xff1a;50G &#xff08;10G*5&#xff09; 共享存储&#xff1a;2G &#xff08;1G*2&#xff09; 2…

基于深度学习PET/CT放射学的预后价值:未来在晚期鼻咽癌个体化诱导化疗中的潜在作用 | 文献速递-深度学习结合影像组学

Title 题目 Prognostic Value of Deep Learning PET/CT-BasedRadiomics: Potential Role for Future IndividualInduction Chemotherapy in AdvancedNasopharyngeal Carcinoma 基于深度学习PET/CT放射学的预后价值&#xff1a;未来在晚期鼻咽癌个体化诱导化疗中的潜在作用 0…

HCIP-Datacom-ARST自选题库__MPLS简答【4道题】

1.如图所示&#xff0c;R1、R2、R3、R4处于同一个MPLS域&#xff0c;且设备之间采用LDP分配MPLS标签&#xff0c;R4为4.4.4.0/24这条FEC的EgressLSR。若想实现R1访问4.4.4.0/24时&#xff0c;R4不需要查询标签表但能够了解该数据的转发优先级&#xff0c;则R3对于该FEC的出标签…