web前端期末大作业【足球网页】学生网页设计作业源码

news2024/9/21 12:41:13

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 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结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>球星C罗</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-----头部开始------->
<div class="top">
<a href="index.html"><img style="float:left" src="images/logo.jpg" /></a> 
</div>
<!---nav开始---->
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">C罗简介</a></li>
<li><a href="jingdian.html">C罗相册</a></li>
<li><a href="minsu.html">职业生涯</a></li>
<li><a href="techan.html">C罗新闻</a></li>
<li><a href="liuyan.html">贵宾留言</a></li>
</ul>
</div>
</div>
<!---nav结束---->
<!-----banner------->
<div class="ban">
	 <img src="images/banner3.jpg" width="1000" height="335" border="0"  />
				  

</div>

<!-----头部结束------->
<!-----main开始------->
<div class="main">
<div class="box1">
<div class="shang-left">
<div class="gk-title"><a href="about.html"><h1>C罗简介</h1></a></div>
<div class="gk">
<img src="images/gktu.jpg" />
<p>&nbsp;&nbsp;克里斯蒂亚诺·罗纳尔多,简称C罗,1985年2月5日出生于葡萄牙马德拉岛丰沙尔,职业足球运动员,司职边锋可兼任中锋。现效力于意甲尤文图斯足球俱乐部,并身兼葡萄牙国家队队长。C罗带球速度极快,善于突破和射门,拥有强悍的身体素质,技术非常全面。2019年1月4日,获得环球足球奖最佳球员奖项;6月9日,随队1-0战胜荷兰获得首届欧国联冠军,并获得决赛阶段金靴。</p>
</div>
</div>
<div class="xz">
<a href="techan.html"><h1>C罗新闻<span><i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多>></i></span></h1></a>
<a href="tc01.html"><img src="images/tc01.jpg" /></a>
<a href="tc02.html"><img src="images/tc02.jpg" /></a>
<a href="#"><img src="images/tc03.jpg" /></a>
<a href="#"><img src="images/tc04.jpg" /></a>
</div>
<div class="shang-right">
<div class="count-title"><a href="minsu.html"><h1>职业生涯</h1></a></div>
<div class="count">
<br />

<p>&nbsp;&nbsp;C罗出身于葡萄牙著名球队里斯本竞技。2003-04年赛季曼联官方宣布以1,224万英镑转会费买入C罗,取代转会皇家马德里的贝克汉姆成为"7"号球衣的新主人。</p>

<p>&nbsp;&nbsp;加入曼联后,C罗主要担任右翼的角色,但也不时参与左路的进攻。他用华丽的脚法及优秀盘带能力,使球迷对他眼前一亮。</p>

<p>&nbsp;&nbsp;2009年6月26日,皇家马德里官方确认克里斯蒂亚诺·罗纳尔多将于7月1日以8,000万英镑转会费加盟皇马,年薪高达1,200万欧元。</p>
<p>&nbsp;&nbsp;2018年8月19日,在尤文图斯迎战切沃的比赛中,C罗上演意甲首秀.</p>
</div>
</div>
</div>

<div class="meishi">
<div class="yy-title"><a href="jingdian.html"><h1>C罗风采</h1></a></div>
<div class="ms">
<ul>
	<li><img src="images/jd1.jpg" /><p>图一</p></li>
            <li><img src="images/jd2.jpg" /><p>图二</p></li>
            <li><img src="images/jd3.jpg" /><p>图三</p></li>
            <li><img src="images/jd4.jpg" /><p>图四</p></li>
            <li><img src="images/jd5.jpg" /><p>图五</p></li>
   

</ul>
</div>
</div>
<!-----main结束------->
<!-----bottom开始------->
<div class="bottom">
<p>2020-2021@ 版权所有 球星C罗 </p>
</div>
<!-----bottom结束------->
</body>
</html>




💒CSS样式代码

body {
	margin: 0 auto;
	font-size: 12px;
	font-family: "宋体",arial;
	line-height: 22px;
}

div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

li {
	list-style: none;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: #333;
}

a:link {
	color: #333;
}

a:hover {
	color: #629705;
	text-decoration: none;
	overflow: hidden;
}

.top {
	height: 200px;
	width: 1000px;
	margin: 0 auto;
}

.daohang {
	width: 1000px;
	height: 47px;
	background: url(../images/nav-bj.jpg);
	margin: 0 auto;
}

#nav {
	width: 1000px;
	height: 47px;
	line-height: 47px;
	font-family: "宋体";
	font-weight: bolder;
	font-size: 14px;
	margin: 0 auto;
}

#nav ul {
	margin: 0 auto;
}

#nav li {
	float: left;
	width: 165px;
	text-align: center;
	color: #FFF;
}

#nav a {
	width: 165px;
	height: 47px;
	color: #FFF;
	display: block;
	font-family: "宋体";
	font-size: 14px;
	font-weight: bold;
}

#nav a:hover {
	color: #FFF;
	text-decoration: none;
	overflow: hidden;
	background: #224200;
}

.ban {
	height: 335px;
	width: 1000px;
	margin: 0 auto;
}

.main {
	width: 1000px;
	margin: 0 auto;
	margin-top: 10px;
}

.box1 {
	width: 1000px;
	height: 311px;
	margin: 0 auto;
}

.shang-left {
	float: left;
}

.gk-title {
	width: 308px;
	height: 40px;
	background: #3e8400;
}

.gk-title h1 {
	height: 40px;
	line-height: 40px;
	width: 130px;
	margin-left: 20px;
	font-size: 16px;
	color: #FFF;
	font-family: "黑体";
}

.gk {
	width: 296px;
	height: 262px;
	border-left: #8c8c8c 1px solid;
	border-right: #8c8c8c 1px solid;
	border-bottom: #8c8c8c 1px solid;
	background: #FFF;
	padding: 0px 5px;
	padding-top: 10px;
}

.gk span {
	color: #F00;
}

.gk img {
	margin-right: 10px;
	float: left;
}

.xz {
	width: 347px;
	height: 311px;
	padding-left: 5px;
	margin: 0px 15px;
	border: #8c8c8c 1px solid;
	background: #FFF;
	float: left;
	overflow: hidden;
}

.xz h1 {
	height: 35px;
	line-height: 35px;
	font-size: 14px;
	color: #333;
	font-family: "黑体";
}

.xz span {
	font-size: 12px;
	color: #333;
	color: #408602;
	font-family: "Courier New", Courier, monospace
}

.xz img {
	width: 160px;
	height: 120px;
	margin: 5px;
	float: left;
}

.shang-right {
	float: left;
}

.count-title {
	width: 308px;
	height: 40px;
	background: #3e8400;
}

.count-title h1 {
	height: 40px;
	line-height: 40px;
	width: 130px;
	margin-left: 20px;
	font-size: 16px;
	color: #FFF;
	font-family: "黑体";
}

.count {
	width: 286px;
	height: 272px;
	border-left: #8c8c8c 1px solid;
	border-right: #8c8c8c 1px solid;
	border-bottom: #8c8c8c 1px solid;
	background: #FFF;
	padding: 0px 10px;
}

.count p {
	line-height: 20px;
	font-size: 12px;
}

.yy-title {
	width: 1000px;
	height: 40px;
	background: #3e8400;
}


.ncontu ul {
}

.ncontu ul li {
	width: 250px;
	display: block;
	float: left;
	height: 220px;
	overflow: hidden;
	margin-bottom: 15px;
}

.danye {
	color: #666;
	font-size: 14px;
	line-height: 25px;
}

.danye b {
	font-size: 18px;
	display: block;
	text-align: center;
}

.danye img {
	margin: 0 auto;
	display: block;
}

.news {
	width: 100%;
}

.news ul li {
	line-height: 30px;
	height: 30px;
	background: url(../images/fenge.jpg) bottom repeat-x;
	color: #3d2915;
}

.news ul li a {
	float: left;
	display: block;
	line-height: 30px;
	height: 30px;
	background: url(../images/lvdian.jpg) left center no-repeat;
	color: #3d2915;
	padding-left: 20px;
}

.news ul li a:hover {
	color: #000;
}

.news ul li span {
	float: right;
	color: #666;
	line-height: 30px;
}

.biaoti {
	color: #3d2915;
	font-weight: bold;
	font-size: 16px;
	line-height: 40px;
	background: url(../images/fenge.jpg) bottom repeat-x;
	text-align: center;
	margin-bottom: 10px;
	_margin-bottom: 10px;
}

.inpt {
	border: 1px #bbb solid;
	width: 550px;
	height: 20px;
}

.tare {
	border: 1px #bbb solid;
	width: 550px;
	height: 200px;
}

.btn {
	width: 60px;
	height: 25px;
	border: 1px #bbb solid;
	background: #fff;
}





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

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


七、🎁更多干货

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

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

3.

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

在这里插入图片描述

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

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

相关文章

基于C++实现(控制台)单位职工管理系统(数据结构)【100010017】

1需求分析 1.1 问题描述 对单位的职工进行管理&#xff0c; 包括插入、 删除、 查找、 排序等功能。 1.2 问题要求 职工对象数不必很多&#xff0c; 便于一次读入内存&#xff0c; 所有操作不经过内外存交换。 &#xff08;1&#xff09; 由键盘输 入职工对象&#xff0c;…

1564_AURIX_TC275_电压监控寄存器整理

全部学习汇总&#xff1a; GreyZhang/g_TC275: happy hacking for TC275! (github.com) 1. 如果HSM保护开启了&#xff0c;那么访问修改其他的bit就会导致一个总线错误。 2. SMU中可以配置电压监控的相关alarm是否配置 生效。 这个寄存器是几个欠压阈值的配置&#xff0c;在这…

在Ubuntu中为ROG笔记本安装驱动asusctl

我是在Kubuntu22.04上安装的&#xff0c;系统自带“省电”、“平衡”、“性能”三个电源选项&#xff0c;显卡模式切换是拿nvidia驱动切换的&#xff0c;所以目前装的这个驱动我只用到了灯光调节功能。 文章目录介绍安装安装asusctl卸载显卡模式切换驱动supergfxctl使用方法启用…

LwIP——无操作系统启动流程

目录 启动流程 虚拟网卡控制块 发送流程 接收流程 总结 启动流程 通过阅读正点原子的无操作系统移植工程的源码&#xff0c;可以总结出LwIP的无操作系统的启动流程。 前面一些都是基于其他的外设的初始化&#xff0c;我们只关心这里lwip_comm_init()&#xff0c;这个函数的…

eve-ng ubuntu 20.04 设置iptables

eve-ng ubuntu 20.04 设置iptables一、设置方法1、建立iptables规则开机加载脚本2、建立iptables规则关机/重启保存脚本3、添加可执行权限4、保存当前iptables规则到配置文件二、命令解释一、设置方法 1、建立iptables规则开机加载脚本 sudo vi /etc/network/if-pre-up.d/ipt…

(十一)Vue之条件渲染

文章目录v-if与v-else-if、v-else一起使用v-show关于 <template>标签Vue学习目录 上一篇&#xff1a;&#xff08;十&#xff09;Vue之绑定样式 v-if v-if&#xff0c;默认为true&#xff0c;如果为false&#xff0c;底层实现是直接把这个节点删除 适用于&#xff1a;…

MLE,MAP,经验风险最小化,结构风险最小化,邻域风险最小化

文章目录Maximun likelihood extimationMaximum A Posterior EstimationVicinal Risk Minimization, VRMMaximun likelihood extimation 最大似然估计:样本->参数,完全相信观测到的数据,最优可能产生这些看到的数据的模型就是最理想的模型. 频率学派认为,参数是一个常数,不…

fpga实操训练(基础)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 之前我们虽然说过怎么编写verilog代码&#xff0c;怎么用iverilog软件和gtkwave软件进行仿真验证&#xff0c;但是一直没有说明如何在真实的板子上…

web前端期末大作业——基于HTML+CSS+JavaScript仿蘑菇街时尚服装购物商城

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

28个你应该知道的JavaScript技巧

今天我将分享一些Javascript中的常用技巧&#xff0c;以帮助您解决问题。设置过程中的常见问题更快更容易。 01、Javascript 反向字符串 下面是代码&#xff1a; /*niemvuilaptrinh.com*/const stringReverse str > str.split("").reverse().join("")…

搜索引擎项目测试报告

目录单元测试构建索引模块文档信息对象Document的构建的单元测试**针对每一篇文档进行分析、处理、分词**针对文档内容提取关键字的测试&#xff08;正则表达式&#xff09;测试去掉script测试去掉标签完整测试Document类中的parseContent方法关于ansj分词器的测试关于构建倒排…

CleanMyMac4.12.2最新免费的macOS电脑清理工具

相信不少的小伙伴都在用苹果电脑&#xff0c;不论是 iMac&#xff0c;还是 MacBook&#xff0c;用着用着电脑就变慢了。这通病与苹果电脑的性能无关&#xff0c;主要是硬盘空间不足的问题&#xff01;当然你可以在购买电脑的时候就把硬盘升级&#xff0c;但主要的问题是 – 没有…

python代码圣诞树你还没有嘛?所有画法都在这篇文章里拉~

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~ 今天&#xff0c;我就来给大家分享一下python制作的几种圣诞树吧~ 一&#xff1a;唯美圣诞 代码展示 导入模块 完整源码点击领取即可 import turtle as t from turtle import * import random as r import time n 100.0spee…

【JavaWeb】Tomcat的入门使用

1Tomcat的相关概念: Tomcat是Apache软件基金会一个核心项目&#xff0c;是一个开源免费的轻量级Web服务器&#xff0c;支持Servlet/JSP少量JavaEE规范。 概念中提到了JavaEE规范&#xff0c;那什么又是JavaEE规范呢? JavaEE: Java Enterprise Edition,Java企业版。指Java企业…

5年Java开发干到月薪38k?当初实习期2.5k的苦我也吃过...

每一个能在所属行业中成为佼佼者的人&#xff0c;一定都会有他自己的独到的见解以及成长方法......这个观点我非常认同&#xff0c;我不自诩自己是个大佬&#xff0c;但现在也算是做出了头&#xff0c;我从刚毕业做 Java 实习生月薪 2.5k&#xff0c;到现在干了 5 年 Java 开发…

仿雷速体育app踢足球tab

MyTabLayout MyTabLayout用法参照BaseLibrary的Demo GitHub仓库地址 效果图 引入 gradle allprojects {repositories {maven { url https://jitpack.io }} }implementation com.github.DL-ZhangTeng:BaseLibrary:2.3.0属性 MyTabLayout属性名描述&#xff1a;可参考原生控…

Chat GPT使用体验,它真的好厉害!!!

最近的chat GTP很火&#xff0c;起因是OpenAI发布了一个全新的聊天机器人模型。就连马斯克也在感叹“很多人疯狂地陷入了 ChatGPT 循环中”&#xff0c;“ChatGPT 好得吓人&#xff0c;我们离强大到危险的人工智能不远了”。 官方的介绍是&#xff0c;这一模型可以与人类进行谈…

人类特有本能:保护族群老弱病残

人有哪些特有的本能&#xff1f; - 知乎 对于动物群体来说&#xff0c;受伤了就不管了&#xff0c;自生自灭。对于人类来说&#xff0c;受伤了尽量照顾恢复。这看起来吃亏&#xff0c;实际上划算。一个成年人&#xff0c;长大需要20年&#xff0c;受伤恢复只要3个月。 远方青木…

全新CorelDRAW2023最新版矢量图软件功能简介

CorelDRAW2023简介 &#xff1a;设计绘画 CorelDraw 是一个绘图与排版的软件&#xff0c;它广泛地应用于商标设计、标志制作、模型绘制、插图描画、排版及分色输出等诸多领域。 作为一个强大的绘图软件&#xff0c;它被喜爱的程度可用下面的事实说明&#xff1a;用作商业设计和…

WPFUI LiveCharts使用记录(一)柱状图

前言&#xff1a;LiveCharts是一个图标控件库集&#xff0c;可以实现柱状图、折线图、饼图、仪表盘等图表控件。而且最新版本支持全平台使用&#xff0c;实现的样例展示可以点击查看作者Alberto Rodrguez的 github仓库 1.背景 1.1 新建项目 这篇文章使用的是.NET framework4.…