javascript大作业《web课程设计》用html做一个期末作业网站，梅西足球体育网页，css_web写一个作业网站-程序员宅基地
技术标签： dreamweaver 前端 web前端期末大作业 html html5期末大作业 javascript
一、网站题目
校园篮球网页设计、足球体育运动、体育游泳运动、兵乓球 、网球、等网站的设计与制作。
二、️网站描述
️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。
一套优质的网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有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实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到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>
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/scroll.js"></script>
<title>网站首页</title>
</head>
<body>
<div class="banner"> </div>
<div class="menu">
<ul class="center">
<li><a href="index.html">网站首页</a></li>
<li><a href="jibenxinxi.html">基本信息</a></li>
<li><a href="gerenjilu.html">个人记录</a></li>
<li><a href="jingcaitupian.html">精彩图片</a></li>
<li><a href="huojiangjilu.html">获奖记录</a></li>
<li><a href="shipin.html">精彩视频</a></li>
</ul>
</div>
<div class="content">
<div class="left">
<div class="pics">
<p><img src="images/0.jpg" width="180" /></p>
</div>
</div>
<div class="right">
<h4 class="">基本信息</h4>
<div class="produce">里奥·梅西（Lionel Messi），1987年6月24日出生于阿根廷圣菲省罗萨里奥市，阿根廷足球运动员，司职前锋，现效力于巴塞罗那足球俱乐部。
2000年，梅西加入巴塞罗那俱乐部。2005年，阿根廷青年队夺取世青赛冠军，梅西赢得了金球奖和金靴奖双项大奖。2007年4月18日，梅西在国王杯半决赛对赫塔菲时复制了马拉多纳在世界杯上的连过五人进球。2008年北京奥运会上，梅西随阿根廷国奥队夺取了金牌。2009年底，他当选了欧洲足球先生和世界足球先生。梅西2008-2009赛季率领球队连夺西甲、国王杯和欧冠三个冠军。2011年，梅西获得首届国际足联金球奖，还获得了欧足联欧洲最佳球员。2013年，他以46粒联赛进球的成绩第三次获得欧洲金靴奖奖杯。2014年，梅西随阿根廷队参加2014巴西世界杯。2014年巴西世界杯上，获得世界杯亚军 [1] 。
</p>
</div>
</div>
<div class="bar">图片</div>
<div class="pics scrollleft" >
<ul>
<li>
<p><img src="images/1.jpg" width="200" height="160"/></p>
</li>
<li>
<p><img src="images/2.jpg" width="200" height="160"/></p>
</li>
<li>
<p><img src="images/3.jpg" width="200" height="160"/></p>
</li>
<li>
<p><img src="images/4.jpg" width="200" height="160"/></p>
</li>
<li>
<p><img src="images/5.jpg" width="200" height="160"/></p>
</li>
<li>
<p><img src="images/6.jpg" width="200" height="160"/></p>
</li>
</ul>
<div class="clear"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".scrollleft").imgscroll({
speed: 40, //图片滚动速度
amount: 0, //图片滚动过渡时间
width: 1, //图片滚动步数
dir: "left" // "left" 或 "up" 向左或向上滚动
});
});
</script>
<div class="bar">留言板</div>
<div class="msg pad">
<div> <span class="fl">你的性别：</span>
<input type="radio" name="aa" />
男
<input type="radio" name="aa" />
女 </div>
<div> <span class="fl">留言主题：</span>
<input type="text" size="50" />
</div>
<div> <span class="fl">留言内容：</span>
<textarea style="width:400px" rows="5"></textarea>
</div>
<div> <span class="fl">提交留言：</span>
<input type="submit" value="提交" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="end">
<p>版权所有 网址：www.xxxx.com</p>
</div>
<div class="clear"></div>
</body>
</html>
CSS样式代码
@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{
padding:0; margin:0; list-style:none}
a{
text-decoration:none; color:#000}
html{
}
body{
background:url(../images/gg.jpeg) no-repeat center top #000; width:1000px; margin:0 auto; line-height:21px}
.clear{
clear:both}
.menu li{
list-style:none; font-weight:bold; text-decoration:underline}
.logo{
position:absolute; top:50px; width:250px; height:100px; margin-left:40px}
.banner{
position:relative; height:400px}
.menu{
width:100%; text-align:center; float:left; background:url(../images/menu.jpg)}
.menu li a{
color:#9F0}.menu li {
float:left; padding:15px 30px ; width:100px}
.right{
float:right; width:660px; padding:20px}
.left{
min-height:300px; float:left; width:260px; padding:20px}
.content{
background:#fff; font-size:14px; display:inline-block ; width:100%}
.pics li{
float:left}
.end{
clear:both; background:#603; color:#fff; padding:30px 0; text-align:center;}
.produce img{
margin:0 20px 20px 0}
.produce {
line-height:30px}
.pad{
padding:20px; display:block}
.pics p{
margin:20px; text-align:center}
.imglist{
width:840px; margin:0 auto}
.imglist li{
float:left; width:400px; margin:10px ; text-align:center}
.scrollleft{
margin:0 30px}
.news li{
padding:5px;}
.title{
text-align:center; color:#F00; padding:10px}
.fl{
float:left}
.js div{
width:100%; clear:both; margin-bottom:20px; float:left}
.js div img{
float:left; margin-right:20px}
.msg>div{
padding:10px}
.bar{
border:#000 solid 1px; margin:20px; clear:both; background:url(../images/menu.jpg); color:#9F0; text-decoration:underline; padding:5px}
六、 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。
七、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “️评论” “收藏” 一键三连哦！
2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
智能推荐
JWT(Json Web Token)实现无状态登录_无状态token登录-程序员宅基地
文章浏览阅读685次。1.1.什么是有状态？有状态服务，即服务端需要记录每次会话的客户端信息，从而识别客户端身份，根据用户身份进行请求的处理，典型的设计如tomcat中的session。例如登录：用户登录后，我们把登录者的信息保存在服务端session中，并且给用户一个cookie值，记录对应的session。然后下次请求，用户携带cookie值来，我们就能识别到对应session，从而找到用户的信息。缺点是什么？服务端保存大量数据，增加服务端压力 服务端保存用户状态，无法进行水平扩展 客户端请求依赖服务.._无状态token登录
SDUT OJ逆置正整数-程序员宅基地
文章浏览阅读293次。SDUT OnlineJudge#include<iostream>using namespace std;int main(){int a,b,c,d;cin>>a;b=a%10;c=a/10%10;d=a/100%10;int key[3];key[0]=b;key[1]=c;key[2]=d;for(int i = 0;i<3;i++){ if(key[i]!=0) { cout<<key[i.
年终奖盲区_年终奖盲区表-程序员宅基地
文章浏览阅读2.2k次。年终奖采用的平均每月的收入来评定缴税级数的，速算扣除数也按照月份计算出来，但是最终减去的也是一个月的速算扣除数。为什么这么做呢，这样的收的税更多啊，年终也是一个月的收入，凭什么减去12*速算扣除数了？这个霸道（不要脸）的说法，我们只能合理避免的这些跨级的区域了，那具体是那些区域呢？可以参考下面的表格：年终奖一列标红的一对便是盲区的上下线，发放年终奖的数额一定一定要避免这个区域，不然公司多花了钱..._年终奖盲区表
matlab 提取struct结构体中某个字段所有变量的值_matlab读取struct类型数据中的值-程序员宅基地
文章浏览阅读7.5k次，点赞5次，收藏19次。matlab结构体struct字段变量值提取_matlab读取struct类型数据中的值
Android fragment的用法_android reader fragment-程序员宅基地
文章浏览阅读4.8k次。1，什么情况下使用fragment通常用来作为一个activity的用户界面的一部分例如, 一个新闻应用可以在屏幕左侧使用一个fragment来展示一个文章的列表,然后在屏幕右侧使用另一个fragment来展示一篇文章 – 2个fragment并排显示在相同的一个activity中,并且每一个fragment拥有它自己的一套生命周期回调方法,并且处理它们自己的用户输_android reader fragment
FFT of waveIn audio signals-程序员宅基地
文章浏览阅读2.8k次。FFT of waveIn audio signalsBy Aqiruse An article on using the Fast Fourier Transform on audio signals. IntroductionThe Fast Fourier Transform (FFT) allows users to view the spectrum content of _fft of wavein audio signals
随便推点
Awesome Mac：收集的非常全面好用的Mac应用程序、软件以及工具_awesomemac-程序员宅基地
文章浏览阅读5.9k次。https://jaywcjlove.github.io/awesome-mac/ 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具，主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》，于是建了这么一个仓库，持续更新作为补充，搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issu_awesomemac
java前端技术---jquery基础详解_简介java中jquery技术-程序员宅基地
文章浏览阅读616次。一.jquery简介 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互 jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax_简介java中jquery技术
Ant Design Table换滚动条的样式_ant design ::-webkit-scrollbar-corner-程序员宅基地
文章浏览阅读1.6w次，点赞5次，收藏19次。我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式：.ant-table-body{ &amp;::-webkit-scrollbar { height: 5px; } &amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box..._ant design ::-webkit-scrollbar-corner
javaWeb毕设分享 健身俱乐部会员管理系统【源码+论文】-程序员宅基地
文章浏览阅读269次。基于JSP的健身俱乐部会员管理系统项目分享:见文末!
论文开题报告怎么写？_开题报告研究难点-程序员宅基地
文章浏览阅读1.8k次，点赞2次，收藏15次。同学们，是不是又到了一年一度写开题报告的时候呀？是不是还在为不知道论文的开题报告怎么写而苦恼?Take it easy!我带着倾尽我所有开题报告写作经验总结出来的最强保姆级开题报告解说来啦，一定让你脱胎换骨，顺利拿下开题报告这个高塔，你确定还不赶快点赞收藏学起来吗？_开题报告研究难点
原生JS 与 VUE获取父级、子级、兄弟节点的方法 及一些DOM对象的获取_获取子节点的路径 vue-程序员宅基地
文章浏览阅读6k次，点赞4次，收藏17次。原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ_获取子节点的路径 vue