大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 移动端 体育 中满体育移动端5个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90231656
2，点击上方下载
目录1
项目视频
html+css+js网页设计 体育 中满体育移动端5个页面
网页展示
页面1
页面2
页面3
页面4
页面5
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--网页标题-->
<title>满分课程</title>
<!--网页关键词-->
<meta name="keywords" content="" />
<!--网页描述-->
<meta name="description" content="" />
<!--适配当前屏幕-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!--禁止自动识别电话号码-->
<meta name="format-detection" content="telephone=no" />
<!--禁止自动识别邮箱-->
<meta content="email=no" name="format-detection" />
<!--iphone中safari私有meta标签,允许全屏模式浏览,隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--iphone中safari顶端的状态条的样式black(黑色)-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="css/base2.css">
<link rel="stylesheet" type="text/css" href="css/top2.css">
<link rel="stylesheet" type="text/css" href="css/footer2.css">
<link rel="stylesheet" type="text/css" href="css/index2.css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
</head>
<body>
<div class="top">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="search">
<div class="search-btn">
<img class="search-1" src="img/search_1.png">
<img class="search-2" src="img/search_2.png">
</div>
<input type="text" value="">
</div>
</div><!--top结束-->
<div class="content">
<div class="content-1">
<div class="content-1-pic" id="content_1_pic">
<div class="content-1-pic-wrap" id="content_1_pic_wrap">
<div>
<img src="img/index_pic_1.png">
</div>
<div>
<img src="img/index_pic_2.png">
</div>
<div>
<img src="img/index_pic_3.png">
</div>
<div>
<img src="img/index_pic_1.png">
</div>
</div>
</div>
<div class="content-1-pic-tabs" id="content_1_pic_tabs">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div><!--content-1结束-->
<div class="content-2">
<div class="content-2-main">
<div class="content-2-title">
<img src="img/index_pic_4.png">
</div>
<div class="content-2-line">
<div class="content-2-line-1"></div>
<div class="content-2-line-2"></div>
</div>
<div class="content-2-con">
<div class="content-2-con-1">
<div class="content-2-con-box-1">
<div class="content-2-con-box-1-text">
<p>篮球运动广受青少年喜爱，因为它不仅富有对抗性、集体性，而且集健身性、娱乐性、艺术性、趣味性于一身。打篮球可训练全身的肌肉活动及肌肉力量，同时也能训练耐力、改善体型；训练关节的协调及敏捷度，对於正处於成长期的青少年还可以促进骨骼的发育，让孩子长得更高。</p>
</div>
<div class="content-2-con-box-1-pic">
<img src="img/index_pic_5.png">
</div>
</div>
<div class="content-2-con-box-2">
<div class="content-2-con-box-2-pic">
<img src="img/index_pic_6.png">
</div>
<div class="content-2-con-box-2-text">
<p>和半路出家的羽毛球爱好者相比，儿童和青少年进行专业的羽毛球训练，好处是显而易见的。羽毛球运动对于青少年身体素质的锻炼非常全面。需要眼、脑、手、脚、肩、腰、胳膊以及腿的综合协调，敏捷性、柔韧性，训练中反应能力将得到充分锻炼，反应速度将明显提高。</p>
</div>
</div>
</div>
<div class="content-2-con-2">
<div class="content-2-con-box-3">
<div class="content-2-con-box-3-text">
<p>满分星启点专为4~14孩子设计专业足球培训，寓教于心，结合孩子自身特色，不同年龄段的专业单体训练方法培养青少年自信，乐观、富有团队精神的品质，增强青少年体质，学习专业的足球技术。帮孩子真切感受到关爱，在足球的乐趣中成长，激发潜能。</p>
</div>
<div class="content-2-con-box-3-pic">
<img src="img/index_pic_7.png">
</div>
</div>
<div class="content-2-con-box-4">
<div class="content-2-con-box-4-pic">
<img src="img/index_pic_8.png">
</div>
<div class="content-2-con-box-4-text">
<div>
<p>满分中考训练营是满分体育最早开设的项目，旨在稳步提升学员身体素质的同时，让学生获得中考体育满分。</p>
<p>进入训练营的学员将经过以下几个阶段：动作模式优化阶段（建立体能基础）、技巧类项目强化阶段（夯实基本功）、体能提升阶段（力量、爆发力、耐力提升）、满分冲刺阶段。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--content-2结束-->
<div class="content-3">
<div class="content-3-main">
<div class="content-3-title">
<img src="img/index_pic_21.png">
</div>
<div class="content-3-line">
<div class="content-3-line-1"></div>
<div class="content-3-line-2"></div>
</div>
<div class="content-3-text">
<ul>
<li><a>鄞州·国际会展中心校区···················<a class="right">会展路181号 7号馆</a></a></li>
<li><a>鄞州·宁波体育中心校区······························<a class="right">中兴路360号</a></a></li>
<li><a>鄞州·华茂外国语校区···························<a class="right">宁南北路1428弄</a></a></li>
<li><a>鄞州·东论运动馆校区·····································<a class="right">科技路1号</a></a></li>
<li><a>海曙·社会体育指导中心校区·······················<a class="right">蓝天路406号</a></a></li>
<li><a>海曙·老年体育活动中心校区·······················<a class="right">泌园街336号</a></a></li>
<li><a>海曙·宁波工程学院西校区····························<a class="right">翠柏路89号</a></a></li>
<li><a>海曙·富邦八一篮球公园校区·······················<a class="right">卖鱼路109号</a></a></li>
<li><a>慈溪·锐邦篮球公园校区······························<a class="right">明州路418号</a></a></li>
<li><a>绍兴·城东校区······································<a class="right">人民东路1051号</a></a></li>
<li><a>绍兴·城西校区········································<a class="right">二环西路378号</a></a></li>
</ul>
</div>
<div class="content-3-pic">
<p>》》更多校区信息更新中</p>
<div class="content-3-pic-1">
<img src="img/index_pic_9.png">
</div>
<div class="content-3-pic-2">
<img src="img/index_pic_10.png">
</div>
<div class="content-3-pic-3">
<img src="img/index_pic_11.png">
</div>
</div>
</div>
</div><!--content-3结束-->
<div class="content-4">
<div class="content-4-main">
<div class="content-4-box-1">
<div>
<p class="text-1">以体育之力增强身体素质</p>
<p class="text-2">收获强健“体格”</p>
<p class="text-1">以体育之美感染处世为人</p>
<p class="text-2">拥有健康“性格”</p>
<p class="text-1">以体育之魂塑造坚韧勇敢</p>
<p class="text-2">成就完美“人格”</p>
</div>
</div>
<div class="content-4-box-2">
<img src="img/index_pic_12.png">
</div>
<div class="content-4-box-3">
<img src="img/index_pic_13.png">
</div>
<div class="content-4-box-4">
<img src="img/index_pic_14.png">
</div>
<div class="content-4-box-5">
<img src="img/index_pic_15.png">
</div>
<div class="content-4-box-6">
<img src="img/index_pic_16.png">
</div>
<div class="content-4-box-7">
<img src="img/index_pic_17.png">
</div>
<div class="content-4-box-8">
<div class="content-4-box-8-1"></div>
<div class="content-4-box-8-2">
<p class="p1">满分课堂</p>
<p class="p2">MORE NEWS</p>
</div>
</div>
</div>
</div><!--content-4结束-->
</div><!--content结束-->
<div class="contact">
<div class="contact-title">
<h5>联系我们</h5>
</div>
<div class="contact-1">
<div>
<p>中考体育：0574-88062270</p>
<p>体育舞蹈：0574-89116806</p>
<p>篮球/羽毛球：0574-87729813</p>
</div>
</div>
<div class="contact-title">
<h5>满分服务热线</h5>
</div>
<div class="contact-2">
<div class="contact-2-1">
<p>服务时间：9：30~20：30（周二到周日）</p>
</div>
<div class="contact-2-2">
<img src="img/index_pic_19.png">
</div>
</div>
<div class="contact-title">
<h5>辅助导航</h5>
</div>
<div class="contact-3">
<div class="contact-3-1">
<a href="index.html">满分课程</a> |
<a href="javascript:void(0)">品牌故事</a> |
<a href="about.html">关于我们</a> |
<a href="javascript:void(0)">法律申明</a>
</div>
<div class="contact-3-2">
<div class="contact-3-2-text">
<p class="p1">Copyright © 2014-2020 <a>宁波满分体育发展有限公司</a></p>
<p class="p2">All Rights Reserved. 浙ICP备14232559号 </p>
</div>
<div class="contact-3-2-icon">
<img src="img/index_pic_20.png">
</div>
</div>
</div>
</div><!--content结束-->
<div class="footer" id="foot">
<ul>
<li class="nav-1"><div></div><a>首页</a></li>
<li class="nav-2"><a>满分课程</a></li>
<li class="nav-3"><a>关于我们</a></li>
<li class="nav-4"><a>联系满分</a></li>
<li class="nav-5"><a>免费体验</a></li>
</ul>
</div><!--footer结束-->
</body>
<script type="text/javascript" src="js/index2.js"></script>
<script type="text/javascript" src="js/footer2.js"></script>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
