HTML期末学生大作业-乒乓球网页作业html+css+javascript

 一、部分网页截图

 

 

 

 

 

二、部分源代码

	<div id="cbx-aboutus" class="cbx-section cbx-aboutus">
		<div class="cbx-inner">
			<div class="container">
				<div class="text-center cbx-content">
					<div class="row">
						<div class="col-sm-12">
							<div class="cbx-heading">
								<h2 class="uppercase wow fadeInUp" color="#461916">中国乒乓球队发展史</h2>
								<hr noshade size="" width="" color="#461916">
							</div>
							<div>
								<div class="row">
									<div class="col-sm-7">
										<div class="cbx-about-text text-right xs-text-center">
											<p>
												1952年10月,由中华全国体育总会主办的全国乒乓球锦标赛在北京大学举行,国际乒联主席蒙塔古出席了开幕式,揭开了新中国乒乓球运动发展史上新的一页。与此同时中华全国体育总会乒乓球部加入了国际乒联。
											</p>
											<p>
												截至2021年4月,中国乒乓球队116人成为世界冠军,共获得244枚金牌,其中奥运会金牌28枚,包括6个团体冠军,22个单项冠军;世乒赛金牌145枚,包括42个团体冠军,103个单项冠军(两次跨国配对按0.5块金牌计算);世界杯金牌71枚,包括21个团体冠军,50个单项冠军(含1个女双冠军)。
  荣耀,始终与中国乒乓球队相伴而行。国球,又提醒中国乒乓人勿忘使命。所以,一次次“从零开始”,贯穿着中国乒乓的过去与现在,将来,注定也如影随形。 <br/> <span><a href="#">More Info</a></span>
											</p>
											<span></span>
										</div>
									</div> <!--//.COL-->
									<div class="col-sm-5">
										<div class="about-img">
											<img src="img/aboutus.png" alt=""/>
										</div>
									</div> <!--//.COL-->
								</div> <!--//.ROW-->
								<div class="row">
									<div class="col-xs-12 col-sm-6 col-md-3">
										<div class="cbx-single-item cbx-single-all">
											<i class="fa fa-laptop single-fa"></i>
											<h5>Hard Worker</h5>
											<p>Donec ullamcorper felis massa
												Aliquet leo tristi que vita He Pr
												ehicula nulla a, condimntum </p>
											<a href="#">Learm More<i class="fa fa-angle-right"></i></a>
										</div>
									</div>
									<div class="col-xs-12 col-sm-6 col-md-3">
										<div class="cbx-single-item cbx-single-all">
											<i class="fa fa-users single-fa"></i>
											<h5>Balanced Team</h5>
											<p>Donec ullamcorper felis massa
												Aliquet leo tristi que vita He Pr
												ehicula nulla a, condimntum </p>
											<a href="#">Learm More<i class="fa fa-angle-right"></i></a>
										</div>
									</div>
									<div class="col-xs-12 col-sm-6 col-md-3">
										<div class="cbx-single-item cbx-single-all">
											<i class="fa fa-tablet single-fa"></i>
											<h5>Responsive Design</h5>
											<p>Donec ullamcorper felis massa
												Aliquet leo tristi que vita He Pr
												ehicula nulla a, condimntum </p>
											<a href="#">Learm More<i class="fa fa-angle-right"></i></a>
										</div>
									</div>
									<div class="col-xs-12 col-sm-6 col-md-3">
										<div class="cbx-single-item cbx-single-all">
											<i class="fa fa-eye single-fa"></i>
											<h5>Retina Ready</h5>
											<p>Donec ullamcorper felis massa
												Aliquet leo tristi que vita He Pr
												ehicula nulla a, condimntum </p>
											<a href="#">Learm More<i class="fa fa-angle-right"></i></a>
										</div>
									</div>
								</div>
							</div>
						</div> <!--//.COL-->
					</div> <!--//.ROW-->
				</div> <!--//. CBX CONTENT CONTENT-->
			</div> <!--//.CONAINER-->
		</div><!--//.CBX INNER-->
	</div><!--//.CBX SECTION -->
</section><!-- *************  //SPECIAL FEATURE END ************* -->

<section>
	<div class="container-fluid">
		<div class="row">
			<div id="lz-parallax" class="lz-section cbx-parallax clearfix">
				<div class="cbx-overlay ">
					<div class="container lz-wrapper">
						<div class="row">
							<div class="col-xs-12">
								<div class="lz-parllax-inner ">
									<div class="lz-parllax-box lz-section-header">
										<h2 class="lz-brand-color">We are Global</h2>
										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aspernatur doloribus distinctio quisquam exercitationem, voluptatem beatae culpa quidem, ut error fuga quas? Sequi iste, est corrupti perferendis quibusdam minus voluptate.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> <!--//.cbx-overlay-->
			</div>
		</div>
	</div><!-- container fluid -->
</section>

<!-- ************* PORTFOLIO SECTION  ************* -->
<section>
	<div id="cbx-portfolio" class="cbx-section cbx-portfolio">
		

				<div class="text-center cbx-content">
					<div class="cbx-heading">
						<h2 class="uppercase wow fadeInUp">WTT赛事得冠情况 </h2><span><a href="../../cy/大四/图一/tu/tu/主图/main.png">
						<!-- <img src="../../cy/大四/图一/tu/tu/主图/MAIN.png"  alt=""> -->
						<h2 class="uppercase wow fadeInUp">对战情况 </h2>
            <iframe scrolling='no' src="https://hanabi.data-viz.cn/chart.html?id=s_d909b9a6ec6245018b458a10b5d2b312&isIframe=1" frameborder="0" width="48%" style="transform: scale(0.7);" height="1000px"></iframe>
						<iframe   src="https://hanabi.data-viz.cn/chart.html?id=barChartRacec282883131144ccb81c82cedccbea274&isIframe=1" frameborder="0" width="50%" style="transform: scale(0.7);"  height="960px"></iframe>
						
					</div>

					<div class="modal fade portfolioModal" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog modal-lg">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times"></i></span></button>
								</div>
								<div class="modal-body">
									<div class="row">
										<div class="col-xs-6">
										</div>
										<div class="col-xs-6">
											<div class="portfolio-details">
												<h3></h3>
												<p></p>
												<strong>Client: <a href="##CLLINK##">##CLNAME##</a></strong> <br>
												<strong>Service: ##SERVICE##</strong> <br>
											</div>
										</div>
									</div>
								</div><!-- /.modal-body -->
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.portfolioModal -->
				</div> <!--//. CBX CONTENT CONTENT-->
			</div> <!--//.CONAINER-->
		</div><!--//.CBX INNER-->
	</div><!--//.CBX SECTION -->
</section>
<!-- TEAM SECTION START -->
<section>
	<div id="cbx-team" class="cbx-section cbx-team">
		<div class="cbx-team-inner">
			<div class="container">
				<div class="row">
					<div class="col-sm-12">
						<div class="cbx-heading text-center">
							<h2 class="uppercase wow fadeInUp">Our Team</h2>
							<hr noshade size="" width="" color="">
							<p class=" wow flipInY">Proin consectetur quis tellus nec porttitor. In tempor pulvinar quam elementum bibendum.</p>
						</div>
					</div>
				</div><!-- //ROW Our Team Header -->
				<div class="row">
					<div id="name1" class="col-xs-12 col-sm-6 col-md-4 col-lg-4" >
						<div class="cbx-single-team text-center">
							<div class="flip-container">
								<div class="flipper" data-name='1'>
									<!-- font content -->
									<div class="front cbx-font-side">
										<div class="font-single-img text-center">
											<img class="img-circle" src="img/person/ml.jpg" alt="Team Image">
										</div>
										<div class="font-single-text text-center">
											<h3 class="name">中文名:马龙</h3>
											<h4>外文名:Ma Long</h4>
											<p class="names">
                        
                          别    名:Chinese Beast、六边形战士 </br>
                          出生地:辽宁省鞍山市</br>
                          出生日期:1988年10月20日</br>
                          身    高:1.75 m</br>
                          体    重:70 公斤</br>
                          主要奖项</br>
                          2015、2017、2019年世乒赛男单冠军 </br>
                          2012、2015世界杯男单冠军 </br>
                          2008、2009、2011、2015、2016、2020总决赛六冠 </br>
                          2009、2012、2013年亚锦赛男单三冠 </br>
                          2008、2009、2011、2014年亚洲杯男单四冠展开</br>
                          重要事件</br>
                          2016年里约奥运会男单男团双冠 </br>
                          2014年当选中国乒乓球男队队长 </br>
                          第十三届全运会乒乓球男单冠军 </br>
                          2020年东京奥运会男单男团双冠</br>
                          入选国家队:2003年
                          
                         </p>
										</div>
									</div> <!-- //font content -->
									<!-- back content -->
									<div class="back cbx-back-side">
										<div class="text-center">
											<div class="cbx-member-social">
												<a target="_blank" href="">
													<i class="fa fa-2x fa-facebook-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-twitter-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-linkedin-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-google-plus-square "></i>
												</a>
											</div>
											<div class="text-center back-single-text">
                        <iframe src="https://hanabi.data-viz.cn/chart.html?id=s_05ebcbf39b8d480a888ab31fbbd135a8&isIframe=1" frameborder="0" width="100%" height="290px"></iframe>
												<!-- <iframe frameborder="0" src="./images/img/雷达/ml.svg" frameborder="0" width="250px" height="300px"></iframe> -->
											</div>
										</div>
									</div><!-- //back content -->
								</div>
							</div>
						</div> <!--//single team -->
					</div> <!--//single team main col 3-->
					<div id="name2" class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
						<div class="cbx-single-team text-center">
							<div class="flip-container"   ontouchstart="this.classList.toggle('hover');">
								<div class="flipper" data-name='2'>
									<!-- font content -->
									<div class="front cbx-font-side">
										<div class="font-single-img text-center">
											<img class="img-circle" src="img/person/fzd.jpg" alt="Team Image">
										</div>
										<div class="font-single-text text-center">
											<h3 class="name">中文名:樊振东</h3>
											<h4>外文名:Fan Zhen Dong </h4>
											<p class="names">
                        别    名:小胖、小樊、肥仔东 、暴力熊猫</br>
                        出生地:广东省广州市</br>
                        出生日期:1997年1月22日</br>
                        专业特点:右手横板,两面反胶</br>
                        主要奖项</br>
                        2012世青赛男团、男单、混双冠军 </br>
                        2013中国公开赛U21男单冠军</br>
                        主要奖项</br>
                        2013亚青会男单冠军 </br>
                        2013全运会男团冠军、男双冠军 </br>
                        2013东亚会男单冠军、男团冠军展开</br>
                        重要事件</br>
                        2012年2月进入国家二队 </br>
                        2012年10月进入国家一队 </br>
                        2013年5月获巴黎世乒赛参赛资格 </br>
                        2013年9月全运会夺两金一银 </br>
                        2013年东亚运动会夺两金一银展开</br>
                        主管教练:王皓 </br>
                        入选国家队:2012年
                         </p>
										</div>
									</div> <!-- //font content -->
									<!-- back content -->
									<div class="back cbx-back-side">
										<div class="text-center">
											<div class="cbx-member-social">
												<a target="_blank" href="">
													<i class="fa fa-2x fa-facebook-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-twitter-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-linkedin-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-google-plus-square "></i>
												</a>
											</div>
											<div class="text-center back-single-text">
                        <iframe src="https://hanabi.data-viz.cn/chart.html?id=s_d9ec667150364bb88465f5c7ad158d8d&isIframe=1" frameborder="0" width="100%" height="290px"></iframe>
											</div>
										</div>
									</div><!-- //back content -->
								</div>
							</div>
						</div> <!--//single team -->
					</div> <!--//single team main col 3-->
					<div id="name3" class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
						<div class="cbx-single-team text-center">
							<div class="flip-container"   ontouchstart="this.classList.toggle('hover');">
								<div class="flipper" data-name='3'>
									<!-- font content -->
									<div class="front cbx-font-side">
										<div class="font-single-img text-center">
											<img class="img-circle" src="img/person/cm.jpg" alt="Team Image">
										</div>
										<div class="font-single-text text-center">
											<h3 class="name">中文名:陈梦</h3>
											<h4>外文名:Chen Meng</h4>
											<p class="names">别    名:大梦 </br>
                        出生地:山东青岛</br>
                        出生日期:1994年1月15日</br>
                        身    高:166.7 cm</br>
                        体    重:55 kg</br>
                        主要奖项</br>
                        2018年亚运会乒乓球女子团体冠军,女子单打亚军 </br>
                        2015年亚锦赛混双冠军 </br>
                        2011年世青赛大满贯 </br>
                        2020年东京奥运会乒乓球女单冠军 </br>
                        2020年东京奥运会乒乓球女团冠军 </br>
                        2020年女子乒乓球世界杯冠军</br>
                        入选国家队:2007年
                         </p>
										</div>
									</div> <!-- //font content -->
									<!-- back content -->
									<div class="back cbx-back-side">
										<div class="text-center">
											<div class="cbx-member-social">
												<a target="_blank" href="">
													<i class="fa fa-2x fa-facebook-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-twitter-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-linkedin-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-google-plus-square "></i>
												</a>
											</div>
											<div class="text-center back-single-text">
                        <iframe src="https://hanabi.data-viz.cn/chart.html?id=s_3618839bffaa499d81ab11c8ac1143be&isIframe=1" frameborder="0" width="100%" height="290px"></iframe>
											</div>
										</div>
									</div><!-- //back content -->
								</div>
							</div>
						</div> <!--//single team -->
					</div> <!--//single team main col 3-->
        </div> <!--//single team main row-->
        
        <div class="row">
          <div id="name4" class="col-xs-12 col-sm-6 col-md-4 col-lg-4" >
						<div class="cbx-single-team text-center">
							<div class="flip-container"   ontouchstart="this.classList.toggle('hover');">
								<div class="flipper" data-name='4'>
									<!-- font content -->
									<div class="front cbx-font-side">
										<div class="font-single-img text-center">
											<img class="img-circle" src="img/person/lsw.jpg" alt="Team Image">
										</div>
										<div class="font-single-text text-center">
											<h3 class="name">中文名:刘诗雯</h3>
											<h4>外文名:Sunny /Liu Shiwen</h4>
											<p class="names">
                        别    名:枣儿、小枣、枣姐</br>
                        出生地:辽宁省抚顺市</br>
                        出生日期:1991年4月12日</br>
                        身    高:160 cm</br>
                        体    重:43 kg</br>
                        专业特点:右手横板弧圈结合快攻 </br>
                        主要奖项</br>
                        2012年世界乒乓球团体锦标赛冠军 </br>
                        2009、2012女乒世界杯单打冠军 </br>
                        2014年仁川亚运会乒乓球女单冠军 </br>
                        2015世乒赛女双冠军,搭档朱雨玲 </br>
                        2016年里约奥运会乒乓球女团冠军 </br>
                        2019年世界乒乓球锦标赛女单冠军和混双冠军</br>
                        主管教练:马琳</br>
                        入选国家队:2004年
                        </p>
										</div>
									</div> <!-- //font content -->
									<!-- back content -->
									<div class="back cbx-back-side">
										<div class="text-center">
											<div class="cbx-member-social">
												<a target="_blank" href="">
													<i class="fa fa-2x fa-facebook-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-twitter-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-linkedin-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-google-plus-square "></i>
												</a>
											</div>
											<div class="text-center back-single-text">
                        <iframe src="https://hanabi.data-viz.cn/chart.html?id=s_d030326c59504367817f8aeb0b641c63&isIframe=1" frameborder="0" width="100%" height="290px"></iframe>					
                      </div>
										</div>
									</div><!-- //back content -->
								</div>
							</div>
						</div> <!--//single team -->
					</div> <!--//single team main col 3-->
          <div id="name5" class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
						<div class="cbx-single-team text-center">
							<div class="flip-container"   ontouchstart="this.classList.toggle('hover');">
								<div class="flipper" data-name='5'>
									<!-- font content -->
									<div class="front cbx-font-side">
										<div class="font-single-img text-center">
											<img class="img-circle" src="img/person/zjk.jpg" alt="Team Image">
										</div>
										<div class="font-single-text text-center">
											<h3 class="name">中文名:张继科</h3>
											<h4>外文名:ZhangJike</h4>
											<p class="names">别    名:藏獒</br>
                        出生地:山东青岛</br>
                        出生日期:1988年2月16日 </br>
                        身    高:181 cm </br>
                        体    重:74 kg </br>
                        专业特点:右手横板两面反胶弧圈结合快攻</br>
                        主要奖项</br>
                        2011年鹿特丹世界乒乓球锦标赛男单冠军 </br>
                        2011年巴黎乒乓球世界杯男单冠军 </br>
                        2012年伦敦奥运会乒乓球男单、男团冠军 </br>
                        2013年巴黎世界乒乓球锦标赛男单冠军 </br>
                        2014年德国乒乓球世界杯男单冠军 </br>
                        2016年里约奥运会乒乓球男单亚军、男团冠军收起</br>
                        重要事件</br>
                        445天成就最快大满贯 </br>
                        创三大赛五连冠记录</br>
                        入选国家队:2003年
                         </p>
										</div>
									</div> <!-- //font content -->
									<!-- back content -->
									<div class="back cbx-back-side">
										<div class="text-center">
											<div class="cbx-member-social">
												<a target="_blank" href="">
													<i class="fa fa-2x fa-facebook-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-twitter-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-linkedin-square "></i>
												</a>
												<a target="_blank" href="">
													<i class="fa fa-2x fa-google-plus-square "></i>
												</a>
											</div>
											<div class="text-center back-single-text">
                        <iframe src="https://hanabi.data-viz.cn/chart.html?id=s_b87d8e35e66743e1a1692cdfae74c978&isIframe=1" frameborder="0" width="100%" height="290px"></iframe>
											</div>
										</div>
									</div><!-- //back content -->
								</div>
							</div>
						</div> <!--//single team -->
					</div> <!--//single team main col 3-->

 

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码

)">
< <上一篇

)">
下一篇>>