【网页设计】期末大作业html+css(体育网站--足球 6页 )

news2024/11/16 5:39:57

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园篮球网页设计 | 足球体育运动 | 体育游泳运动 | 兵乓球 | 网球 | 等网站的设计与制作 | HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

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

HTML结构代码




<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>足球</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="page">
			<div class="logo"><img src="images/logo.png" alt=""></div>
			<div class="banner"><img src="images/banner.jpg" alt=""></div>
			<div class="nav">
				<ul>
					<a href="index.html"><li>网站首页</li></a>
					<a href="ls.html"><li>项目历史</li></a>
					<a href="yq.html"><li>硬件要求</li></a>
					<a href="wz.html"><li>场上位置</li></a>
					<a href="gz.html"><li>比赛规则</li></a>
					<a href="sp.html"><li>视频片段</li></a>
				</ul>
			</div>
			<div class="mid">
				<div class="left fl">
					<h1 class="title"><span>足球</span></h1>
					<div class="wz">
						<p>足球(Football[英]、 Soccer[美])是一项以脚为主,控制和支配球,两支球队按照一定规则在同一块长方形球场上互相进行进攻、防守对抗的体育运动项目。因足球运动对抗性强、战术多变、参与人数多等特点,故被称为“世界第一运动”。</p>
						<p>现代足球的前身起源于中国古代山东淄州(今淄博市)的球类游戏“蹴鞠”,后经阿拉伯人由中国传至欧洲,逐渐演变发展为现代足球。现代足球始于英国。1848年,足球运动历史上第一部文字形式的规则《剑桥规则》诞生。1863年10月26日,英格兰成立了世界上第一所足球协会,并统一了足球运动的竞赛规则。1872年,英格兰与苏格兰之间举行了足球史上第一次协会间的正式比赛。1900年,在第二届夏季奥林匹克运动会中,足球被列入正式项目。足球在全球被广泛译为“Football”,只有在美国等极少数国家被译为“Soccer”,而“Football”在美国、加拿大被指为“美式橄榄球”。</p>
						<p>足球的最高组织机构为国际足球联合会,成立于1904年,总部设于瑞士苏黎世。中国最高组织机构是中国足球协会,1955年1月3日成立于北京。</p>
						<p class="tu"><img src="images/t1.jpg" alt=""><img src="images/t2.jpg" alt=""></p>
					</div>
				</div>
				<div class="right fr">
					<h1 class="title"><span>代表人物</span></h1>
					<div class="wz">
						<img src="images/t3.jpg" alt="">
						<p>贝利,全名埃德松·阿兰特斯·多·纳西门托,1940年10月23日出生于巴西特雷斯科拉松伊斯,巴西著名足球运动员,司职前锋。1957年,贝利入选巴西国家队,代表巴西队参赛92场打进77球,夺得1958、1962、1970年三届世界杯冠军,为巴西永久保留雷米特杯,成为唯一曾三夺世界杯冠军的球员。</p>
						<p>迭戈·阿曼多·马拉多纳 (1960年10月30日—2020年11月25日),出生于阿根廷布宜诺斯艾利斯,阿根廷职业足球运动员、教练员,司职中前场。1986年6月,马拉多纳在世界杯上演上帝之手和世纪进球,率领阿根廷队获得世界杯冠军。1990年7月,马拉多纳率领的阿根廷队,在世界杯决赛中不敌德国队,获得亚军。</p>
					</div>
				</div>
			</div>
			<div class="foot">Copyright © 足球</div>
		</div>
	</body>
</html>


学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

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

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

相关文章

mTD-SCDMA与TD-LTE双网络垂直切换matlab仿真

目录 1.算法描述 2.仿真效果预览 3.MATLAB部分代码预览 4.完整MATLAB程序 1.算法描述 TD-SCDMA与TD-LTE共覆盖的范围内覆盖半径1000m&#xff1b; TD-SCDMA中心坐标(0,0)&#xff0c;覆盖半径1000m&#xff1b; 两个TD-LTE基站的中心坐标为&#xff08;150&#xff0c;0…

刚毕业被骗去了小公司,天天“取数做表”,后悔没早点用上这工具

经常看到年轻人提问“究竟是去大公司打杂好&#xff0c;还是去小公司磨练好&#xff1f;”这个问题我年轻的时候也想过&#xff0c;当时觉得去大公司只能当螺丝钉&#xff0c;做按部就班的工作&#xff0c;于是毅然决然放弃了大厂offer去了一家IT部门只有3个人的公司。当时我在…

通过电子文档管理改善患者体验和办公效率

通过电子文档管理改善患者体验和办公效率 在不远的过去&#xff0c;手动输入医疗信息和物理归档系统是所有医疗办公室的标准操作程序。医生和工作人员别无选择&#xff0c;只能写下信息&#xff0c;然后手动将数据输入办公系统。 当要求所有从业者使用电子病历的授权作为“患…

亚马逊买家号造成被封的原因有哪些?

现在很多人反馈说亚马逊买家号太容易被封了&#xff0c;去下单时都不知道什么情况都就砍单&#xff0c;账号登录不上了&#xff0c;而关于亚马逊买家号被封这个问题&#xff0c;不是一两个因素就能决定的&#xff0c;那么亚马逊买家号造成被封的原因有哪些&#xff1f; 1、账号…

虚拟机三种网络模式

基本知识 ipconfig查看信息。 网关(Gateway)又称网间连接器、协议转换器。是你连接到的上层节点的地址。 ip地址是你本身的地址&#xff08;如果是路由器分配的 那么是路由器所构建的内网地址&#xff09; 网卡&#xff1a;需要网卡才能连接其他设备 是设备端的 交换机&#x…

[附源码]SSM计算机毕业设计教师业绩考核系统JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Mybatis-Plus条件构造器学习and方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 Mybatis-Plus条件构造器学习and方法一、代码1.Controller2、Service3、效果一、代码 1.Controller GetMapping("/queryProductList1")public List<ProductDTO&…

panads基础入门

目录 一、查看数据 二、选择数据 1、选择单列 2、 用 [ ] 切片行&#xff1a; 3、标签选择 1、选择某列的某一行&#xff0c;如下是 A 列 第 51 行的值 2、B列与A列的数据相互替换 3、用标签选取多列 4、用标签切片&#xff0c;包含行与列结束点&#xff1a; 5、提取标…

传奇列表格式怎么上传以及公告小窗口皮肤如何设置

相信各位新手小白GM在架设传奇配置登录器的时候都会遇到列表格式的问题&#xff0c;接下来我来教各位登录器的这个列表格式该怎么上传&#xff0c;列表上传地址&#xff1a;传奇常用引擎免费单机列表格式-传奇入门GOM-GEE引擎教学 我们版本是什么引擎我们就用什么引擎的列表格式…

基于Zookeeper实现高可用架构

Zookeeper高可用相关特性 Zookeeper介绍 ZooKeeper is a distributed, open-source coordination service for distributed applications It exposes a simple set of primitives that distributed applications can build upon to implement higher level services for sync…

分布式协调系统ZooKeeper实践与原理剖析

基础的一些知识&#xff0c;高阶知识后续看看补充 第一章 ZooKeeper概述 1.1 介绍 What is ZooKeeper&#xff1f; Apache ZooKeeper is an effort to develop and maintain an open-source server which enables highly reliable distributed coordination ZooKeeper is…

EasyX图形库的下载安装与Dev-C++配置

1.下载Dev-Cpp 6.3版本&#xff08;红色logo&#xff09; 下载地址&#xff1a;Download Dev-C for Windows 10/8/7 from SourceForge.netA fast, portable, simple, and free C/C IDEhttps://sourceforge.net/projects/embarcadero-devcpp/files/v6.3/Embarcadero_Dev-Cpp_6.3…

详细介绍百度ERNIE 2.0:A Continual Pre-Training Framework for Language Understanding

阅读更多&#xff1a;详细介绍百度ERNIE&#xff1a;Enhanced Representation through Knowledge Integration 文章目录ERNIE 2.0简介相关工作语言表征的无监督学习持续学习ERNIE2.0 框架持续的预训练预训练任务的构建持续的多任务学习针对应用任务的微调ERNIE 2.0模型模型结构…

【Java八股文总结】之消息队列

文章目录消息队列一、消息队列常见面试题1、什么是消息队列&#xff1f;2、为什么要用消息队列&#xff1f;3、使用消息队列存在的问题4、JMS vs AMQP&#xff08;一&#xff09;JMSQ&#xff1a;什么是JMS&#xff1f;Q&#xff1a;JMS两种消息模型Q&#xff1a;JMS五种不同消…

Lucid EDI需求分析及项目注意事项

Lucid Motors路西德汽车&#xff0c;是一家美国电动汽车制造商&#xff0c;总部位于美国加利福尼亚州纽瓦克。除了电动汽车&#xff0c;Lucid还有储能技术和代工生产等业务。公司成立于2007年。 截至2021年9月&#xff0c;其第一辆汽车Lucid Air已投入生产&#xff0c;于2021年…

使用arduino编写mqtt客户端连接emqx服务器

摘要&#xff1a;mqtt客户端可以有很多种&#xff0c;本文介绍一种使用arduino d1&#xff08;esp8266&#xff09;制作的客户端&#xff0c;连接emqx服务器的方法。 首先需要配置开发环境&#xff0c;配置方法可以参考文章 (1条消息) 使用arduino开发esp8266和esp32时首选项设…

美容美发店会员管理系统开发_分享美容美发店做会员管理系统的好处

为什么都在做美容美发店会员管理系统&#xff1f; 最主要的目的就是将新客留住&#xff0c;并通过各种会员福利发展成愿意多次消费的长期会员。 美容美发店作为服务类行业&#xff0c;吃的大部分都是回头客的盈利&#xff0c;而回头客的消费意愿&#xff0c;也普遍会比新客要…

Executor接口实现线程池管理

从JDK5开始&#xff0c;在java.util.concurrent包下增加了Executor接口及其子类&#xff0c;允许使用线程池技术来管理线程并发问题。Executor接口提供了一个常用的ExecutorService子接口&#xff0c;通过该子接口可以很方便地进行线程池管理。 通过Executor接口实现线程池管理…

LeetCode 0529. 扫雷游戏

【LetMeFly】529.扫雷游戏 力扣题目链接&#xff1a;https://leetcode.cn/problems/minesweeper/ 让我们一起来玩扫雷游戏&#xff01; 给你一个大小为 m x n 二维字符矩阵 board &#xff0c;表示扫雷游戏的盘面&#xff0c;其中&#xff1a; M 代表一个 未挖出的 地雷&am…

【前端】博客系统——简单的页面设计

前端 传送门【前端】HTML入门 —— HTML的常见标签 【前端】CSS(1) —— CSS的基本语法和一些简单的选择器 博客系统 (简单的页面设计)目录页面介绍效果预览代码实现实现博客列表页实现导航栏 版心实现导航栏 部分版心样式实现列表页版心样式实现博客正文页实现导航栏 版心…