时间：2023-09-13 09:42:02 | 来源：网站运营
时间：2023-09-13 09:42:02 来源：网站运营
基于HTML+CSS+JavaScript+Bootstarp响应式健身网站(web前端期末大作业)：网站题目>
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html软件进行运行及修改等操作）。<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>减肥健身俱乐部</title><link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" ><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/style.css" rel="external nofollow" ></head><body><div class="jumbotron text-center toubg" style="margin-bottom:0;"><h1> <a href="index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="logo" src="img/logo1.png" ></a></h1><h4>减肥,健身就和学英语一样,方法有很多,而且明显正确的方法也不少,但最难的在坚持。</h4></div><nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" style=" font-weight: bold; font-size: 25px; color: #fffffc;" href="index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></div><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a href="index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li><li><a href="sub1.html" rel="external nofollow" >减肥攻略</a></li><li><a href="sub2.html" rel="external nofollow" >健身攻略</a></li><li><a href="sub3.html" rel="external nofollow" >健身教学</a></li></ul><div style="height:50px; display: flex; align-items: center;" class="col-sm-5" id="so"> <div class="input-group"> <input type="text" class="form-control"/> <span class="input-group-addon"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <span >搜索 </span></i></a></span> </div></div></div></div></nav><div class="container"><div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><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></ol><!-- 轮播（Carousel）项目 --><div style="height: 400px; " class="carousel-inner imgkuang"><div class="item active"><img class="imglun" src="img/js-ind2.jpg" alt="First slide"></div><div class="item"><img src="img/js-ind3.jpg" alt="Second slide"></div><div class="item"><img src="img/js-ind4.jpg" alt="Third slide"></div></div><!-- 轮播（Carousel）导航 --><a class="left carousel-control" href="#myCarousel" rel="external nofollow" rel="external nofollow" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="right carousel-control" href="#myCarousel" rel="external nofollow" rel="external nofollow" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true">></span></a></div><hr><div class="row"><div class="col-sm-4"><h4>健身明星：彭于晏</h4><div class="fakeimg"><img src="img/pyy.jpg"></div><p style="margin-top: 20px;">2011年，主演的电影《翻滚吧！阿信》是彭于晏事业的转折点，他凭借该戏入围第48届台湾电影金马奖最佳男主角。而后接连拍摄了《寒战》、《分手合约》、《激战》等多部电影，更凭《激战》中“林思齐”一角角逐第50届台湾电影金马奖及第33届香港电影金像奖最佳男配角，彭于晏绝对是中国娱乐圈最强壮的男明星。 平常酷爱运动的他，保持着良好的身材，不仅颜值爆表，这身材放你眼前，是不是已经眼瞎？</p><hr><div class="fakeimg"><img src="img/ind.png"></div><h4>流行项目</h4><ul class="nav nav-pills nav-stacked sy-fl"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >大众健身操</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >拉丁健美操</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >健身球</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >瑜伽</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >有氧舞蹈</a></li></ul><hr class="hidden-sm hidden-md hidden-lg"></div><div class="col-sm-8"><h4>健身的十大好处，你全都知道吗？ </h4><br><p style="margin-top: 20px;">在现代，健身方法越来越多，而愿意积极的健身的人也越来越多。不过很多人健身应该只是为了塑造自己的好身材吧!其实，积极的参加健身运动好处可不止这一点哦!那么健身的好处有哪些呢?下面就一起来了解下吧!</p><br><br> <h5>1、释放生活工作的压力 </h5><p> 活在现在这个高压的社会中，每天要面对的事情实在太多，有些人就容易扛不住，出现心理抑郁、负能量缠身等等。有个很好的方法，出一出汗就能解决。跑步的人有这样的经历和感受，遇到烦心事一跑步心情就会有改变。</p><p> 那么具体的原理是什么呢?很简单，积极的运动会让我们的身体产生一种有益于身心的物质，也就是被称为“快乐激素”的“内啡肽”。通过运动，身体会大量产生这种元素，让你感到轻松愉快哦!所以想要排解压力的话，那就积极的运动吧!</p><h5> 2、健身性感，能吸引周围人的目光</h5><p> 哪个女生不喜欢有身材紧实、臂膀厚实和小腹平坦的男性呢?性感的男人反而会让女人无法自持，影视剧里用玫瑰花瓣覆盖裸身露出锁骨的画面，经常让电影院的全场女生尖叫。</p><p> 如果某天他突然开始健身了，一定是喜欢上了身边某个人，通过健身这样的方式，找一个话题或者通过健身让自己变的更自信。</p><h5> 3、增加活力</h5><p> 每周健身2-3次，可增加20%体力和降低65%的疲劳度，原因是健身提升我们新陈代谢使体能加强，且脑中多巴胺(dopamine)的分泌增加，可以让我们不会感受到那么的劳累！<p><h5> 4、健身可以建立自信应对挑战</h5><p> 对人生失去热情，沮丧会使男人的内心感觉无助、无能、无法做任何事情。因此最简单的解决方法是开始健身。</p><p> 只要你在健身之初就为自己逐步的设定锻炼的目标，那么随着目标的逐步实现，男士们就能够不断的获得愉快的心情，并为自己建立起自信。其次，长期的进行运动，还能帮男士养成良好的生活习惯，让身体也变得的更健康，同样能够给男士带来积极地心态变化。</p><h5> 5、健身促进更佳的睡眠</h5><p> 一次好的夜间睡眠会提高你的注意力，提升你的生产力以及改善你的心情。锻炼是好睡眠的关键。定期的锻炼可以帮助你更快地入睡，而且让你睡得更深。</p><h5> 6.健身能疏通血管，预防心血管疾病</h5><p> 经常地、科学地从事体育运动，对心血管系统的形态结构和机能也有良好的影响，如经过适宜强度的耐力训练，可改善和增强心肌的供血能力和代谢能力，减少血管壁的脂肪沉积，对预防动脉硬化有着积极的作用，也能防止心肌缺血性疾病的发生。</p><h5> 7.增强记忆力</h5><p> 我们都希望自己有比较好的记忆力来面对工作的问题或考试，最新发表在脑行为研究期刊(journal Behavioral Brain Research)的研究显示，有氧运动可以增加血液中有关于记忆的贺尔蒙的增加！</p> <h5> 8.不容易感冒</h5><p> 目前对于健身的人比较不容易感冒的确切机制并不清楚，但发表在英国运动医学杂志 ( British Journal of Sports Medicine) 最新的研究指出，一星期健身五次以上的人，比健身一次或不健身的人，感冒的机率少了46%，此外常健身的人感冒后症状发生天数少了41%，症状严重度少了32%-40%，研究人员推测可能是健身有助于提高体内免疫系统！</p><h5> 9.有助于工作表现</h5><p> 去年针对19803名上班族调查报告显示，有健身习惯的上班族在公司表现比没有健身的同事在创造力、简报能力、生产力平均好了50%，研究结果发表在健康管理期刊(journal Population Health Management)，因此今年开始美国越来越多公司都有附设健身房让员工使用！</p><h5> 10.增加肌肉有助于减肥</h5><p> 随着肌力训练带来的肌肉增多，肌体在静态下的新陈代谢率也会逐步增加，所以每天你都会消耗更多的热量。研究发现，肌体每增加1磅肌肉，每日会多消耗35-50千卡热量。</p></div></div><hr></div><div class="jumbotron text-center jum-bottom" > <h4>减肥健身俱乐部</h4> <h5 style="">Copyright © 减肥健身俱乐部. 保留所有权利</h5></div></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 CSS样式代码img { width: 100%; height: auto; } .navbar-inverse { background-color: #a58f86; border-color: #a58f86; } .navbar-inverse .navbar-nav>li>a { color: #fff; } .navbar-inverse .navbar-toggle { border-color: #333333; } .navbar-brand { font-style: italic; } .navbar-nav { float: left; } .navbar-nav li { float: none; display: inline-block; } .glyphicon-chevron-left:before { content: none; } .glyphicon-chevron-right:before { content: none; } .carousel-control .glyphicon-chevron-right { font-size: 50px; } .carousel-control .glyphicon-chevron-left { font-size: 50px; } .menpai p .btn { padding-left: 0px; padding: 5px; } .menpai img { width: 100%; height: auto; border-radius: 5px; margin-bottom: 10px; border: 1px #e3e3e3 solid; } .imgkuang img { width: 100%; height: auto; } .fakeimg { overflow: hidden; height: auto; } .fakeimg img { width: 100%; height: auto; } .sy-fl li a { color: #080808; background: #e3e3e3; margin-top: 10px; } .sy-fl li a:hover { background: #66512C; color: #fff; } .row h4 { margin-top: 20px; font-weight: bold } .jum-bottom { padding: 20px; color: floralwhite; margin-top: 30px; background-color: #a58f86; margin-bottom: 0px; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #a58f86; } .navbar-inverse .navbar-toggle { border-color: #a58f86; } .toubg { padding-top: 100px; padding-bottom: 100px; color: #fff; background: url(../img/js-ind1.jpg) bottom; background-size: cover; } h5 { font-weight: bold; font-size: 16px; } .wsdy img { width: 100%; height: auto; }#myNavbar { display: flex !important; justify-content: space-between; } .col-md-4 img { height: 250px; width: auto; } .logo { height: 250px; width: auto; transition: all 0.25s; } .logo:hover { transform: scale(1.2); }123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141请 “ 点赞” “✍️评论” “ 收藏” 一键三连哦！ 【 我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：作业,响应
