72. Web前端网页制作 足球体育主题网页设计实例 大学生期末大作业 html+css+js
本实例以体育足球为主题设计，应用html+css+js，实现左右垂直菜单导航、图片轮翻效果、留言表单等效果，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
目录
一、前言
本实例以体育足球为主题设计，应用html+css+js，实现左右垂直菜单导航、图片轮翻效果、留言表单等效果，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<html>
<head>
<meta charset="utf-8">
<title>足球网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/rotation.js"></script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="header">
<div class="header_logo">
<a href="index.html">足球网</a>
</div>
<div class="header_nav">
<a href="index.html">足球首页</a>
<a href="view1.html">足球历史</a>
<a href="view2.html">国内足球</a>
<a href="view3.html">硬件要求</a>
<a href="view4.html">场上位置</a>
<a href="view5.html">比赛规则</a>
<a href="view6.html">重要赛事</a>
<a href="view7.html">组织机构</a>
<a href="view8.html">代表人物</a>
<a href="view9.html">访客留言</a>
</div>
</div>
<div id="focus" class="focus">
<ul id="focus_image" class="focus_image" >
<li class="current">
<a href="view6.html"><img src="images/focus6.jpg"/></a>
</li>
<li><a href="view4.html"><img src="images/focus4.jpg"/></a></li>
</ul>
<ul id="focus_button" class="focus_button">
<li class="on"></li>
<li></li>
</ul>
</div>
<div class="side">
<a href="view1.html"><img src="images/index1.jpg"/></a>
<h3><a href="view1.html">足球历史</a></h3>
<p><a href="view1.html">足球项目的起源最早可追溯到中国古代的球类游戏蹴鞠，蹴鞠最初的名字叫做"蹋鞠"，蹴鞠一词最早出现在《史记·扁鹊仓公列传》中，而蹴鞠则被称为中国古代的足球。</a></p>
<p><a href="view1.html">西汉时期，文学家刘向、刘歆父子曾先后在个人著作《别录》、《七略》中记述道："蹴鞠者，传言黄帝所作。"到了唐宋时期，蹴鞠活动已十分盛行，成为宫廷之中的高雅活动。</a></p>
<p><a href="view1.html">在1985年，国际足联第七任主席若昂·阿维兰热曾在中国致辞时说道:"足球运动起源于这里，并且有2000多年的历史，这是无可争议的。"</a></p>
<p><a href="view1.html">2001年，国际足联第八任主席约瑟夫·布拉特在亚洲足联举办的教练员训练班上所作的《国际足球发展史报告》中，再一次强调："足球发源于中国"。2005年，在国际足联成立百年庆典的闭幕式中，中国山东临淄被正式宣布为世界足球起源地。</a></p>
</div>
<div class="main">
<article>
<section>
<a href="view2.html"><img src="images/index2.jpg"/></a>
<h3><a href="view2.html">国内足球</a></h3>
<p><a href="view2.html">中国国家足球队前身是1949年以前的中华民国男子足球队，最早于1913年创建，主要代表中华民国参加远东运动会和奥运会足球赛。中国队在1913年到1934年间连续参加的10届远东运动会足球比赛中曾九夺冠军。</a></p>
</section>
<section>
<a href="view3.html"><img src="images/index3.jpg"/></a>
<h3><a href="view3.html">硬件要求</a></h3>
<p><a href="view3.html">足球比赛场地应为长方形，其长度不得多于120米或少于90米，宽度不得多于90米或少于45米（国际比赛的场地长度不得多于110米或少于100米，宽度不得多于75米或少于64米）。</a></p>
</section>
<section>
<a href="view4.html"><img src="images/index4.jpg"/></a>
<h3><a href="view4.html">场上位置</a></h3>
<p><a href="view4.html">守门员主要职责是守住球门，观察场上比赛变化情况，组织和指挥全队的攻守。边后卫：主要负责防守对方的边锋或插人边锋位置的其他队员，并与中卫协同防守，相互补位，封锁直接进攻球门的去路。</a></p>
</section>
<section>
<a href="view5.html"><img src="images/index5.jpg" class="image"/></a>
</section>
<section>
<a href="view6.html"><img src="images/index6.jpg"/></a>
<h3><a href="view6.html">重要赛事</a></h3>
<p><a href="view6.html">国际足联世界杯，是由国际足球联合会统一领导和组织的世界性的足球比赛，赛事每四年举行一次，三十二支参赛队伍来自世界五大洲的各个国家队，是世界上规模最大、影响最大、水平最高的国家队足球比赛。</a></p>
</section>
<section>
<a href="view8.html"><img src="images/index8.jpg" class="image"/></a>
</section>
</article>
</div>
<div class="footer">
<div class="footer_nav">
<span><a href="index.html">足球首页</a></span>
<span><a href="view1.html">足球历史</a></span>
<span><a href="view2.html">国内足球</a></span>
<span><a href="view3.html">硬件要求</a></span>
<span><a href="view4.html">场上位置</a></span>
<span><a href="view5.html">比赛规则</a></span>
<span><a href="view6.html">重要赛事</a></span>
<span><a href="view7.html">组织机构</a></span>
<span><a href="view8.html">代表人物</a></span>
<span><a href="view9.html">访客留言</a></span>
</div>
<div class="footer_copyright">
Copyright @ 2021 zuqiuwang.com All Rights Reserved. 足球网 版权所有
</div>
</div>
</div>
</div>
</body>
</html>
......
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#333;background-color:#fff;
}
a{color:#666;text-decoration:none;cursor:pointer;
}
a:hover{color:#1675b2;
}
.container{float:left;width:100%;
}
.wrapper{width:1060px;margin:0 auto;overflow:hidden;background-color:#555;
}
.header{float:left;width:1060px;height:110px;background-color:#1675b2;
}
.header_logo{float:left;width:200px;height:110px;line-height:110px;font-size:32px;font-weight:bold;
}
.header_logo a{margin-left:20px;color:#fff;
}
.header_nav{float:left;width:860px;height:30px;line-height:30px;font-size:14px;font-weight:bold;text-align:right;margin-top:50px;
}
.header_nav a{margin-right:20px;color:#fff;
}
.focus{float:left;position:relative;width:1060px;height:440px;
}
.focus_image{float:left;width:1060px;height:440px;list-style:none;
}
.focus_image li{float:left;width:1060px;height:440px;display:none;
}
.focus_image li.current{display:block;
}
.focus_image li img{float:left;width:1060px;height:440px;
}
.focus_button{position:absolute;bottom:10px;right:415px;padding-top:20px;width:130px;height:45px;list-style:none;
}
.focus_button li{float:left;width:20px;height:6px;margin-left:10px;background-color:#555;cursor:pointer;
}
.focus_button li.on{background-color:#1675b2;
}
.side{float:left;width:233px;height:692px;margin:25px 0 0 25px;
}
.side img {float:left;width:233px;height:180px;
}
.side h3{float:left;width:233px;height:20px;line-height:20px;margin-top:12px;
}
.side h3 a{color:#fff;
}
.side p{float:left;width:233px;line-height:25px;margin-top:6px;
}
.side p a{color:#fff;
}
.main{float:left;width:800px;
}
.main article{float:left;width:800px;
}
.main article section{float:left;width:233px;height:340px;margin:25px 0 0 25px;padding-bottom:14px;
}
.main article section img{float:left;width:233px;height:180px;
}
.main article section img.image{float:left;width:233px;height:340px;
}
.main article section h3{float:left;width:233px;height:20px;line-height:20px;margin-top:12px;
}
.main article section h3 a{color:#fff;
}
.main article section p{float:left;width:233px;line-height:25px;margin-top:6px;
}
.main article section p a{color:#fff;
}
.menu{float:left;width:120px;margin:30px 0 0 30px;
}
.menu h3{float:left;width:120px;height:30px;line-height:30px;margin-bottom:2px;color:#fff;text-align:center;
}
.menu span{float:left;width:120px;height:40px;line-height:40px;text-align:center;border-bottom:1px dashed #e8e8e8;
}
.menu span a{color:#fff;
}
.content{float:left;width:820px;margin-left:30px;padding-bottom:30px;color:#fff;
}
.content article{float:left;width:820px;margin-top:30px;border-left:1px solid #e8e8e8;
}
.content article h3{float:left;width:750px;height:30px;line-height:30px;margin-left:65px;font-size:16px;text-align:center;
}
.content article img{float:left;width:750px;margin:20px 0 20px 65px;
}
.content article p{float:left;width:750px;line-height:25px;margin:5px 0 5px 65px;font-size:13px;text-indent:25px;overflow:hidden;
}
.word{float:left;width:820px;margin-left:30px;padding-bottom:50px;color:#fff;border-left:1px solid #e8e8e8;
}
.word form{float:left;margin:100px 0;
}
.word p{float:left;width:820px;
}
.word p span{float:left;width:260px;height:65px;line-height:65px;font-size:14px;color:#fff;text-align:right;
}
.word p input{float:left;width:330px;height:35px;margin:15px 0 0 20px;
}
.word p b{float:left;width:130px;height:35px;margin:15px 0 0 20px;color:#fff;font-size:14px;font-weight:normal;
}
.word p input.submit{color:#fff;letter-spacing:3px;background-color:#1675b2;border:0;
}
.word p textarea{float:left;width:330px;height:260px;line-height:35px;margin:15px 0 10px 20px;
}
......
3.JS
代码如下（节选示例）：
window.onload=function()
{
function getIdName(id,tagName)
{
if(tagName!=0)
{
return document.getElementById(id).getElementsByTagName(tagName);
}
else
{
return document.getElementById(id);
}
}
function rotation(json)
{
var that;
var start=0;
var index=0;
var timer=null;
var option={
li:"li", //默认用li包裹
wrapperId:"", //最外面 id
imageId:"", //图片外面id
buttonId:"", //按钮外面id
ms:4000 //多少毫秒切换一张,默认4000毫秒
}
for(var i in option)
{
if(json[i]!=undefined)
{
option[i]=json[i];
}
}
var wrapper=getIdName(option.wrapperId,0);
var images=getIdName(option.imageId,option.li);
var buttons=getIdName(option.buttonId,option.li);
function scrollImage(that)
{
if(that>=0)
{
index=that;
}
else
{
if(start==0)
{
index++;
}
else
{
index--;
start=0;
}
}
if(index>=buttons.length) index=0;
if(index<0) index=buttons.length-1;
for(var j=0;j<buttons.length;j++)
{
images[j].className="";
buttons[j].className="";
}
images[index].className="current";
buttons[index].className="on";
}
images[index].className="current";
buttons[index].className="on";
for(var i=0;i<buttons.length;i++)
{
buttons[i].index=i;
buttons[i].onclick=function()
{
that=this.index;
scrollImage(that);
}
}
timer=setInterval(scrollImage,option.ms);
wrapper.onmouseover=function()
{
clearInterval(timer);
}
wrapper.onmouseout=function()
{
timer=setInterval(scrollImage,option.ms);
}
}
rotation({
wrapperId:"focus_wrapper",
imageId:"focus_image",
buttonId:"focus_button"
});
}
...
五、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
14
0- 0
已为社区贡献16条内容
所有评论(0)