大学生HTML期末大作业——HTML+CSS+JavaScript足球

文章目录 隐藏

💥 文章目录

一、🏁 网站题目

💪💪💪 运动网站足球 8页含登录注册

二、🚩 网站描述

🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）

🥇 一套A+的网页应该包含 (具体可根据个人要求而定)

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

三、🎌 网站介绍

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

📃网站程序方面：计划采用最新的网页编程语言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实现动态轮播特效, 表单提交, 点击事件等等。

四、🏴 网站效果

五、🏳️ 网站代码

!DOCTYPE html>
html lang="en">
  head>
    meta charset="UTF-8" />
    meta name="viewport" content="width=device-width, initial-scale=1.0" />
    title>首页-足球生活/title>
    link rel="stylesheet" href="./css/reset.css" />
    link rel="stylesheet" href="./css/common.css" />
    link rel="stylesheet" href="./css/index-life.css" />
    link rel="stylesheet" href="./iconfont/iconfont.css" />
  /head>

  body>
    header>
      ul class="head-tit">
        li class="head-tit-on">
          a href="./index-spot.html"> 热点 /a>
        /li>
        li>
          a href="./focus.html"> 关注 /a>
        /li>
      /ul>
    /header>

    main>
      ul class="main-nav">
        li>
          a href="./index-spot.html"> 足球现场 /a>
        /li>
        li class="main-nav-on">
          a href="#"> 足球生活 /a>
        /li>
        li>
          a href="./index-spot.html"> 足球美女 /a>
        /li>
      /ul>

      ul class="main-con">
        li>
          img src="./images/index-life/pic1.jpg" alt="" />
          p>徐云龙争顶/p>
        /li>
        li>
          img src="./images/index-life/pic2.jpg" alt="" />
          p>马季奇向裁判示意对手拉扯武磊进球后腿抽筋/p>
        /li>
        li>
          img src="./images/index-life/pic1.jpg" alt="" />
          p>徐云龙争顶/p>
        /li>
        li>
          img src="./images/index-life/pic2.jpg" alt="" />
          p>马季奇向裁判示意对手拉扯武磊进球后腿抽筋/p>
        /li>
        li>
          img src="./images/index-life/pic2.jpg" alt="" />
          p>马季奇向裁判示意对手拉扯武磊进球后腿抽筋/p>
        /li>
        li>
          img src="./images/index-life/pic2.jpg" alt="" />
          p>马季奇向裁判示意对手拉扯武磊进球后腿抽筋/p>
        /li>
      /ul>
    /main>

    footer>
      ul class="foot-nav">
        li class="foot-nav-on">
          a href="./index-life.html">
            i class="iconfont icon-shouye">/i>
            span>首页/span>
          /a>
        /li>
        li>
          a href="./discover.html">
            i class="iconfont icon-sousuo">/i>
            span>发现/span>
          /a>
        /li>
        li class="cam">
          a href="#">
            i class="iconfont icon-xiangji">/i>
          /a>
        /li>
        li>
          a href="./person.html">
            i class="iconfont icon-icon">/i>
            span>我的/span>
          /a>
        /li>
        li>
          a href="#">
            i class="iconfont icon-icon_tuichu">/i>
            span>退出/span>
          /a>
        /li>
      /ul>
    /footer>

    script src="./js/flexible.js">/script>
  /body>
/html>

六、🏳️‍🌈 如何学习进步

看书、看博客、学课程或者看视频等
模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
思考学习别人思路后，脱离书本和博客，完全自己实现功能
自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
在别人的框架和要求下，写代码实现业务
自己负责别人设计的模块的实现
独立设计业务模块并开发实现
负责大项目框架设计和拆分，带领别人进行开发
其他高阶的架构和管理工作，已经不仅仅是代码能力了

七、🏴‍☠️ 更多干货

🌝 关注我学习更多知识~

🌝 支持我，请点赞 + 好评 + 收藏三连，带来更多文章~

🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~

相关推荐: 企业用文心一言优化员工培训：自动生成岗位考核题库的实操

在当今竞争激烈的商业环境中，员工培训是企业提升核心竞争力的关键环节。传统培训方式往往效率低下、成本高昂，难以满足快速变化的岗位需求。例如，客服岗位需要员工掌握沟通技巧，但手动设计考核题库耗时费力，且难以保证题目质量。随着人工智能技术的飞速发展，企业可以借助大语…

💥 文章目录

一、🏁 网站题目

💪💪💪 人物明星（贝克汉姆）8页

二、🚩 网站描述

🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）

🥇 一套A+的网页应该包含 (具体可根据个人要求而定)

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

三、🎌 网站介绍

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

📃网站程序方面：计划采用最新的网页编程语言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实现动态轮播特效, 表单提交, 点击事件等等。

四、🏴 网站效果

五、🏳️ 网站代码

!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>只因有你/title>
style type="text/css">
!--
body {
	background-color: #000000;
}
-->
/style>
link href="style.css" rel="stylesheet" type="text/css" />
script src="Scripts/AC_RunActiveContent.js" type="text/javascript">/script>
style type="text/css">
!--
#apDiv1 {
	position:relative;
	left:309px;
	top:85px;
	width:414px;
	height:46px;
	z-index:1;
}
.STYLE1 {
	color: #000000;
	font-size: 24px;
	font-family: "华文行楷";
}
#apDiv2 {
	position:absolute;
	left:323px;
	top:252px;
	width:356px;
	height:295px;
	z-index:2;
}
.STYLE3 {font-size: 31px}
#apDiv3 {
	position:absolute;
	left:434px;
	top:668px;
	width:129px;
	height:69px;
	z-index:3;
}
#photo {
	position: absolute;
	top: 296px;
	left: 462px;
	width: 400px;
}
-->
/style>
/head>

body>
center>
 div id="header">
      ul id="logo">
        div align="right">David Beckham/div>
        h1>img src="images/EYkpndkHgAH5NoL.gif" width="211" height="60" />/h1>
      /ul>
      ul id="nav">
        li>a href="index.html">欢迎页面/a>/li>
        li>a href="first.html">个人简介/a>/li>
        li>a href="two.html">只因有你/a>/li>
        li>a href="third.html">Album/a>/li>
        li>a href="forth.html">光荣Forever/a>/li>
        li>a href="fifth.html">百球经典/a>/li>
        li>a href="sixth.html">永恒历史/a>/li>
      /ul>
  /div>
/center>
!-- header -->

div class="STYLE1" id="apDiv1">　
  p class="STYLE3">只因有你　　　　/p>
  p class="STYLE3">　　　　　－－－背影/p>
/div>

div id="first">
  div align="center">
    div>img src="images/bg.jpg" />/div>
  /div>
/div>
img id='photo' align="center" src='tupian/0032afc34f04dc7ab319a80e.jpg'>

/img>
/body>
/html>

六、🏳️‍🌈 如何学习进步

看书、看博客、学课程或者看视频等
模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
思考学习别人思路后，脱离书本和博客，完全自己实现功能
自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
在别人的框架和要求下，写代码实现业务
自己负责别人设计的模块的实现
独立设计业务模块并开发实现
负责大项目框架设计和拆分，带领别人进行开发
其他高阶的架构和管理工作，已经不仅仅是代码能力了

七、🏴‍☠️ 更多干货

🌝 关注我学习更多知识~

🌝 支持我，请点赞 + 好评 + 收藏三连，带来更多文章~

🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~

相关推荐: C++ 在 Windows 和 Linux 平台上的开发差异及常见问题

C++ 作为一种跨平台的编程语言，在 Windows 和 Linux 平台上的开发虽然共享核心语言特性，但由于操作系统架构、系统调用、工具链和开发习惯的不同，存在诸多差异。理解这些差异对于开发高质量、可移植的 C++ 应用程序至关重要。以下从多…

💥 文章目录

一、🏁 网站题目

💪💪💪 学校网站（深圳大学）含注册登录 JQuery 13页

二、🚩 网站描述

🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）

🥇 一套A+的网页应该包含 (具体可根据个人要求而定)

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

三、🎌 网站介绍

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

📃网站程序方面：计划采用最新的网页编程语言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实现动态轮播特效, 表单提交, 点击事件等等。

四、🏴 网站效果

五、🏳️ 网站代码

!doctype html>
html>
head>
meta charset="utf-8">
title>深圳大学物理与核工程虚拟仿真教学中心/title>
link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/>
/head>

body>
div id="hearder2" class="clearfix">
	div class="logo">
   	  img src="images/logo1.png">
  /div>
  div class="logo-name">物理实验教学示范中心/div>
  div class="form-tools">
   	  form id="search" name="search" method="post">
      	div class="tools-link">
        	a href="index2.html" target="_blank">物理与核工程虚拟仿真教学中心/a>
        /div>
        div class="search-box">
            input type="text" name="textfield" id="textfield" class="input-text" placeholder="请输入搜索关键词">
            input type="image" src="images/search.png" class="input-submit" />
        /div>
  	  /form>
    /div>
/div>
div id="menu-box" class="clearfix">
	ul>
    	li>a href="index.html">首页/a>/li>
        li>a href="detail1.html">中心概况/a>/li>
        li>a href="list-pic1.html">师资队伍/a>/li>
        li>a href="list-pic1.html">设备资源/a>/li>
        li>a href="detail1.html">教学模式/a>/li>
        li>a href="form1.html">网上教学/a>/li>
        li>a href="list-text1.html">新闻中心/a>/li>
        li>a href="list-text1.html">创新成果/a>/li>
        li>a href="detail1.html">联系我们/a>/li>
    /ul>
/div>
div id="slider-box" style="background:url(images/slider4.jpg) center center;">/div>
!-- detail -->
div id="detail2-box" class="clearfix">
	div class="tit-80">a href="list-text1.html">新闻中心/a> - 查看详情/div>
    div class="tabula-box">
    	div class="max-tit">新闻中心/div>
        ul>
            li>a href="list-text1.html">新闻文章类型1/a>/li>
            li>a href="list-text1.html">新闻文章类型2/a>/li>
            li>a href="list-text1.html">新闻文章类型3/a>/li>
            li>a href="list-text1.html">新闻文章类型4/a>/li>
            li>a href="list-text1.html">新闻文章类型5/a>/li>
            li>a href="list-text1.html">新闻文章类型6/a>/li>
            li>a href="list-text1.html">新闻文章类型7/a>/li>
            li>a href="list-text1.html">新闻文章类型8/a>/li>
            li>a href="list-text1.html">新闻文章类型9/a>/li>
        /ul>
    /div>
    
    div class="content-box">
    	h1>新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题/h1>
        div class="content">
        	br />br />
        	--------- 这里显示富文本图文内容区 ---------
            br />br />br />br />br />br />br />br />br />br />br />br />br />br />br />br />
        /div>
        div class="n-p-box clearfix">
        	div class="prv">a href="#">上一篇：11新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻/a>/div>
            div class="next">a href="#">下一篇：22新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻/a>/div>
        /div>
    /div>
/div>
!-- div5 -->
div id="div5" class="clearfix">
    div class="link-box">
    	span>友情链接：/span>
        select onChange="frlink(this)" name="select" class="select-link">
            option selected>--- 教育类网站 ---/option>
            option value="http://www.veryhuo.com">烈火网/option>
            option value="http://www.sina.com.cn">新浪网/option>
            option value="http://www.163.com">网易/option>
        /select>
        select onChange="frlink(this)" name="select" class="select-link">
            option selected>--- 政府类网站 ---/option>
            option value="http://www.china.com">中华网/option>
            option value="http://www.sina.com.cn">新浪网/option>
            option value="http://www.163.com">网易/option>
        /select>
        select onChange="frlink(this)" name="select" class="select-link">
            option selected>--- 校园类网站 ---/option>
            option value="http://www.veryhuo.com">烈火网/option>
            option value="http://www.sina.com.cn">新浪网/option>
            option value="http://www.163.com">网易/option>
        /select>
        select onChange="frlink(this)" name="select" class="select-link">
            option selected>--- 其它类网站 ---/option>
            option value="http://www.veryhuo.com">烈火网/option>
            option value="http://www.sina.com.cn">新浪网/option>
            option value="http://www.163.com">网易/option>
        /select>
    /div>
/div>
div id="div6">Copyright &copy; 2016 物理与核工程虚拟仿真教学中心 All rights reserved./div>

/body>
/html>

六、🏳️‍🌈 如何学习进步

看书、看博客、学课程或者看视频等
模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
思考学习别人思路后，脱离书本和博客，完全自己实现功能
自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
在别人的框架和要求下，写代码实现业务
自己负责别人设计的模块的实现
独立设计业务模块并开发实现
负责大项目框架设计和拆分，带领别人进行开发
其他高阶的架构和管理工作，已经不仅仅是代码能力了

七、🏴‍☠️ 更多干货

🌝 关注我学习更多知识~

🌝 支持我，请点赞 + 好评 + 收藏三连，带来更多文章~

🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~

相关推荐: 文心一言在气象研究的应用：气候模拟

文心一言在气象研究的应用：气候模拟——用AI给地球未来”写剧本” 关键词：文心一言、气候模拟、大语言模型、气象研究、AI预测摘要：本文将带您走进AI与气象科学的交叉领域，揭秘文心一言这样的大语言模型如何革新传统气候模拟。我们将用”给地球拍电影”的比喻，从气候…

大学生HTML期末大作业——HTML+CSS+JavaScript足球

💥 文章目录

一、🏁 网站题目

二、🚩 网站描述

三、🎌 网站介绍

四、🏴 网站效果

五、🏳️ 网站代码

六、🏳️‍🌈 如何学习进步

七、🏴‍☠️ 更多干货

大学生HTML期末大作业——HTML+CSS+JavaScript人物明星（贝克汉姆）

💥 文章目录

一、🏁 网站题目

二、🚩 网站描述

三、🎌 网站介绍

四、🏴 网站效果

五、🏳️ 网站代码

六、🏳️‍🌈 如何学习进步

七、🏴‍☠️ 更多干货

大学生HTML期末大作业——HTML+CSS+JavaScript学校网站（深圳大学）

💥 文章目录

一、🏁 网站题目

二、🚩 网站描述

三、🎌 网站介绍

四、🏴 网站效果

五、🏳️ 网站代码

六、🏳️‍🌈 如何学习进步

七、🏴‍☠️ 更多干货

相关推荐

对比kimi、通义千问、文心一言的写代码能力

热门文章

AI大模型,我们的未来