作者主頁(yè)：編程指南針
作者簡(jiǎn)介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者、CSDN博客專家 、掘金特邀作者、多年架構(gòu)師設(shè)計(jì)經(jīng)驗(yàn)、騰訊課堂常駐講師
主要內(nèi)容：Java項(xiàng)目、畢業(yè)設(shè)計(jì)、簡(jiǎn)歷模板、學(xué)習(xí)資料、面試題庫(kù)、技術(shù)互助
收藏點(diǎn)贊不迷路? 關(guān)注作者有好處
文末獲取源碼?
項(xiàng)目編號(hào)：BS-QD-009
一，環(huán)境介紹
語(yǔ)言環(huán)境：HTML5
開(kāi)發(fā)工具：IDEA或eclipse
二，項(xiàng)目簡(jiǎn)介
作為實(shí)用性極強(qiáng)的超文本標(biāo)記語(yǔ)言，HTML5自2014年一經(jīng)發(fā)布便成為了廣大網(wǎng)頁(yè)設(shè)計(jì)愛(ài)好者最喜歡的網(wǎng)頁(yè)標(biāo)記語(yǔ)言之一[1]。隨著近幾年的發(fā)展與應(yīng)用，HTML5因其能夠跨越平臺(tái)、可本地化儲(chǔ)存、具有多媒體性和保證及時(shí)更新等優(yōu)點(diǎn)，目前已成為絕大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)的基石[2]。而事實(shí)也早已證明了，使用HTML5設(shè)計(jì)的網(wǎng)頁(yè)為數(shù)以萬(wàn)計(jì)的互聯(lián)網(wǎng)用戶帶來(lái)更優(yōu)質(zhì)的網(wǎng)絡(luò)體驗(yàn)。
- 選題背景
隨著當(dāng)今社會(huì)經(jīng)濟(jì)的不斷發(fā)展和人類物質(zhì)生活的極大豐富，人們不再僅滿足于日常溫飽帶來(lái)的滿足，而是更多地開(kāi)始追求身體的健康與身材的健美。隨著大眾的審美水平及人們對(duì)于自身形象要求的不斷提高，如今“肥胖”已經(jīng)成為了大部分人眼中的一種不良體態(tài)，并對(duì)之深惡痛絕。正是伴隨著這種自我審美意識(shí)的覺(jué)醒，使得健身行業(yè)在近年迎來(lái)了一段發(fā)展的黃金時(shí)期。然而，并非所有的愛(ài)美人士都能夠擁有足夠的時(shí)間或金錢去健身房聘請(qǐng)健身教練幫助自己完成身材管理。在此，我們認(rèn)為，對(duì)于這部分需要幫助的人群，設(shè)計(jì)一個(gè)能夠幫助用戶進(jìn)行體重管理，并能夠傳授正確運(yùn)動(dòng)方式的健康減脂網(wǎng)站是十分必要的。
- 選題意義
構(gòu)建實(shí)用、便捷的健康減脂網(wǎng)站來(lái)幫助廣大網(wǎng)絡(luò)用戶用合理的運(yùn)動(dòng)方式和飲食減去自身多余的脂肪，這不僅是在幫助他們提高身材的外在美感，同時(shí)也是在幫助他們維系健康的體魄。目前全世界都出于一個(gè)與新冠病毒作斗爭(zhēng)的艱難時(shí)期，很多人被隔離在家，只能通過(guò)網(wǎng)絡(luò)實(shí)現(xiàn)與外界的溝通與聯(lián)系，此時(shí)更需要有一個(gè)健身網(wǎng)站來(lái)幫助大家，使他們即便處于隔離狀態(tài)同樣可以進(jìn)行運(yùn)動(dòng)鍛煉，從而維持自身的健康與身材，進(jìn)而保證身心的舒暢。
- 設(shè)計(jì)特點(diǎn)
健康減脂網(wǎng)站可以使我們的運(yùn)動(dòng)不再受場(chǎng)所的限制，使減掉脂肪更加科學(xué)、容易。
網(wǎng)頁(yè)特點(diǎn)為：
- 界面內(nèi)容清晰，操作簡(jiǎn)單；
- 硬件要求不高，易于維護(hù)。
三，系統(tǒng)展示
根據(jù)設(shè)計(jì)的健康減脂網(wǎng)站的框架結(jié)構(gòu)，我們?cè)O(shè)計(jì)實(shí)現(xiàn)了健康減脂網(wǎng)站的導(dǎo)航頁(yè)面，展示如圖3-2：
圖3-2 健康減脂網(wǎng)站的導(dǎo)航頁(yè)面。
首先，為了使首頁(yè)的更加美觀，我們還在首頁(yè)插入了多副輪播圖，輪流播放的圖片會(huì)無(wú)縫過(guò)渡到移動(dòng)版頁(yè)面上，也可以通過(guò)鼠標(biāo)控制切換圖片， 在保證了豐富的頁(yè)面體驗(yàn)的同時(shí)，又實(shí)現(xiàn)了信息的傳播以及視覺(jué)傳達(dá)的效果。具體實(shí)現(xiàn)代碼如圖3-3所示。
圖3-3 健康減脂網(wǎng)站首頁(yè)圖片的輪流播放樣式代碼。
此外，我們還實(shí)現(xiàn)了導(dǎo)航欄的跳轉(zhuǎn)功能，這可以幫助用戶快速尋找適合自己的課程和想學(xué)習(xí)的知識(shí)。為實(shí)現(xiàn)此功能，我們運(yùn)用了如下所示的導(dǎo)航功能跳轉(zhuǎn)代碼：
<div id="header">
? <div class="nav">
<a href="index.html">登錄</a>
? <a href="index.html">首頁(yè)</a>
? <a href="about.html">關(guān)于減脂</a>
? <a href="fangfa.html">減脂方法</a>
? <a href="yuanze.html">減脂原則</a>
? <a href="shixiang.html">注意事項(xiàng)</a>
<a href="index.html">搜索</a>
? </div>
</div>
<div id="banner">
通過(guò)導(dǎo)航的跳轉(zhuǎn)，用戶會(huì)在系統(tǒng)的幫助下進(jìn)入想要到達(dá)到的入口，進(jìn)而跳轉(zhuǎn)到課程界面（如圖3-4）。在相應(yīng)的課程界面中，用戶可以選擇自己想要了解的相關(guān)知識(shí)進(jìn)行點(diǎn)擊閱讀和學(xué)習(xí)。
?圖3-4 健康減脂網(wǎng)站的課程頁(yè)面。
如圖3-4所示，跳轉(zhuǎn)后到達(dá)的課程頁(yè)面簡(jiǎn)單明了，十分方便網(wǎng)站用戶的查閱與學(xué)習(xí)。在此，我們實(shí)現(xiàn)了良好的頁(yè)面構(gòu)建，可以給前來(lái)網(wǎng)站學(xué)習(xí)減脂的用戶提供優(yōu)良的瀏覽體驗(yàn)。
用戶注冊(cè)
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-766095.html
登錄
?
四，核心代碼展示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>健康減脂網(wǎng)</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div class="nav">
<a href="index.html">首頁(yè)</a>
<a href="about.html">關(guān)于減脂</a>
<a href="fangfa.html">減脂方法</a>
<a href="yuanze.html">減脂原則</a>
<a href="shixiang.html">注意事項(xiàng)</a> <a href="register.html">注冊(cè)</a>
<a href="sign.html">登錄</a>
</div>
</div>
<div id="banner"><img src="images/banner.jpg" width="100%" ></div>
<div style="clear:both;"></div>
<div id="section1" style="height:650px;">
<div class="content1">
<h2>
<div class="title">
<p><img src="images/h2_1.jpg" alt="h2標(biāo)題"></p>
<p><a href="#">注意事項(xiàng)</a></p>
</div>
</h2>
<p class="p"><strong>減脂禁忌</strong></p>
<p class="p">1、吃的單一
很多人為了減脂每天吃的東西都非常簡(jiǎn)單，這會(huì)導(dǎo)致很多人缺乏營(yíng)養(yǎng)，不能為了減脂只吃簡(jiǎn)單食物，需要以改變飲食習(xí)慣來(lái)控制體重，保證營(yíng)養(yǎng)均衡，葷素搭配適度，不能因營(yíng)養(yǎng)缺乏而出現(xiàn)其他身體問(wèn)題。</p>
<p class="p">2、吃過(guò)度甜食
很多人喜歡吃甜食，甜食能讓我們心情舒暢，而甜食是最容易發(fā)胖的食物，吃甜食也就相當(dāng)于直接存儲(chǔ)了脂肪，很多果汁飲料中也含有大量的糖分，所以在減脂過(guò)程中不能吃太多甜食。</p>
<p class="p">3、吃的太油
脂肪就是我們肥胖的關(guān)鍵，即使吃熱量非常低的蔬菜，如果放太多的油還是會(huì)造成發(fā)胖，肉類中的脂肪含量也非常高，吃這些食物的時(shí)候需要注意攝取的量。</p>
<p class="p">4、不吃早餐
很多人不吃早餐，用午餐來(lái)補(bǔ)充，饑腸轆轆，形成狼吞虎咽與暴飲暴食的習(xí)慣，使午餐攝入過(guò)量導(dǎo)致胰島素分泌突然增加，因而造成了脂肪合成增加，這樣非常不利于減脂。</p>
<p class="p"> </p>
<div style="clear:both;"></div>
</div>
</div>
<div id="section1" style="background-color: #FFFFFF; height:1100px;">
<div class="content1" style=" height:1000px;">
<p class="p"> </p>
<p class="p"><strong>減脂誤區(qū)</strong></p>
<p class="p"> 1、睡眠不足
如果你的睡眠不充足，那么你的身體就會(huì)通過(guò)另外的方式來(lái)獲取能量，往往這也就意味著熬夜會(huì)使你過(guò)度飲食。</p>
<p class="p"> 2、辣椒減脂
并沒(méi)有研究直接證明辣椒能夠減脂，而且刺激性強(qiáng)的辣椒過(guò)量食用會(huì)影響胃部機(jī)能，吃太多刺激性食物還會(huì)令皮膚變得粗糙，似乎有些得不償失。</p>
<p class="p">3、一味追求低卡路里的食譜
減脂期間降低卡路里的攝入固然正確，但低于800卡路里的食譜最終可能會(huì)導(dǎo)致?tīng)I(yíng)養(yǎng)不良，降低新陳代謝率。以后多吃一點(diǎn)就會(huì)迅速發(fā)胖。</p>
<p class="p">4、喝咖啡
咖啡減脂最終還是要?dú)w根到運(yùn)動(dòng)上。最重要的是，即使配合運(yùn)動(dòng)，要達(dá)到分離出脂肪酸的效果，每天至少得喝8杯咖啡，這么大的量一定會(huì)讓你長(zhǎng)期失眠。大量喝咖啡還會(huì)導(dǎo)致身體缺水，影響膚質(zhì)，更有害健康。</p>
<p class="p">5、節(jié)食
研究發(fā)現(xiàn)，如果你從25歲時(shí)就開(kāi)始用節(jié)食來(lái)保持身材，10年后你的健康狀況將會(huì)因此受損。節(jié)食使到達(dá)胃部的食物只有那么一點(diǎn)點(diǎn)，胃的運(yùn)轉(zhuǎn)能力和承受力也會(huì)隨之逐漸下降，而與此同時(shí)，胃還要忍受浸泡在多余胃酸中的折磨，長(zhǎng)期下去，患胃病的概率大大增加。</p>
<p class="p"> 5.運(yùn)動(dòng)前熱身：
脂肪的消耗需要一個(gè)漫長(zhǎng)的過(guò)程，等你感到全身發(fā)熱并且微微出汗時(shí)，你的脂肪才剛剛進(jìn)入燃燒狀態(tài)，而這個(gè)過(guò)程需要15～20分鐘，也就是熱身。簡(jiǎn)單來(lái)說(shuō)，你騎了30分鐘自行車，但前面20分鐘屬于“白練”。先做一些力量訓(xùn)練，肌肉是人體的發(fā)熱器，10分鐘就能完成熱身，這樣，當(dāng)你開(kāi)始騎自行車時(shí)，整個(gè)過(guò)程都在燃燒脂肪。</p>
<p class="p">6、一味吃素
食素者更容易發(fā)生缺鐵性貧血！雖然植物性食物也能補(bǔ)鐵，但是吸收利用的效率比起動(dòng)物血、紅肉中的血紅素鐵就要差的遠(yuǎn)了。減脂最好的食物結(jié)構(gòu)是，以碳水化合物供能為主，占總熱量的40%-50%，脂肪減少，蛋白質(zhì)要充足。如果食物結(jié)構(gòu)不對(duì)，或者熱量攝入減少，則可能導(dǎo)致?tīng)I(yíng)養(yǎng)不良、貧血、低蛋白血癥等，表現(xiàn)為身體虛弱無(wú)力、頭暈、心悸、嗜睡、反應(yīng)遲鈍、記憶力下降，嚴(yán)重的可引起暈厥，甚至影響呼吸和心跳。</p>
<p class="p"> </p>
<p class="p"> </p>
<div style="clear:both;"></div>
</div>
</div>
<div id="footer">
<p style="text-align:center; color:#FFFFFF; line-height:80px;">健康減脂網(wǎng)</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>健康減脂網(wǎng)</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div class="nav">
<a href="index.html">首頁(yè)</a>
<a href="about.html">關(guān)于減脂</a>
<a href="fangfa.html">減脂方法</a>
<a href="yuanze.html">減脂原則</a>
<a href="shixiang.html">注意事項(xiàng)</a> <a href="register.html">注冊(cè)</a>
<a href="sign.html">登錄</a>
</div>
</div>
<div id="banner"><img src="images/banner.jpg" width="100%" ></div>
<div style="clear:both;"></div>
<div id="section3">
<h2>
<div class="title">
<p><img src="images/h2_2.jpg" alt="h2標(biāo)題"></p>
<p><a href="#">飲食方法</a></p>
</div>
</h2>
<div class="news-left">
<img src="images/9.jpg">
</div>
<div class="news-right">
<ul>
<li><a href="#">
學(xué)會(huì)5款“刮油”沙拉，再也不怕長(zhǎng)贅肉了！</a>
<p>蔬菜沙拉是一種熱量比較低的食物，適合在減肥期間食用。下面跟著小編一起來(lái)看看什么蔬菜沙拉減肥？如何自制減肥蔬菜沙拉？</p>
</li>
<li>
<a href="#">別再絕食減肥了，這3個(gè)減肥建議，不反彈，更安全</a>
<p>大家要清楚什么是辟谷減肥法，其實(shí)這是一種道家的生活習(xí)慣，很多人沒(méi)有全面理解辟谷的具體方法，盲目跟隨其他人的腳步，這樣效果是很有限的。</p>
</li>
<li>
<a href="#">飲食注意一個(gè)細(xì)節(jié)，你會(huì)離“瘦”越來(lái)越近</a>
<p>自古以來(lái)，我國(guó)就有細(xì)嚼慢咽的吃飯傳統(tǒng)，但隨著工作節(jié)奏的加快，更多的人選擇快餐，選擇快速用餐，這種習(xí)慣，很有可能造成肥胖。</p>
</li>
<li>
<a href="#">晚餐一吃胖三斤？如果吃的是這5種，發(fā)胖是不存在的</a>
<p>所謂“三分練七分吃”，除了健身外，吃也是減肥的一個(gè)重要方法，那么晚上吃啥不會(huì)胖還美容呢？</p>
</li>
<li><a href="#">喝水也能瘦，教你如何喝出健康喝出體態(tài)</a>
<p>喝水是個(gè)好習(xí)慣，很多人都有，正確的喝水能幫助我們提高減脂的效率，在飯后喝水更是如此，那么飯后喝水你喝對(duì)了嗎？</p>
</li>
</ul>
</div>
<div style="clear: both;" > </div>
</div>
<div id="section4">
<div class="content4">
<h2>
<div class="title">
<p><img src="images/h2_1.jpg" alt="h2標(biāo)題"></p>
<p><a href="#">運(yùn)動(dòng)方法</a></p>
</div>
</h2>
<div class="news-left">
<img src="images/9-1.jpg">
</div>
<div class="news-right">
<ul>
<li><a href="#">
4個(gè)虐腹動(dòng)作，每天做一做，快速縮小腰圍</a>
<p>女人生完孩子之后腹部就會(huì)變得沒(méi)那么結(jié)實(shí)了，肉也非常的多，平常穿衣服也就開(kāi)始變得不好看了，產(chǎn)后瘦腹部是非常重要的一件事情。</p>
</li>
<li>
<a href="#">如果你想塑形，一定要做力量訓(xùn)練</a>
<p>大部分認(rèn)為跑步有氧用來(lái)減肥，力量練習(xí)用來(lái)塑形，這么說(shuō)沒(méi)有問(wèn)題，但是過(guò)于片面了，到底怎么回事，來(lái)聽(tīng)小編具體說(shuō)說(shuō)。</p>
</li>
<li>
<a href="#">30天運(yùn)動(dòng)減肥計(jì)劃，每天做這些動(dòng)作就能瘦</a>
<p>運(yùn)動(dòng)減肥計(jì)劃是減肥成功的關(guān)鍵，一份合理的運(yùn)動(dòng)減肥計(jì)劃可以幫助你瘦得更快更有效率，而正確的減肥動(dòng)作，更是能讓你瘦得輕松無(wú)壓力。</p>
</li>
<li>
<a href="#">3個(gè)動(dòng)作堅(jiān)持一個(gè)月，你不會(huì)再被說(shuō)“虎背熊腰”！</a>
<p>背部線條的美是自己看不到別人看的到的，如何能讓別人從后背就能感受到你的美，就先把背部線條練出來(lái)。</p>
</li>
<li><a href="#">想減肥就得跑步！記住“3個(gè)不”，減脂不費(fèi)力</a>
<p>夏天跑步是個(gè)很好的減肥運(yùn)動(dòng)。
跑步是很好的有氧運(yùn)動(dòng)，也是特別好的減肥運(yùn)動(dòng)，好習(xí)慣是需要堅(jiān)持的！</p>
</li>
</ul>
</div>
<div style="clear: both;" > </div>
</div>
</div>
<div id="footer">
<p style="text-align:center; color:#FFFFFF; line-height:80px;">健康減脂網(wǎng)</p>
</div>
</body>
</html>
五，項(xiàng)目總結(jié)
本項(xiàng)目基于HTML5+CSS+JS來(lái)開(kāi)發(fā)設(shè)置，可以作為課程作業(yè)或畢設(shè)使用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-766095.html
到了這里，關(guān)于前端畢業(yè)設(shè)計(jì)|課程設(shè)計(jì)|基于 HTML5 的健康減脂網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
