大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 体育 体育云课堂9个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90230881
2，点击上方下载
目录1
项目视频
html+css+js网页设计 体育 体育云课堂9个页面
页面展示
页面1
页面2
页面3
页面4
页面5
页面6
页面7
页面8
页面9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit" >
<meta content="" name="description">
<meta content="" name="keywords">
<title>体育云课堂</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="header">
<div class="auto">
<a href="">
<img class="logo_img" src="img/logo.png" alt="" />
</a>
<div class="right">
<ul class="nav_list">
<li>
<a class="active" href="index.html">首页</a>
</li>
<li>
<a href="kcdt.html">课堂动态</a>
</li>
<li>
<a href="ktdsj.html">课堂大数据</a>
</li>
<li>
<a href="jxzyk.html">教学资源库</a>
</li>
<li>
<a href="jsfzypx.html">教师发展与培训</a>
</li>
<li>
<a href="xsxlyzd.html">学生训练与指导</a>
</li>
</ul>
<a class="btn_login" href="login.html">登录</a>
</div>
</div>
</div>
<div class="section">
<!--轮播图 开始-->
<div class="banner_box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/banner.png" alt="" />
</div>
<div class="swiper-slide">
<img src="img/banner.png" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!--轮播图 结束-->
<!--新闻动态、通知公告 开始-->
<div class="bg_F8F8F8">
<div class="auto p_t_b_30">
<div class="xwdt_box">
<h3 class="title">新闻动态</h3>
<div class="xwdt">
<img src="img/xwdt.png" alt="" />
<div class="xwdt_cont">
<ul class="xwdt_list">
<li>
<i class="i_dot"></i>
<a href="">
市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线
</a>
</li>
<li>
<i class="i_dot"></i>
<a href="">
市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线
</a>
</li>
<li>
<i class="i_dot"></i>
<a href="">
市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线
</a>
</li>
<li>
<i class="i_dot"></i>
<a href="">
市、县、校三级数据拉通，青岛市教育资源
</a>
</li>
<li>
<i class="i_dot"></i>
<a href="">
市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线
</a>
</li>
<li>
<i class="i_dot"></i>
<a href="">
市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线
</a>
</li>
</ul>
<a class="btn_ckgd" href="">查看更多>></a>
</div>
</div>
</div>
<div class="tzgd_box">
<h3 class="title">通知公告</h3>
<ul class="tzgd_list">
<li>
<i class="i_tzgg"></i>
<p>
<a href="">关注体育云课堂，点击下载</a>
</p>
</li>
<li>
<i class="i_tzgg"></i>
<p>
<a href="">关注体育云课堂，点击下载</a>
</p>
</li>
<li>
<i class="i_tzgg"></i>
<p>
<a href="">关注体育云课堂，点击下载关注体育云课堂，点击下载关注体育云课堂，点击下载</a>
</p>
</li>
<li>
<i class="i_tzgg"></i>
<p>
<a href="">关注体育云课堂，点击下载关注体育云课堂，点击下载关注体育云课堂，点击下载</a>
</p>
</li>
<li>
<i class="i_tzgg"></i>
<p>
<a href="">关注体育云课堂，点击下载</a>
</p>
</li>
<li>
<i class="i_tzgg"></i>
<p>
<a href="">关注体育云课堂，点击下载</a>
</p>
</li>
</ul>
<div class="fy">
<ul class="fy_list">
<li>
<a class="active" href="javascript:;">1</a>
</li>
<li>
<a href="javascript:;">2</a>
</li>
<li>
<a href="javascript:;">3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--新闻动态、通知公告 结束-->
<!--体育信息化 开始-->
<div class="tyxxh_box m_b_50">
<div class="tyxxh">
<h3 class="title">体育信息化</h3>
<ul class="tyxxh_list">
<li>
<div class="date">
<div class="year">2018</div>
<div class="month_day">Mar.01</div>
</div>
<div class="tyxxh_cont">
<h3>
<a href="">市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线,青岛市教育资源公共服务平台正式上线</a>
</h3>
<p>市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线,青岛市教育资源公共服务平台正式上线青岛市教育资源公共服务平台正式上线</p>
</div>
</li>
<li>
<div class="date">
<div class="year">2018</div>
<div class="month_day">Mar.01</div>
</div>
<div class="tyxxh_cont">
<h3>
<a href="">市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线</a>
</h3>
<p>市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线</p>
</div>
</li>
<li>
<div class="date">
<div class="year">2018</div>
<div class="month_day">Mar.01</div>
</div>
<div class="tyxxh_cont">
<h3>
<a href="">市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线,青岛市教育资源公共服务平台正式上线</a>
</h3>
<p>市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线,青岛市教育资源公共服务平台正式上线青岛市教育资源公共服务平台正式上线</p>
</div>
</li>
<li>
<div class="date">
<div class="year">2018</div>
<div class="month_day">Mar.01</div>
</div>
<div class="tyxxh_cont">
<h3>
<a href="">市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线,青岛市教育资源公共服务平台正式上线</a>
</h3>
<p>市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线</p>
</div>
</li>
<li>
<div class="date">
<div class="year">2018</div>
<div class="month_day">Mar.01</div>
</div>
<div class="tyxxh_cont">
<h3>
<a href="">市、县、校三级数据拉通</a>
</h3>
<p>市、县、校三级数据拉通，青岛市教育资源公共服务平台正式上线,青岛市教育资源公共服务平台正式上线青岛市教育资源公共服务平台正式上线</p>
</div>
</li>
</ul>
</div>
<img class="tyxxh_img" src="img/tyxxh.png" alt="" />
</div>
<!--体育信息化 结束-->
</div>
<div class="footer">
Copyright©2018青岛思迈教育科技有限公司
</div>
</body>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/swiper.min.js"></script>
<script>
//轮播
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay:3000
});
</script>
</html> ```
## 总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
### 1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
#### 2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
### 3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
### 4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
### 5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
[html+css+js网页设计 优快云博客](https://blog.youkuaiyun.com/qq_42431718)
[html+css+js网页设计 优快云博客](https://blog.youkuaiyun.com/qq_42431718)
[html+css+js网页设计 优快云博客](https://blog.youkuaiyun.com/qq_42431718)
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
