javascript
web网页设计期末课程大作业：环境保护主题网站设计——农业三级带表单带js(14页)HTML+CSS+JavaScript
🎀 精彩專欄推薦👇🏻👇🏻👇🏻
?? 作者簡介: 一個熱愛把邏輯思維轉變?yōu)榇a的技術博主
💂 作者主頁: 【主頁——🚀獲取更多優(yōu)質源碼】
🎓 web前端期末大作業(yè)： 【📚畢設項目精品實戰(zhàn)案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到高級學習視頻教程 120G干貨分享】
🥇 關于作者: 歷任研發(fā)工程師，技術組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨?🎓網(wǎng)站題目
- 二、??網(wǎng)站描述
- 三、📚網(wǎng)站介紹
- 四、🌐網(wǎng)站效果
- 五、🔧 網(wǎng)站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多干貨
一、👨?🎓網(wǎng)站題目
🌲環(huán)境保護、🌳 保護地球、🌴 校園環(huán)保、🌵垃圾分類、🚵🏼綠色家園、等網(wǎng)站的設計與制作。
二、??網(wǎng)站描述
? 總結了一些學生網(wǎng)頁制作的經(jīng)驗：一般的網(wǎng)頁需要融入以下知識點：div+css布局、浮動、定位、高級css、表格、表單及驗證、js輪播圖、音頻 視頻 Flash的應用、ul li、下拉導航欄、鼠標劃過效果等知識點，網(wǎng)頁的風格主題也很全面：如愛好、風景、校園、美食、動漫、游戲、咖啡、音樂、家鄉(xiāng)、電影、名人、商城以及個人主頁等主題，學生、新手可參考下方頁面的布局和設計和HTML源碼（有用點贊△）
🏅 一套A+的網(wǎng)頁應該包含 (具體可根據(jù)個人要求而定)
三、📚網(wǎng)站介紹
📔網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結構。
📓網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
📒網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結構文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
📙網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）📄 js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到js代碼）。
四、🌐網(wǎng)站效果
五、🔧 網(wǎng)站代碼
🧱HTML結構代碼
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>網(wǎng)站首頁</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/lrtk.js"></script> <script type="text/javascript" src="js/lrtk.js"></script> <script>$(function() {$(".btn_top").hide();$(".btn_top").live("click",function(){$('html, body').animate({scrollTop: 0},300);return false;})$(window).bind('scroll resize',function(){if($(window).scrollTop()<=300){$(".btn_top").hide();}else{$(".btn_top").show();}})}) </script> </head> <body> <!----top開始----> <div class="top" name="top"> <div class="top-ner"> <div class="top-ner01"> <div class="logo"><img src="images/logo.jpg" /></div> <div class="dlzc"> <ul> <li><a href="login.html">登錄</a></li> </ul> </div> </div> <div id="nav"> <ul> <li><a class="host" href="index.html">網(wǎng)站首頁</a></li> <li><a href="about.html">關于我們</a></li> <li><a href="news.html">新聞資訊</a></li> <li><a href="chanpin.html">產(chǎn)品展示</a></li> <li><a href="hezuo.html">企業(yè)文化</a></li> </ul> </div> </div> </div> <!----banner開始----><div id="playBox"><div class="pre"></div><div class="next"></div><div class="smalltitle"><ul><li class="thistitle"></li><li></li><li></li></ul></div><ul class="oUlplay"><li><a href="#" target="_blank"><img src="images/1.jpg"></a></li><li><a href="#" target="_blank"><img src="images/2.jpg"></a></li><li><a href="#" target="_blank"><img src="images/3.jpg"></a></li></ul></div><!----main開始----> <div class="main"> <div class="m-top"></div> <div class="m-ner"> <div class="tit">產(chǎn)品展示</div><!----產(chǎn)品開始----> <div class="chanp"> <ul> <li class="mar8 mab8"><img src="images/cp01.jpg" /><p>圣女果</p><p><span>29.00元</span></p></li> <li class="mar8 mab8"><img src="images/cp02.jpg" /><p>獼猴桃</p><p><span>39.00元</span></p></li> <li class="mar8 mab8"><img src="images/cp03.jpg" /><p>掌葉復盆子</p><p><span>189.00元</span></p></li> <li class="mab8"><img src="images/cp04.jpg" /><p>相思果 Pro</p><p><span>129.00元</span></p></li> <li class="mar8"><img src="images/cp05.jpg" /><p>萬壽果</p><p><span>199.00元</span></p></li> <li class="mar8"><img src="images/cp06.jpg" /><p>鉤藤</p><p><span>89.00元</span></p></li> <li class="mar8"><img src="images/cp07.jpg" /><p>長桑果</p><p><span>129.00元</span></p></li> <li ><img src="images/cp08.jpg" /><p>玉竹</p><p><span>239.00元</span></p></li> </ul> </div> </div> </div> <!----news開始----> <div class="news"> <div class="news-ner"> <div class="tit">新聞資訊</div> <div class="tit2">分享最新科技資訊,關注特色農(nóng)業(yè)</div> <div class="news-box"> <ul> <li class="mar30"><a href="new01.html"> <img class="scm" src="images/n01.jpg" /> <h1>"布福娜"的果實造型奇特，吃上一次就會愛上的水果！</h1> <p>大家除了愛吃美食跟零食之外應該還很愛吃水果吧，飯后跟家里人坐在一起，一邊看電視一邊吃水果也十分享受呢.....</p> <p>2019-10-7 admin </p> </a> </li> <li><a href="new02.html"> <img class="scm" src="images/n02.jpg" /> <h1>一株苗木，帶富一方百姓人民日報聚焦肥西苗農(nóng)致富</h1> <p>蜿蜒盤旋的山路、生意盎然的苗木，時值初冬，驅車于安徽省肥西縣紫蓬鎮(zhèn)羅壩村苗木種植基地，漫山的紅楓.....</p> <p>2019-10-7 admin </p> </a> </li> <li class="mar30"><a href="new03.html"> <img class="scm" src="images/n03.jpg" /> <h1>楊梅之鄉(xiāng)</h1> <p>靖州苗族侗族自治縣，隸屬于湖南省懷化市。位于湖南省西南，懷化市南部，湘、黔、桂交界地區(qū)。地處云貴高原.....</p> <p>2019-10-7 admin </p> </a> </li> <li><a href="new04.html"> <img class="scm" src="images/n04.jpg" /> <h1>院士袁隆平 ：靖州楊梅好呷！</h1> <p>中國工程院院士、"雜交水稻之父"袁隆平院士專程出席品梅活動，現(xiàn)場品嘗新上市的靖州楊梅后，他連夸好吃.....</p> <p>2019-10-7 admin </p> </a> </li> <li class="mar30"><a href="new05.html"> <img class="scm" src="images/n05.jpg" /> <h1>高檔水果布福娜，農(nóng)村種植創(chuàng)收好幫手</h1> <p>布福娜，原產(chǎn)西部原始森林，近幾年在北方地區(qū)選育而成的一種珍稀植物。苗語的解釋為美容長壽之果。其根.....</p> <p>2019-10-7 admin </p> </a> </li> <li><a href="new06.html"> <img class="scm" src="images/n06.jpg" /> <h1>淺談推廣綠色農(nóng)業(yè)種植技術的方法</h1> <p>如何有效推廣綠色農(nóng)業(yè)種植技術？各位農(nóng)友你們知道嗎？現(xiàn)在的人們追求養(yǎng)生、追求健康、追求綠色飲食概念.....</p> <p>2019-10-7 admin </p> </a> </li> <li class="mar30"><a href="new07.html"> <img class="scm" src="images/n08.jpg" /> <h1>農(nóng)業(yè)部部署落實中央一號文件 </h1> <p>為深入貫徹《中共中央國務院關于深入推進農(nóng)業(yè)供給側結構性改革 加快培育農(nóng)業(yè)農(nóng)村發(fā)展新動能的若干意見》.....</p> <p>2019-10-7 admin </p> </a> </li> <li><a href="new08.html"> <img class="scm" src="images/n07.jpg" /> <h1>綠色農(nóng)業(yè)發(fā)展如何成為新常態(tài)</h1> <p>"四十年來'三農(nóng)'發(fā)展雖然取得很大成績。但要真正達到強富美，還必須從幾大陷阱中拔出腿來與時俱進.....</p> <p>2019-10-7 admin </p> </a> </li> </ul> </div> </div></div> <!----footer開始----> <div class="footer"> <div class="footer-ner"> <ul> <li> <h1><a href="#">關于我們</a></h1> <p><a href="#">公司簡介</a></p> <p><a href="#">在線留言</a></p> <p><a href="#">在線反饋</a></p> <p><a href="#">聯(lián)系我們</a></p> </li> <li> <h1><a href="#">新聞資訊</a></h1> <p><a href="#">公司動態(tài)</a></p> <p><a href="#">業(yè)界資訊</a></p> <p><a href="#">榮譽資質</a></p> <p><a href="#">產(chǎn)品信息 </a></p> </li> <li> <h1><a href="#">服務與支持</a></h1> <p><a href="#">用戶手冊</a></p> <p><a href="#">產(chǎn)品支持</a></p> <p><a href="#">質保服務</a></p> <p><a href="#">售后政策 </a></p> </li><li> <h1><a href="#">基地展示</a></h1> <p><a href="#">優(yōu)勢展示</a></p> <p><a href="#">配送流程</a></p> <p><a href="#">合作流程</a></p> <p><a href="#">在線留言</a></p> </li> <li class="web"> <p class="wenz">聯(lián)系我們</p> <img src="images/foot01.jpg" /> <img src="images/foot02.jpg" /> <img src="images/foot03.jpg" /> </li> </ul> </div> </div> <div class="izl-rmenu"><a class="consult" target="_blank"><div class="phone" style="display:none;">010-12345678</div></a> <a class="cart"><div class="pic"></div></a> <a href="#top" class="btn_top" style="display: block;"></a> </div> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" id="udesk-feedback-tab" class="udesk-feedback-tab-left" style="display: block; background-color: black;"></a> </body> </html>💒CSS樣式代碼
@charset "utf-8"; /* CSS Document */body {margin: 0 auto;font-size: 12px;font-family: "微軟雅黑",arial;line-height: 22px;background: #fcf2dd; }div,p,input,ul,li,h1,h2 {height: auto;list-style: none;margin: 0;padding: 0;vertical-align: middle; }img {border: 0;margin: 0;padding: 0; }a {color: #333;text-decoration: none; }a:link {color: #333; }a:hover {color: #69F;text-decoration: none;overflow: hidden; }/*----網(wǎng)頁開始----*/ .top {height: 107px;width: 1200px;margin: 0 auto;background: #fff; }.top-ner {width: 1150px;height: 107px;margin: 0 auto; }.top-ner01 {height: 45px;padding-top: 15px;width: 100%; }.logo {width: 177px;height: 45px;float: left; }六、🥇 如何讓學習不再盲目
很多剛入門編程的小白學習了基礎語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學者入門訓練。該專題為編程入門級別，適合剛學完語法的小白練習，題目涉及編程基礎語法，基本結構等，每道題帶有練習模式和考試模式，可還原考試模式進行模擬，也可通過練習模式進行練習 。
七、🎁更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優(yōu)質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！
3.
以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻🔥總結
以上是生活随笔為你收集整理的web网页设计期末课程大作业：环境保护主题网站设计——农业三级带表单带js(14页)HTML+CSS+JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 少林寺、孔子网站被黑
- 下一篇： Mesh—合并网格提升性能