HTML综合之实现耀炎食品有限公司网页
生活随笔
收集整理的這篇文章主要介紹了
HTML综合之实现耀炎食品有限公司网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML綜合之實現耀炎食品有限公司網頁
- 效果展示
- 導航欄
- 首頁
- 品牌與產品
- 聯營合作
- 配套服務
- 門店信息
- 關于我們
- 框架構思
- 代碼
- 結語
效果展示
導航欄
鼠標放在上面，會發現相應的變化，點擊圖片可以改變，效果如下所示
首頁
品牌與產品
聯營合作
配套服務
門店信息
關于我們
框架構思
我將整個頁面分成了兩個大框架。
將上圖兩部分設為一個整體，因為該部分變化少，將其寫死在一個 html 文件中，可以極大的減少代碼量，提高維護和修改的簡易性。
將這一部分用一個<iframe></iframe>標簽引用，即讓每一個網頁設計大大減少工作量和復雜性，例如 首頁 就可以僅僅寫成下圖這樣
關于我們 就可以僅僅寫成下圖這樣
代碼
此處僅展示部分代碼，完整代碼與所需圖片，可在我的GitHub中找到，GitHub鏈接在此
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>耀炎食品有限公司</title><link rel="stylesheet" href="css/index.css" type="text/css"><script>function huantu(obj) {var imgid = obj.id;obj.style.display = 'none';if (imgid == 'img1') {document.getElementById('img2').style.display = 'block';}if (imgid == 'img2') {document.getElementById('img3').style.display = 'block';}if (imgid == 'img3') {document.getElementById('img4').style.display = 'block';}if (imgid == 'img4') {document.getElementById('img1').style.display = 'block';}}</script> </head> <body> <div id="top"><input type="button" id="inp1" value="首頁" name="首頁" onclick="goPage(this)" /><input type="button" id="inp2" value="品牌與產品" name="品牌與產品" onclick="goPage(this)" /><input type="button" id="inp3" value="聯營合作" name="聯營合作" onclick="goPage(this)" /><input type="button" id="inp4" value="配套服務" name="配套服務" onclick="goPage(this)" /><input type="button" id="inp5" value="門店信息" name="門店信息" onclick="goPage(this)" /><input type="button" id="inp6" value="關于我們" onmouseover="mouseover()" onmouseleave="mouseleave()" /> </div> <div id="index_gywm"><input type="button" id="inp7" value="企業" name="關于我們" onclick="goPage(this)" onmouseover="mouseover()" onmouseleave="mouseleave()" /><input type="button" id="inp8" value="加入我們" name="聯營合作" onclick="goPage(this)" onmouseover="mouseover()" onmouseleave="mouseleave()" /> </div> <div align="center" style="margin-top: -2px;"><img id="img1" src="imgs/pic.png" width="1300px" height="600px" onclick="huantu(this)" /><img id="img2" src="imgs/蛋糕1.png" width="1300px" height="600px" style="display: none" onclick="huantu(this)" /><img id="img3" src="imgs/蛋糕2.png" width="1300px" height="600px" style="display: none" onclick="huantu(this)" /><img id="img4" src="imgs/蛋糕3.png" width="1300px" height="600px" style="display: none" onclick="huantu(this)" /> </div> <div align="center" style="margin-top: -4px"><iframe id="ifr" src="html/首頁.html" width="1300px" scrolling="no" style="height: 800px; border: none;" marginwidth="0px" marginheight="0px"></iframe> </div> <div align="center" style="margin-top: -3px"><img src="imgs/bottom_background.png" width="1300px" height="100px" align="center"/> </div><script>var 首頁 = 800; var 品牌與產品 = 1000; var 聯營合作 = 500; var 配套服務 = 1000; var 門店信息 = 1380; var 關于我們 = 500;preObj = document.getElementById('inp1');preObj.style.color = '#65360a';preObj.style.background = 'white';function goPage(obj) {if (obj.name == preObj.name){obj.style.color = '#65360a';obj.style.background = 'white';}else {preObj.style.color = 'white';preObj.style.background = '#65360a';obj.style.color = '#65360a';obj.style.background = 'white';preObj = obj;}var page = obj.name;var url = 'html/' + page + '.html';var ifr = document.getElementById('ifr');if (page == '首頁'){var height = 首頁;}if (page == '品牌與產品'){var height = 品牌與產品;}if (page == '聯營合作'){var height = 聯營合作;}if (page == '配套服務'){var height = 配套服務;}if (page == '門店信息'){var height = 門店信息;}if (page == '關于我們'){var height = 關于我們;}ifr.style.height = height.toString() + 'px';ifr.src = url;}function mouseover() {var gywm = document.getElementById('index_gywm');gywm.style.display = 'block';}function mouseleave() {var gywm = document.getElementById('index_gywm');gywm.style.display = 'none';} </script> </body> </html>結語
代碼中都寫有注釋，希望你能耐心閱讀，如還有不理解的地方，可以通過評論或郵箱聯系我（1079349989@qq.com）。
最終，望您學業有成、事業有成，謝謝！
總結
以上是生活随笔為你收集整理的HTML综合之实现耀炎食品有限公司网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CentOS 下搭建 Hadoop：Pe
- 下一篇： 2017年html5行业报告,云适配发布