大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 体育 北京邮电大学体育部11个页面 eb前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90234741
2，点击上方下载
目录1
项目视频
html+css+js网页设计 体育 北京邮电大学体育部
网页展示
页面1
页面2
页面3
页面4
页面5
页面6
页面7
页面8
页面9
页面10
页面11
代码展示
<html lang="en">
<head>
<meta charset="utf-8">
<title>北京邮电大学研究生会体育部-首页</title>
<link rel="stylesheet" href="css/base/bootstrap.min.css"/>
<link rel="stylesheet" href="css/base/font-awesome.min.css"/>
<link rel="stylesheet" href="css/base/base.css"/>
<link rel="stylesheet" href="css/sites/index.css"/>
</head>
<body>
<!---意见反馈-->
<div id="feedbackall">
<div id="feedbacktab">
<i class="fa fa-angle-double-left"></i>
</div>
<div id="feedback">
<div class="section">
<h6>意见反馈</h6>
<p class="message">欢迎您访问本网站！您可以在下面提出任何问题与建议，并请写出您的联系方式以便工作人员联系您！</p>
<textarea title></textarea>
<a class="submit" href="javascript:void(0);">提交</a>
</div>
</div>
</div>
<!--返回顶部-->
<div id='goToTop'>
<a href='javascript:void(0);'><i class="fa fa-angle-up"></i></a>
</div>
<!--导航-->
<div class="home_nav">
<div class="home_nav_top">
<div class="nav_top_logo">
<img src="images/buptyh.png" alt="北京邮电大学研究生会"/>
</div>
<div class="nav_top_title">
<h1>北京邮电大学研究生会</h1>
</div>
<div class="nav_top_right">
<img class="nav_top_picbasket" src="images/nav_basketball.png" alt="篮球"/>
<img class="nav_top_picfoot" src="images/nav_football.png" alt="足球"/>
<p class="top_right_ti">体</p>
<p class="top_right_yu">育</p>
<p class="top_right_bu">部</p>
</div>
</div>
<div class="home_nav_footer">
<ul class="nav_footer_list">
<li class="footer_list_item active"><a href="./index.html">首页</a></li>
<li class="footer_list_item"><a href="./news.html">新闻</a></li>
<li class="footer_list_item">
<a href="./events.html">比赛</a>
<ul class="footer_list_second" style="display:none;">
<li><a href="./events.html">篮球</a></li>
<li><a href="./events.html">足球</a></li>
</ul>
</li>
<li class="footer_list_item">
<a href="javascript:void(0);">球队</a>
<ul class="footer_list_second" style="display:none;">
<li><a href="./teamlist_bas.html">篮球</a></li>
<li><a href="./teamlist_soc.html">足球</a></li>
</ul>
</li>
<li class="footer_list_item">
<a href="javascript:void(0);">排名</a>
<ul class="footer_list_second" style="display:none;">
<li><a href="./rank_bas.html">篮球</a></li>
<li><a href="./rank_soc.html">足球</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--content开始-->
<div class="contentBox">
<!--赛事展示-->
<div class="home_content_events">
<div class="content_events_title">
<a href="./events.html">查看完整赛事</a>
</div>
<div class="content_events_main">
<div class="events_main_left">
<i class="fa fa-arrow-left"></i>
</div>
<div class="events_main_content">
<div class="events_main_contentbox">
<div class="events_main_contentlist">
<ul class="main_content_list content_list_finished">
<li class="content_item_state">已结束</li>
<li class="content_item_type">小组赛</li>
<li class="content_item_date">10月28日</li>
<li class="content_item_time">18:30</li>
<li class="content_item_team1"><a href="./one_team.html">信通1队(2015)</a></li>
<!-- <li class="content_item_logo"><img src="../images/basketball_small.png"/></li> -->
<li class="content_item_score">(118:100)</li>
<!-- <li class="content_item_logo"><img src="../images/football_small.png"/></li> -->
<li class="content_item_team2"><a href="./one_team.html">计算机1队(2015)</a></li>
<li class="content_item_link"><a href="./game_result.html">查看结果</a></li>
</ul>
<ul class="main_content_list">
<li class="content_item_state">未开赛</li>
<li class="content_item_type">半决赛</li>
<li class="content_item_date">10月28日</li>
<li class="content_item_time">18:30</li>
<li class="content_item_team1"><a href="./one_team.html">信通1队(2015)</a></li>
<!-- <li class="content_item_logo"><img src="../images/basketball_small.png"/></li> -->
<li class="content_item_score">(3:2)</li>
<!-- <li class="content_item_logo"><img src="../images/football_small.png"/></li> -->
<li class="content_item_team2"><a href="./one_team.html">计算机1队(2015)</a></li>
<li class="content_item_link"><a href="javascript:void(0);">尚未开赛</a></li>
</ul>
<ul class="main_content_list content_list_last">
<li class="content_item_state">未开赛</li>
<li class="content_item_type">半决赛</li>
<li class="content_item_date">10月28日</li>
<li class="content_item_time">18:30</li>
<li class="content_item_team1"><a href="./one_team.html">信通1队(2015)</a></li>
<!-- <li class="content_item_logo"><img src="../images/basketball_small.png"/></li> -->
<li class="content_item_score">(118:120)</li>
<!-- <li class="content_item_logo"><img src="../images/football_small.png"/></li> -->
<li class="content_item_team2"><a href="./one_team.html">计算机1队(2015)</a></li>
<li class="content_item_link"><a href="javascript:void(0);">尚未开赛</a></li>
</ul>
</div>
<div class="events_main_contentlist">
<ul class="main_content_list">
<li class="content_item_state">未开赛</li>
<li class="content_item_type">小组赛</li>
<li class="content_item_date">11月28日</li>
<li class="content_item_time">17:30</li>
<li class="content_item_team1"><a href="./one_team.html">信通2队(2015)</a></li>
<!-- <li class="content_item_logo"><img src="../images/basketball_small.png"/></li> -->
<li class="content_item_score">(98:100)</li>
<!-- <li class="content_item_logo"><img src="../images/football_small.png"/></li> -->
<li class="content_item_team2"><a href="./one_team.html">计算机1队(2015)</a></li>
<li class="content_item_link"><a href="./game_result.html">查看结果</a></li>
</ul>
<ul class="main_content_list content_list_finished">
<li class="content_item_state">已结束</li>
<li class="content_item_type">淘汰赛</li>
<li class="content_item_date">11月28日</li>
<li class="content_item_time">20:30</li>
<li class="content_item_team1"><a href="./one_team.html">信通1队(2015)</a></li>
<!-- <li class="content_item_logo"><img src="../images/basketball_small.png"/></li> -->
<li class="content_item_score">(118:100)</li>
<!-- <li class="content_item_logo"><img src="../images/football_small.png"/></li> -->
<li class="content_item_team2"><a href="./one_team.html">计算机1队(2015)</a></li>
<li class="content_item_link"><a href="javascript:void(0);">尚未开赛</a></li>
</ul>
<ul class="main_content_list content_list_last">
<li class="content_item_state">未开赛</li>
<li class="content_item_type">半决赛</li>
<li class="content_item_date">11月28日</li>
<li class="content_item_time">19:30</li>
<li class="content_item_team1"><a href="./one_team.html">自动化队(2015)</a></li>
<!-- <li class="content_item_logo"><img src="../images/basketball_small.png"/></li> -->
<li class="content_item_score">(118:100)</li>
<!-- <li class="content_item_logo"><img src="../images/football_small.png"/></li> -->
<li class="content_item_team2"><a href="./one_team.html">计算机2队(2015)</a></li>
<li class="content_item_link"><a href="javascript:void(0);">尚未开赛</a></li>
</ul>
</div>
<div class="events_main_contentlist">
<ul class="main_content_list content_list_finished">
<li class="content_item_state">已结束</li>
<li class="content_item_type">小组赛</li>
<li class="content_item_date">12月28日</li>
<li class="content_item_time">19:30</li>
<li class="content_item_team1"><a href="./one_team.html">网研队(2015)</a></li>
<!-- <li class="content_item_logo"><img src="../images/basketball_small.png"/></li> -->
<li class="content_item_score">(1:0)</li>
<!-- <li class="content_item_logo"><img src="../images/football_small.png"/></li> -->
<li class="content_item_team2"><a href="./one_team.html">计算机1队(2015)</a></li>
<li class="content_item_link"><a href="./game_result.html">查看结果</a></li>
</ul>
<ul class="main_content_list">
<li class="content_item_state">未开赛</li>
<li class="content_item_type">四分之一决赛</li>
<li class="content_item_date">12月28日</li>
<li class="content_item_time">20:30</li>
<li class="content_item_team1"><a href="./one_team.html">四院联队(2015)</a></li>
<!-- <li class="content_item_logo"><img src="../images/basketball_small.png"/></li> -->
<li class="content_item_score">(2:3)</li>
<!-- <li class="content_item_logo"><img src="../images/football_small.png"/></li> -->
<li class="content_item_team2"><a href="./one_team.html">计算机1队(2015)</a></li>
<li class="content_item_link"><a href="javascript:void(0);">尚未开赛</a></li>
</ul>
</div>
</div>
</div>
<div class="events_main_right">
<!-- <img src="../images/arrow_right.png"/> -->
<i class="fa fa-arrow-right"></i>
</div>
</div>
</div>
<!--轮播和新闻框-->
<div class="home_content_middle">
<!--轮播开始-->
<div class="content_middle_left">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators" style="margin-top:58%;">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/carousel_pic1.png" alt="信通二队（白）VS光研院（蓝）（0:3）">
<div class="carousel-caption">
<p>信通二队（白）VS光研院（蓝）（0:3）</p>
</div>
</div>
<div class="item">
<img src="images/carousel_pic1.png" alt="信通二队（白）VS光研院（蓝）（0:3）">
<div class="carousel-caption">
<p>信通二队（白）VS光研院（蓝）（0:3）</p>
</div>
</div>
<div class="item">
<img src="images/carousel_pic1.png" alt="信通二队（白）VS光研院（蓝）（0:3）">
<div class="carousel-caption">
<p>信通二队（白）VS光研院（蓝）（0:3）</p>
</div>
</div>
<div class="item">
<img src="images/carousel_pic1.png" alt="信通二队（白）VS光研院（蓝）（0:3）">
<div class="carousel-caption">
<p>信通二队（白）VS光研院（蓝）（0:3）</p>
</div>
</div>
<div class="item">
<img src="images/carousel_pic1.png" alt="信通二队（白）VS光研院（蓝）（0:3）">
<div class="carousel-caption">
<p>信通二队（白）VS光研院（蓝）（0:3）</p>
</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<!--新闻框-->
<div class="home_content_news">
<div class="content_title">
<h2>新闻</h2>
<a class="more" href="./news.html">更多</a>
</div>
<!--新闻主内容-->
<div class="content_news_box">
<ul class="content_news_list">
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
<li class="content_news_item">
<a href="./news_open.html"><i
class="fa fa-hand-o-right"></i>北邮2015“诺基亚杯”研究生 . . .<span>10.30</span></a>
</li>
</ul>
</div>
</div>
</div>
<!--足球及篮球排行榜：包括球队和队员-->
<div class="home_content_rank">
<!--足球排行榜-->
<div class="content_rank content_rank_football">
<div class="content_title">
<img src="images/nav_football.png" alt="足球"/>
<h2>排行榜</h2>
</div>
<div class="rank_box">
<div class="rank_team">
<div class="rank_header">
<h3>球队排行榜</h3>
<a class="more" href="./rank_soc.html">更多</a>
</div>
<div class="rank_main">
<ul class="rank_main_title">
<li class="rank_title_position">名次</li>
<li class="rank_title_teamname">队名</li>
<li class="rank_title_number">总进球数</li>
<li class="rank_title_win">总胜场</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position rank1">1</li>
<li class="rank_item_teamname"><a href="./one_team.html">信通1队(2015)</a></li>
<li class="rank_item_number">23</li>
<li class="rank_item_win">10</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position rank2">2</li>
<li class="rank_item_teamname"><a href="./one_team.html">信通2队(2015)</a></li>
<li class="rank_item_number">19</li>
<li class="rank_item_win">9</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position rank3">3</li>
<li class="rank_item_teamname"><a href="./one_team.html">信通1队(2017)</a></li>
<li class="rank_item_number">14</li>
<li class="rank_item_win">8</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position">4</li>
<li class="rank_item_teamname"><a href="./one_team.html">计算机1队(2016)</a></li>
<li class="rank_item_number">7</li>
<li class="rank_item_win">7</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position">5</li>
<li class="rank_item_teamname"><a href="./one_team.html">计算机2队(2017)</a></li>
<li class="rank_item_number">9</li>
<li class="rank_item_win">6</li>
</ul>
</div>
</div>
<div class="rank_member">
<div class="rank_header">
<h3>队员排行榜</h3>
<a class="more" href="./rank_soc.html">更多</a>
</div>
<div class="rank_main">
<ul class="rank_main_title">
<li class="rank_title_position_r">名次</li>
<li class="rank_title_name_r">人名</li>
<li class="rank_title_number_r">总进球数</li>
<li class="rank_title_teamname_r">球队</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r rank1">1</li>
<li class="rank_item_name_r"><a href="./one_member.html">张三</a></li>
<li class="rank_item_number_r">16</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">信通1队(2015)</a></li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r rank2">2</li>
<li class="rank_item_name_r"><a href="./one_member.html">李四</a></li>
<li class="rank_item_number_r">14</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">计算机1队(2017)</a></li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r rank3">3</li>
<li class="rank_item_name_r"><a href="./one_member.html">王五</a></li>
<li class="rank_item_number_r">13</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">信通1队(2016)</a></li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r">4</li>
<li class="rank_item_name_r"><a href="./one_member.html">李全喜</a></li>
<li class="rank_item_number_r">11</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">信通2队(2016)</a></li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r">5</li>
<li class="rank_item_name_r"><a href="./one_member.html">裴晓军</a></li>
<li class="rank_item_number_r">9</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">计算机2队(2015)</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--篮球排行榜-->
<div class="content_rank content_rank_basketball">
<div class="content_title">
<img src="images/nav_basketball.png" alt="篮球"/>
<h2>排行榜</h2>
</div>
<div class="rank_box">
<div class="rank_team">
<div class="rank_header">
<h3>球队排行榜</h3>
<a class="more" href="./rank_bas.html">更多</a>
</div>
<div class="rank_main">
<ul class="rank_main_title">
<li class="rank_title_position">名次</li>
<li class="rank_title_teamname">队名</li>
<li class="rank_title_number">总得分数</li>
<li class="rank_title_win">总胜场</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position rank1">1</li>
<li class="rank_item_teamname"><a href="./one_team.html">计算机2队(2015)</a></li>
<li class="rank_item_number">140</li>
<li class="rank_item_win">13</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position rank2">2</li>
<li class="rank_item_teamname"><a href="./one_team.html">信通1队(2016)</a></li>
<li class="rank_item_number">134</li>
<li class="rank_item_win">12</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position rank3">3</li>
<li class="rank_item_teamname"><a href="./one_team.html">信通1队(2015)</a></li>
<li class="rank_item_number">118</li>
<li class="rank_item_win">10</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position">4</li>
<li class="rank_item_teamname"><a href="./one_team.html">信通2队(2017)</a></li>
<li class="rank_item_number">104</li>
<li class="rank_item_win">10</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position">5</li>
<li class="rank_item_teamname"><a href="./one_team.html">计算机1队(2015)</a></li>
<li class="rank_item_number">99</li>
<li class="rank_item_win">8</li>
</ul>
</div>
</div>
<div class="rank_member">
<div class="rank_header">
<h3>队员排行榜</h3>
<a class="more" href="./rank_bas.html">更多</a>
</div>
<div class="rank_main">
<ul class="rank_main_title">
<li class="rank_title_position_r">名次</li>
<li class="rank_title_name_r">人名</li>
<li class="rank_title_number_r">总得分数</li>
<li class="rank_title_teamname_r">球队</li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r rank1">1</li>
<li class="rank_item_name_r"><a href="./one_member.html">张三</a></li>
<li class="rank_item_number_r">99</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">信通1队(2015)</a></li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r rank2">2</li>
<li class="rank_item_name_r"><a href="./one_member.html">李四</a></li>
<li class="rank_item_number_r">87</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">自动化队(2016)</a></li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r rank3">3</li>
<li class="rank_item_name_r"><a href="./one_member.html">王五</a></li>
<li class="rank_item_number_r">85</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">网研队(2016)</a></li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r">4</li>
<li class="rank_item_name_r"><a href="./one_member.html">李全喜</a></li>
<li class="rank_item_number_r">74</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">光研队(2017)</a></li>
</ul>
<ul class="rank_list">
<li class="rank_item_position_r">5</li>
<li class="rank_item_name_r"><a href="./one_member.html">裴晓军</a></li>
<li class="rank_item_number_r">59</li>
<li class="rank_item_teamname_r"><a href="./one_team.html">四院联队(2016)</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/base/jquery.min.js"></script>
<script src="js/base/bootstrap.min.js"></script>
<script src="js/base/base.js"></script>
<script src="js/sites/index.js"></script>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
