當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時間：2025/3/15 javascript 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML期末学生大作业-乒乓球网页作业html+css+javascript 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

?一、部分網(wǎng)頁截圖

二、部分源代碼

<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">中國乒乓球隊發(fā)展史</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月，由中華全國體育總會主辦的全國乒乓球錦標(biāo)賽在北京大學(xué)舉行，國際乒聯(lián)主席蒙塔古出席了開幕式，揭開了新中國乒乓球運動發(fā)展史上新的一頁。與此同時中華全國體育總會乒乓球部加入了國際乒聯(lián)。</p><p>截至2021年4月，中國乒乓球隊116人成為世界冠軍，共獲得244枚金牌，其中奧運會金牌28枚，包括6個團體冠軍，22個單項冠軍；世乒賽金牌145枚，包括42個團體冠軍，103個單項冠軍(兩次跨國配對按0.5塊金牌計算)；世界杯金牌71枚，包括21個團體冠軍，50個單項冠軍(含1個女雙冠軍)。榮耀，始終與中國乒乓球隊相伴而行。國球，又提醒中國乒乓人勿忘使命。所以，一次次“從零開始”，貫穿著中國乒乓的過去與現(xiàn)在，將來，注定也如影隨形。 <br/> <span><a href="#">More Info</a></span></p><span></span></div></div> <div class="col-sm-5"><div class="about-img"><img src="img/aboutus.png" alt=""/></div></div> </div> <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 massaAliquet leo tristi que vita He Prehicula 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 massaAliquet leo tristi que vita He Prehicula 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 massaAliquet leo tristi que vita He Prehicula 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 massaAliquet leo tristi que vita He Prehicula nulla a, condimntum </p><a href="#">Learm More<i class="fa fa-angle-right"></i></a></div></div></div></div></div> </div> </div> </div> </div></div> </section><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> </div></div></div> </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"><h2 class="uppercase wow fadeInUp">對戰(zhàn)情況 </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></div></div></div></div> </div> </div></div> </section>  <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><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'><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、六邊形戰(zhàn)士 </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年當(dāng)選中國乒乓球男隊隊長 </br>第十三屆全運會乒乓球男單冠軍 </br>2020年東京奧運會男單男團雙冠</br>入選國家隊：2003年</p></div></div> <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></div></div></div></div></div></div> </div> <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'><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>專業(yè)特點：右手橫板，兩面反膠</br>主要獎項</br>2012世青賽男團、男單、混雙冠軍 </br>2013中國公開賽U21男單冠軍</br>主要獎項</br>2013亞青會男單冠軍 </br>2013全運會男團冠軍、男雙冠軍 </br>2013東亞會男單冠軍、男團冠軍展開</br>重要事件</br>2012年2月進(jìn)入國家二隊 </br>2012年10月進(jìn)入國家一隊 </br>2013年5月獲巴黎世乒賽參賽資格 </br>2013年9月全運會奪兩金一銀 </br>2013年東亞運動會奪兩金一銀展開</br>主管教練：王皓 </br>入選國家隊：2012年</p></div></div> <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></div></div></div> </div> <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'><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> <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></div></div></div> </div> </div> <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'><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>專業(yè)特點：右手橫板弧圈結(jié)合快攻 </br>主要獎項</br>2012年世界乒乓球團體錦標(biāo)賽冠軍 </br>2009、2012女乒世界杯單打冠軍 </br>2014年仁川亞運會乒乓球女單冠軍 </br>2015世乒賽女雙冠軍，搭檔朱雨玲 </br>2016年里約奧運會乒乓球女團冠軍 </br>2019年世界乒乓球錦標(biāo)賽女單冠軍和混雙冠軍</br>主管教練：馬琳</br>入選國家隊：2004年</p></div></div> <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></div></div></div> </div> <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'><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>專業(yè)特點：右手橫板兩面反膠弧圈結(jié)合快攻</br>主要獎項</br>2011年鹿特丹世界乒乓球錦標(biāo)賽男單冠軍 </br>2011年巴黎乒乓球世界杯男單冠軍 </br>2012年倫敦奧運會乒乓球男單、男團冠軍 </br>2013年巴黎世界乒乓球錦標(biāo)賽男單冠軍 </br>2014年德國乒乓球世界杯男單冠軍 </br>2016年里約奧運會乒乓球男單亞軍、男團冠軍收起</br>重要事件</br>445天成就最快大滿貫 </br>創(chuàng)三大賽五連冠記錄</br>入選國家隊：2003年</p></div></div> <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></div></div></div> </div>

總結(jié)

以上是生活随笔為你收集整理的HTML期末学生大作业-乒乓球网页作业html+css+javascript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：职工工资信息系统 c语言题,工资信息管理
下一篇： Qt|C/C++植物大战僵尸修改器(用户