大一作业HTML网页作业 HTML校园篮球网页作业(12个页面)

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页:【主页——🚀获取更多优质源码】
🎓 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>小墨斯运动馆title>
link href="css/style.css" rel="stylesheet" type="text/css" />
link href="css/video.css" rel="stylesheet" type="text/css" />
script type="text/javascript" src="js/jquery-1.js">script>

script type="text/javascript" src="js/static_pc_js_addons.js">script>
script type="text/javascript" src="js/static_pc_js_jquery.js">script>

head>

body>
 div class="wrap  pt10">
  p class="fl overflow">a href="#">img src="images/1index_r1_c6.jpg" />a>p>
  div class="right_nav  fr pt5">
   h1 class="fr">img src="images/1index_r2_c21.jpg" class="fl" /> 0371-56610889h1>


  div class="menu"> 
ul> 
li>a class="hide" href="#">首页a>li>
li>a class="hide" href="#">墨斯童年a> 
 
ul> 
li>a href="#" title="The zero dollar ads page">公司简介a>li> 
li>a href="#" title="Wrapping text around images">企业文化a>li> 
ul> 
 
li> 
li>a class="hide" href="index.html">墨斯部落a> 
 
ul> 
li>a href="#" title="a coded list of spies">置地新闻a>li> 
li>a href="#" title="a horizontal vertical menu">行业咨询a>li> 
li>a href="#" title="an enlarging unordered list">媒体聚集a>li> 
ul> 
 
li> 
li>a class="hide" href="#">墨斯运动a> 
 
ul> 
li>a href="#" title="Cross browser fixed layout">公告通函a>li> 
li>a href="#" title="Cross browser fixed layout">年报 / 中报a>li> 
li>a href="#" title="Cross browser fixed layout">财务报告a>li> 
ul> 
 
li> 
li>a class="hide" href="#">墨斯疯吧a> 
 
ul> 
li>a href="#" title="a coded list of spies">地产开发a>li> 
li>a href="#" title="a horizontal vertical menu">房屋租赁a>li> 
ul> 
 
li> 
li>a class="hide" href="#">关于墨斯a> 
 
ul> 
li>a href="#" title="a coded list of spies">地产开发a>li> 
li>a href="#" title="a horizontal vertical menu">房屋租赁a>li> 
ul> 
 
li> 
ul> 
 
div class="clear"> div> 
div> 

 
   
  div>
 div>

div class=" clearfix overflow w100 pt5">

div class="sy_header">
	    
    div class="b11s" style="height: 800px;">
  
 
      div class="slide-wrap">
            ul>
                li id="s1" class="selected">
                    video poster="" loop="" src="images/1.mp4">video>
                    div class="bg">
                    div>
                    div class="wrap">
                        div class="img">
                            img src="images/tututu3.png" ;="">
                        div>
                        div class="text">
                            
                        div>
                        
                    div>
                li>
                
                
                
                
            ul>
        div>



  
  div>
  
  
  
  script>
  
  
  		  function setcc()   {
	  
	  
	    var w=$(window).width();
	  
	
	
	 var sh3=w*800/1920;
	  
			
			
			
			$(".b11s").css({"height":sh3+"px"});
			
			
			
			
			}
	
	
		  setcc() ;
		  
	  $(window).resize(function () {   
	  
	
	   setcc() ;
	     
 
});
	
  
  script>
  
  

style>

.b11s {
	width:100%;
	height:800px;

}


style>
div>
div>


div class="wrap overflow clearfix pt95">img src="images/1index_r7_c10.jpg" />div>
div class="why_bg overflow  clearfix wrap">
 div class="w574 fl overflow pt20 ">
  h5>儿童体育运动可以塑造孩子多领域的素养及能力！h5>
  p>
   运动过程中所产生的荷尔蒙是可以提高我们的记忆力、理解力和解决问题的能力；此外，哈佛大学著名心理学家加德纳教授认为运动本身就一种能力所存在，运动能力也是一种特别有意义的智力，而它让我们产生意志力、行动的控制力和学习力，以及对外界环境的反应力、自我保护力等等，其实这些能力是与我们的认知智力有着同等重要的意义和价值！p>
  p>
  墨斯运动，就是让我们的孩子不要丧失这种能力，因为它会给孩子带来的不仅仅是体质上的强壮，更具有成长和自信力的建立、塑造自我超越自我的价值所在。p>
 div>
div>

div class="wrap overflow clearfix pt95">a href="#">img src="images/1index_r9_c14.jpg" />a>div>
div class="wrap overflow clearfix pt95 news">
 ul>
  li>a href="#">img src="images/1index_r11_c5.jpg" />a>li>
  li>a href="#">img src="images/1index_r11_c13.jpg" />a>li>
  li>a href="#">img src="images/1index_r11_c19.jpg" />a>li>
 ul>
div>

div class="wrap overflow clearfix pt95">a href="#">img src="images/1index_r13_c14.jpg" />a>div>
div class="wrap overflow clearfix pt95 kctx">
 dl>
  dt>
   a href="#">
    em>基础训练体系em>
   img src="images/1indbex_r4_c3.jpg" width="257" height="160" />
   a>
  dt>
  dd>
   p>
    田径为核心br />
跑 + 投 + 跳 + 力量 + 速度
   p>
  dd>
 dl>
 dl>
  dt>
   a href="#">
    em>基础训练体系em>
   img src="images/1indbex_r4_c3.jpg" width="257" height="160" />
   a>
  dt>
  dd>
   p>
    上肢体的训练br />
儿童定制篮球重点br />
和特色源自定制br />
力量 + 精准度 + 协调 + 平衡力
   p>
  dd>
 dl>
 dl>
  dt>
   a href="#">
    em>基础训练体系em>
   img src="images/1indbex_r4_c3.jpg" width="257" height="160" />
   a>
  dt>
  dd>
   p>
    下肢体的训练br />
儿童定制足球而非常规的足球训练br />
节奏 + 速度 + 协调力 + 平衡力 + 精准度
   p>
  dd>
 dl>
 dl>
  dt>
   a href="#">
    em>基础训练体系em>
   img src="images/1indbex_r4_c3.jpg" width="257" height="160" />
   a>
  dt>
  dd>
   p>
    田径为核心br />
跑 + 投 + 跳 + 力量 + 速度
   p>
  dd>
 dl>
div>
div class="w740 mt95 overflow clearfix">
 运动就要酷到底，运动点燃生活，留下你的汗水，展现你的风采，演绎一出精彩，爱运动，真快乐
div>
div class="bg_l overflow mt20">
 你今天运动了吗
div>


div class="about_bg overflow w100 mt95 clearfix mb60">
 div class="wrap overflow">
  dl>
   dt>
    a href="#">img src="images/1index_r15_c7.jpg" width="541" height="290" />a>
   dt>
   dd>
    p>em>墨斯运动 em> 是一家专注于青少年体育教育的专业机构，我们信奉：体育是最好的教育。这里以宽松的教育环境和启发式的指导理念来培养孩子独立思考能力，同时保持他们柔软的思考方式。我们希望以足球介入孩子的成长，通过足球给孩子们的心灵注入力量，使心灵变得强大。并在不经意间收获几个好选手。p>
    h5>a href="#">更多a>h5>
   dd>
  dl>
 div>
 
div>


div class="copy_bg overflow clearfix mt60">
 div class="copy_top overflow">
  div class="wrap overflow">
   p>联系我们 CONTACT USp>
  div>
  
 div>
 div class="wrap overflow  pb50">
   p class="fl pt50" style="width:266px; color:#fff">
   img src="images/1index_r19_c6.jpg" class="fl" />
    span class="fl ml15 f20 tl l-30 pt20">
     小墨斯运动馆br />
     0371-56610889
    span>
   p>
   dl class="fr">
    dt class="tr l-30 pt5 ">关注官方微信
    
    dt>
    dd class="tr l-30 mr50 pt30">
     p class="fl tr mr20 ">地址：郑州市二七区南三环嵩山路百姓广场 D 馆三楼br />
微信：墨斯运动br />
官网：www.gogogo.redp>
     img src="images/1index_r19_c22.jpg" class="fr" />
    dd>
   dl>
  div>
div>
div class="copyright overflow clearfix">
Copyright 2017  郑州匠与桥文化传播有限公司  沪 ICP 备 15050430 号
div>
body>
html>

💒CSS 样式代码

*{ margin:0 auto; padding:0;}
html, body, div, p, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, img, textarea, iframe, table, th, td {
    margin: 0 auto;
    padding: 0; text-align:center
}
img {
    border: medium none;
    vertical-align: middle;
}
ol, ul, li {
    list-style-type: none;
}
h1, h2, h3, h4, h5, h6, table, th, td {
    font-size: 100%;
    font-weight: normal;
}
body, input, select, button, textarea {
    font-family: "Source Sans Pro",Tahoma,Microsoft yahei;
    font-size: 14px; 
}
.normal, em, i {
    font-style: normal;
    font-weight: normal;
}
body {
    color: #3a3939;
    line-height: 23px; text-align:center; margin:auto; min-width:1196px
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
p {
    word-wrap: break-word;
}
a {
    color: #3a3939;
    text-decoration: none; 
}
a:hover {
    color: #e25151;
}
table {
    border-collapse: collapse;
}
input[type="button"] {
    outline: medium none;
}
.clearfix {
    display: block;
}
.overflow{ overflow:hidden}
.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

    display: none;
}
.dis {
    display: block;
}

    margin-right: 10px;
}
.mr15 {
    margin-right: 15px;
}
.mr20 {
    margin-right: 20px;
}
.mr25 {
    margin-right: 25px;
}
.mr30 {
    margin-right: 30px;

}
.mr50 {
    margin-right: 50px;
}
.mr100 {
    margin-right: 100px;
}
.ml90 {
    margin-left: 90px;
}
.ml70 {
    margin-left: 70px;
}
.mt5 {
    margin-top: 5px;
}
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}
.mt25 {
    margin-top: 25px;
}
.mt30 {
    margin-top: 30px;
}
.mt40 {
    margin-top: 40px;
}
x; float:left; line-height:30px; float:right; margin-right:30px; }
.about_bg1 dd em{ font-size:22px;}
.about_bg1 dd p{ text-align:2em; text-align:left;}
.about_bg1 dd h5 a{ border:1px solid #fff; width:82px; height:32px; float:left; font-size:16px; color:#fff; margin-top:30px;}

.lnmu1{ font-size:36px; line-height:50px; color:#E25051; padding-bottom:30px; font-weight:normal }
.lnmu1 em{ font-size:26px}
.about_bg2{ padding:40px 0px 56px 0px; margin-bottom:30px; }
.about_bg2 dt{ float:right}
.about_bg2 dt img{ border:2px solid #fff}
.about_bg2 dd{ width:610px; float:left; line-height:30px;  }
.about_bg2 dd em{ font-size:22px;}
.about_bg2 dd p{ text-align:2em; text-align:left;}
.about_bg2 dd h5 a{ border:1px solid #fff; width:82px; height:32px; float:left; font-size:16px; color:#fff; margin-top:30px;}

.about_bg3{ background:#3BBC96; padding:40px 0px 56px 0px; color:#fff}
.about_bg3 dt{ float:left}
.about_bg3 dt img{ border:2px solid #fff}
.about_bg3 dd{ width:558px; float:left; line-height:30px; float:right; margin-right:30px; }
.about_bg3 dd em{ font-size:22px;}
.about_bg3 dd p{ text-align:2em; text-align:left;}
.about_bg3 dd h5 a{ border:1px solid #fff; width:82px; height:32px; float:left; font-size:16px; color:#fff; margin-top:30px;}

.about_bg3 dd h1{ font-size:20px; text-align:left; line-height:30px;}

.jie{ background:#fff}
.about_bg4{ background:#CACACA; padding:40px 0px 56px 0px; color:#fff}
.about_bg4 dt{ float:left}
.about_bg4 dd{ width:650px; float:left; line-height:30px; float:right; margin-right:30px; color:#404040; padding-top:20px }
.about_bg4 dd em{ font-size:22px;}
.about_bg4 dd p{ text-align:2em; text-align:left;}
.about_bg4 dd h1{ font-size:18px; text-align:left; line-height:35px;}
.js1 { font-size:36px; line-height:60px;}
.js1 em{ font-size:26px; }
.js_img dl{ width:370px; height:390px; border:1px solid #CCCCCC; overflow:hidden; float:left; margin-right:35px;}
.js_img dl:last-child{ margin-right:0px;}
.js_img dl:hover{border:1px solid #EA5431;}
.js_img dd{ padding:10px ; overflow:hidden; clear:both;}
.js_img dd h1{ font-size:20px; line-height:30px; text-align:center}
.js_img dd P{ text-align:left; line-height:22px;}

.lianxi{ background:#fff; color:#333}
.lianxi dt{ width:374px; float:left; margin-left:30px;}
.lianxi dt em{ font-size:20px; color:#ff0000; line-height:35px;}
.lianxi dd{ float:right; padding:20px; width:600px}

.about_bg6{ background: url(../images/g1.jpg) center no-repeat; height:633px; }
.about_bg6 dt{ float:left}
.about_bg6 dd{ width:700px; float:left; line-height:30px; float:right; margin-right:50px; color:#404040; padding-top:50px }
.about_bg6 dd em{ font-size:22px;}
.about_bg6 dd p{ text-align:2em; text-align:left;}
.about_bg6 dd h1{ font-size:18px; text-align:left; line-height:35px;}
.jiazhu{ background:url(../images/ff_r2_c2.png) repeat-x; height:426px}
.lnmu2{ font-size:36px; line-height:50px;  padding-bottom:30px; font-weight:normal; padding-top:30px; }
.lnmu2 em{ font-size:26px}

.about_bg7{ background: #EA5433; height:auto; }
.r1_show{ color:#fff}
.jiazhu_r1{ background:#fff; padding:10px 10px 0px 0px; margin-top:30px; margin-bottom:40px; clear:both}
.jiazhu_r1 ul{ width:800px; float:left}
.jiazhu_r1 li{ float:left; margin-left:10px; padding-bottom:10px;}
.about_bg5{ background: #3BBC96; height:auto;  }
.r1_show1 p{ text-align:left; line-height:24px; text-indent:2em; padding-top:10px;}

.lnmu3{ font-size:36px; line-height:50px;  padding-bottom:30px; font-weight:normal; padding-top:30px; color:#2e86cd }
.lnmu3 em{ font-size:26px}

.td_show dl{ width:541px; float:left; margin-right:30px; margin-left:20px}

.td_show dl dd{ text-align:left; line-height:22px; padding-top:15px;}

.btt{width:100%; height:auto; text-align:center; padding-bottom:5px;  }
.btt h4{ font-size:24px; font-family:"microsoft yahei";}
.btt ol{ margin-top:6px; color:#979696; font-size:12px;}

.conn{width:100%; height:auto; font-size:14px; line-height:27px; text-align:left; margin-top:15px; clear:both; }
.conn p{ text-align:left; line-height:24px; font-size:14px; padding-top:15px;}
.conn p img{ text-align:center; margin:auto; display:block}
.fenpian{ width:100%; clear:both; padding-top:15px;  margin-top:15px; overflow:hidden; padding-bottom:30px}
.fenpian li{ text-align:left; line-height:30px;border-bottom:1px solid #ddd; width:400px; float:left}

.jiazhu1 dt{ float:left}
.jiazhu1 dd{ width:670px; float:right;}
.jiazhu1 dd h1{ color:#2e86cd; text-align:left; line-height:35px; font-size:20px;}
.jiazhu1 dd p{ text-align:left; line-height:24px; padding-top:30px; text-indent:2em}

.w466{ width:486px;}
.w466 li{ float:left; margin-right:10px;}
.w466 li:last-child{ margin-right:0px;}
.w466 li a{ }
.w466 li a:hover{ width:152px; height:45px; background:url(../images/ge_r2_c4.jpg) no-repeat; line-height:33px; font-size:14px; display:block; text-align:center; color:#fff}
#iop{}


#Tab66 {
    height: auto;
    overflow: hidden;
    width: 1140px; margin-top:40px 
}
.Menubox66 {
    font-size: 16px;
    overflow: hidden;
    width: 486px; height:45px; overflow:hidden;
}
.Menubox66  ul{ float:left}
#Tab66 .Menubox66 li {
    cursor: pointer;
    display: block;
    float: left;
    font-family: "微软雅黑";
    width:152px; height:45px; background:url(../images/ge_r2_c6.jpg) no-repeat; line-height:33px; font-size:14px; display:block; text-align:center; margin-right:10px
	
}
#Tab66 .Menubox66 li:last-child{ margin-right:0px;}

#Tab66 .Menubox66 li.hover {
    
    color: #ff5600;
    display: block;
    width:152px; height:45px; background:url(../images/ge_r2_c4.jpg) no-repeat; line-height:33px; font-size:14px; display:block; text-align:center; color:#fff
}

.Contentbox66 {
    clear: both;
    height: auto;
    overflow: hidden;
    width: 1140px; clear:both; 
}


.picBox{overflow:hidden;zoom:1;margin:40px auto 0 auto;width:1140px;}
.picL{overflow:hidden;zoom:1;margin-left:-1px;}
.picL li{overflow:hidden;position:relative;float:left; display:inline; width:360x;height:256px;margin:1px 8px 20px 8px; zoom:1  }
.picL li .text{background:#4B494A;position:absolute;width:100%;height:256px;top:258px;left:0;font-family:'微软雅黑','黑体';}
.picL li .text b{padding:5px 15px;color:#fff;font-size:18px;display:inline-block;*display:inline;zoom:1;font-weight:100;margin-top:60px}
.picL li .text p{font-size:14px;line-height:24px; }
.picL li .text a{color: #fff;display: block;height: 80px;padding: 20px;}

.page{ width:560px; margin:0 auto; margin-top:25px; margin-bottom:20px; font-size:12px; font-family:"microsoft yahei"; overflow:hidden; text-align:center; margin:auto}
.page a{display:block; float:left; height:30px; border:1px solid #bcbcbc; line-height:30px; padding:0 15px; margin:0 3px; color:#666; overflow:hidden;}
.page a:hover,a.cur{background:#0964AA; color:#fff; border:1px solid #0964AA; text-decoration:none;}
.news_main{width:1140px;}
.news_main li{float:left; display:inline; width:360x;margin:1px 8px 10px 8px; zoom:1}
.news_main li span{width:360x; text-align:center; line-height:40px; font-size:16px; display:block; padding-top:5px;}

.more_inf{ }
.more_inf dl{ float:left;  height:286px; width:222px; border-top:1px solid #ededee;border-left:1px solid #ededee;border-right:1px solid #ededee;border-bottom:4px solid #ec0789; margin-right:14px }
.more_inf dl:last-child { background:none;}
.more_inf dl dt{ padding-top:20px; overflow:hidden}
.more_inf dl dd{ width:190px; float:left; clear:both; padding-left:20px;}
.more_inf dl dd ol{ height:116px; overflow:hidden; font-size:13px;}

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

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

七、🎁更多干货

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

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

3.

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