web前端期末大作业：体育网页主题网站设计——体育兵乓球5页面HTML+CSS+JavaScript

news2024/11/18 13:55:18

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货

一、👨‍🎓网站题目

🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。

二、✍️网站描述

🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

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

五、⚙️ 网站代码

🧱HTML结构代码

<!--
 * @Author: your name
 * @Date: 2021-11-27 16:15:59
 * @LastEditTime: 2021-11-27 17:40:37
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE!
 * @FilePath: \129 体育兵乓球5页面~学生网页设计作业源码\index.html
-->


<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>home</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <style type="text/css">
        .code {
            height: auto;
            padding: 20px;
            border: 1px solid #9EC9FE;
            background: #ECF3FD;
        }

        .code pre {
            font-size: 14px;
        }

        .info {
            font-size: 12px;
            color: #666666;
            font-family: Verdana;
            margin: 20px 0 50px 0;
        }

        .info p {
            margin: 0;
            padding: 0;
            line-height: 22px;
            text-indent: 40px;
        }

        h2.title {
            margin: 0;
            padding: 0;
            margin-top: 50px;
            font-size: 18px;
        }

        h3.title {
            font-size: 16px;
        }

        .importInfo {
            font-family: Verdana;
            font-size: 14px;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body style="background:url(images/bj.jpg) repeat fixed!important; ">
    <div class="head"><img src="images/top.jpg" /></div>
    <div class="page">

        <div class="nav">
            <p><a href="index.html">首页</a><a href="about.html">"乒乓球文化"</a><a href="wenhua.html">热门球员</a><a href="wen.html">大型赛事</a>　<a href="news.html">注册</a></p>
        </div>
        <div class="content" style="padding-top:10px;">
            <div class="guntu">
                <img src="images/h1.jpg" width="238" height="160" /><img src="images/h2.jpg" width="238" height="160" /><img src="images/h3.jpg" width="238" height="160" /><img src="images/h4.jpg" width="238" height="160" /><img src="images/h5.jpg" width="238"
                    height="160" />
            </div>

            <div class="jianzhu">
                <p>梅西</p>
            </div>

            <div class="jianzhu_bot">

                <div class="jianzhuA">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><img src="images/2.jpg" /></td>

                        </tr>
                    </table>
                    <br />


                    <p style=" float:left; margin-left:0px; display:inline; font-size:15px; line-height:30px;">王楠是后邓亚萍时代的第一人，她左手横握球拍，弧圈球结合快攻，夺得2000年悉尼奥运会的女乒冠军。</p>
                </div>


                <div class="jianzhuA">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><img src="images/3.jpg" /></td>

                        </tr>
                    </table>
                    <br />


                    <p style=" float:left; margin-left:0px; display:inline; font-size:15px; line-height:30px;">&nbsp;</p>
                    <span style=" float:left; margin-left:0px; display:inline; font-size:15px; line-height:30px;">她球技了得，她的美貌也是可以的，圆润的身姿显得窈窕动人，微胖的体型更是清丽迷人，球技跟美貌并存的美女，排名第三无可厚非！</span> </div>

            </div>

        </div>


    </div>
    <div class="foot">
        <p style=" text-align:center;">版权所有</p>
    </div>

    </center>
</body>

</html>

💒CSS样式代码

/* CSS Document */

body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
    margin: 0;
    padding: 0;
    border: 0;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Times New Roman", Times, serif;
}

body {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    color: #000000;
    line-height: 20px;
    text-align: left
}

ul,
li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.head {
    width: 1002px;
    margin: 0 auto;
    text-align: left;
    height: 160px;
}

.page {
    width: 1002px;
    margin: 0 auto;
    background: #FFFFFF;
    padding-top: 5px;
}

.nav {
    width: 1002px;
    height: 30px;
    background: url("../images/nav_bg.gif") repeat-x;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.nav a {
    color: #efe219;
    margin-left: 80px;
}

.foot {
    width: 1002px;
    margin: 0 auto;
    padding: 20px 0;
}

.content {
    width: 1002px;
    padding: 30px 0;
    text-align: left;
}

.guntu {
    width: 1002px;
    height: 160px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 10px;
}

.guntu img {
    margin-left: 10px;
}

.jianzhu {
    width: 982px;
    height: 26px;
    margin: 0 auto;
    background: #9c0305;
    line-height: 26px;
}

.jianzhu p {
    line-height: 26px;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    text-align: left;
    text-indent: 10px;
}

.jianzhu_bot {
    width: 982px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 20px;
}

.jianzhuA {
    width: 440px;
    float: left;
    margin-left: 40px;
    display: inline;
    text-align: left
}

.meishi {
    width: 760px;
    margin: 0 auto;
    padding: 30px;
    text-align: left;
}

.meishi h3 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    padding: 10px 0;
}

.aa li {
    line-height: 40px;
    font-size: 16px;
}

.aa li a {
    color: #000;
    font-weight: bold;
}

.aa li a锛歨over {
    color: #f00;
}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ES运维常用指令，常用的故障诊断指令，es集群健康状况、集群节点分配信息、分片分配信息、分片未分配问题诊断、集群开启密码访问

ES运维常用指令，常用的故障诊断指令，es集群健康状况、集群节点分配信息、分片分配信息、分片未分配问题诊断、集群开启密码访问

目录 查询集群的健康状况 查看集群中所有节点的分配信息 查询集群/索引的文档总计数 查询集群的分片分配信息 查询集群中索引的分片数、文档数或集群中包含哪些索引 查询集群的快照存储信息 查看集群状态信息 查看集群统计信息 查看集群中所有节点的节点属性 查询分片…
阅读更多...
javaScript 进阶之路 --- 《手写“回调地狱”》

javaScript 进阶之路 --- 《手写“回调地狱”》

前言&#xff1a; 可能初次看到这个标题&#xff0c;你会有些惊讶。我们不是要实现“手写 Promise ”吗&#xff1f;怎么变成了手写“回调地狱”了&#xff1f;“我老早看视频学习的时候就知道&#xff0c;我们要避免写成“回调地狱的格式&#xff0c;怎么到你这还要手写这玩意…
阅读更多...
论文投稿指南——中国（中文EI）期刊推荐（第5期）

论文投稿指南——中国（中文EI）期刊推荐（第5期）

&#x1f680; EI是国际知名三大检索系统之一&#xff0c;在学术界的知名度和认可度仅次于SCI&#xff01;&#x1f384;&#x1f388; 【前言】 想发论文怎么办&#xff1f;手把手教你论文如何投稿&#xff01;那么&#xff0c;首先要搞懂投稿目标——论文期刊。其中&#xf…
阅读更多...
智能优化算法：蜣螂优化算法-附代码

智能优化算法：蜣螂优化算法-附代码

智能优化算法&#xff1a;蜣螂优化算法 摘要&#xff1a;蜣螂优化算法( Dung beetle optimizer, DBO), 是由 Jiankai Xue 等于2022 年提出的一种群体智能优化算法。其灵感来源于蜣螂的生物行为过程&#xff0c;具有寻优能力强&#xff0c;收敛速度快的特点。 1.蜣螂优化算法 …
阅读更多...
一款很火的智能化 Shell 工具多色彩优化命令显示结果可以替换系统默认的 Shell 工具，支持多平台免费开源使用

一款很火的智能化 Shell 工具多色彩优化命令显示结果可以替换系统默认的 Shell 工具，支持多平台免费开源使用

一款很火的智能化 Shell 工具多色彩优化命令显示结果可以替换系统默认的 Shell 工具&#xff0c;支持多平台免费开源使用。 Nushell&#xff0c;它是用Rust写的&#xff0c;安全性提高的同时&#xff0c;Bug率也降低了&#xff0c;NuShell 专注于实现以下目标&#xff1a; 1、…
阅读更多...
【云原生】Prometheus AlertManager讲解与实战操作

【云原生】Prometheus AlertManager讲解与实战操作

文章目录一、概述二、AlertManager 架构三、AlertManager 部署1&#xff09;下载2&#xff09;配置3&#xff09;启动服务4&#xff09;与Prometheus集成四、在Prometheus中设置告警规则五、AlertManager 告警通道配置一、概述 Prometheus 包含一个报警模块&#xff0c;就是我们…
阅读更多...
利用图文和代码深度解析操作系统OS的内存管理实现原理机制和算法

利用图文和代码深度解析操作系统OS的内存管理实现原理机制和算法

利用图文和代码深度解析操作系统OS的内存管理实现原理机制和算法。 内存作为计算机系统的组成部分，跟开发人员的日常开发活动有着密切的联系，我们平时遇到的Segment Fault、OutOfMemory、Memory Leak、GC等都与它有关。本文所说的内存，指的是计算机系统中的主存（Main Memo…
阅读更多...
LIFT: Learned Invariant Feature Transform详细笔记

LIFT: Learned Invariant Feature Transform详细笔记

LIFT: Learned Invariant Feature Transform Paper: LIFT: Learned Invariant Feature Transform | SpringerLink Code: GitHub - cvlab-epfl/LIFT: Code release for the ECCV 2016 paper 文章目录Abstract思路来源LIFT文献来源方法&#xff1a;LIFTPipeline网络架构训练流程…
阅读更多...
【网络】网络基础

【网络】网络基础

文章目录依据覆盖范围的网络分类初识网络协议网络协议分层OSI分层模型TCP/IP分层模型网络协议栈中每一层的典型协议和典型设备应用层传输层网络层数据链路层物理层初识IP地址和MAC地址IP地址MAC地址网络是数据传输的解决方案。计算机数量由少变多&#xff0c;计算机由单台机器完…
阅读更多...
火爆全球的网红OpenAI ChatGPT注册教程

火爆全球的网红OpenAI ChatGPT注册教程

地址&#xff1a;https://chat.openai.com/ 1. 登陆上去体验 写代码问题 Could you help me to write a C function to upload a file to ASW S3?回复 带代码和注释 Sure, here is an example of how you might write a C function to upload a file to Amazon S3: #incl…
阅读更多...
Redis Cluster高可用集群部署

Redis Cluster高可用集群部署

​欢迎光临我的博客查看最新文章: https://river106.cn Redis从3.0开始支持Redis Cluster集群部署&#xff0c;在3.0之前使用哨兵模式来实现Redis集群&#xff08;利用Sentinel来监控master节点的状态&#xff0c;如果master节点异常&#xff0c;则将其中一台slave切换为master…
阅读更多...
C语言中的void

C语言中的void

文章目录一.void概要二.void应用场景2.1void能定义变量吗&#xff1f;2.2void这个类型有大小吗&#xff1f;2.3void*能定义变量吗&#xff1f;2.4void*使用2.5void*能不能进行对应的指针运算&#xff1f;2.6void和函数返回值2.7函数void类型的参数一.void概要 void就是空的意思…
阅读更多...
多种方法帮你解决tomcat项目部署，idea控制台乱码问题

多种方法帮你解决tomcat项目部署，idea控制台乱码问题

解决在使用Tomcat过程中idea控制台出现的乱码问题 以下将介绍几种方法&#xff08;都是小编亲测实用的方法&#xff09;&#xff0c;尝试并寻找适合自己的方法即可 由于我已经处理过了乱码问题&#xff0c;我就重新配置一下 &#xff08;我有效解决的方案是把-Dfile.encoding…
阅读更多...
SQL开窗函数之前后函数（LEAD、LAG）

SQL开窗函数之前后函数（LEAD、LAG）

开窗函数 当我们需要进行一些比较复杂的子查询时&#xff0c;聚合函数就会非常的麻烦&#xff0c;因此可以使用开窗函数进行分组再运用函数查询。窗口函数既可以显示聚集前的数据&#xff0c;也可以显示聚集后的数据&#xff0c;可以在同一行中返回基础行的列值和聚合后的结果…
阅读更多...
cubeIDE开发， 全面解析cubeMX图形配置工具

cubeIDE开发， 全面解析cubeMX图形配置工具

一、cubeIDE 集成cubeMX STM32CubeMX是st公司早期产品&#xff0c;现已经成为STM32Cube开发套件的一部分&#xff0c;直接集成到cubeIDE 开发平台省&#xff0c;是一种芯片引脚图形配置工具&#xff0c;可以非常轻松地配置STM32微控制器和微处理器&#xff0c;以及为Arm Cortex…
阅读更多...
java+MySQL基于ssm的公文流转关管理系统

java+MySQL基于ssm的公文流转关管理系统

在企业的日常管理过程中,公文管理是日常管理中必不可少的组成部分,其管理水平的高低体现了一个企业管理水平的整体状况。一直以来企业使用传统人工的方式管理公文数据,这种管理方式存在着许多缺点,如:效率低、保密性差,另外时间一长,将产生大量的文件和数据,为操作人员带来不少…
阅读更多...
python_selenium自动化测试框架

python_selenium自动化测试框架

设计思路 本文整理归纳以往的工作中用到的东西&#xff0c;现汇总成基础测试框架提供分享。 框架采用python3 selenium3 PO yaml ddt unittest等技术编写成基础测试框架&#xff0c;能适应日常测试工作需要。 1、使用Page Object模式将页面定位和业务操作分开&#xff0…
阅读更多...
cdp4j爬虫自动化学习

cdp4j爬虫自动化学习

cdp4j爬虫自动化学习cdp4j介绍依赖通过识别本地文件进行调试cdp4j介绍 cdp4j是一个Java库&#xff0c;它提供了高级API来通过DevTools协议控制Chrome或Chromium。它可以用于自动使用网页和测试网页。cdp4j默认情况下可以完全运行&#xff0c;但可以配置为运行无头Chrome或Chro…
阅读更多...
Spring Cloud Eureka 服务注册中心怎么配置

Spring Cloud Eureka 服务注册中心怎么配置

Eureka&#xff0c;这里是 Spring Cloud Eureka 的简称&#xff0c;是 Spring Cloud Netflix 组件之一。Spring Cloud Netflix 中核心的组件包括了服务治理&#xff08;Eureka&#xff09;&#xff0c;服务容断&#xff08;Hystrix&#xff09;&#xff0c;路由&#xff08;Zuu…
阅读更多...
hypermesh和lsdyna联合仿真计算某汽车座椅进行的头冲吸能实验

hypermesh和lsdyna联合仿真计算某汽车座椅进行的头冲吸能实验

导读&#xff1a;本案例运用hypermesh和lsdyna联合仿真&#xff0c;主要是针对某座椅进行的头冲吸能实验的仿真计算。这个工况考察座椅背部的塑料件的破坏情况&#xff0c;以及头部模块的加速度情况&#xff0c;达到保护人头部的效果。 本案例用户可以学习到&#xff1a; 1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023