HTML综合之实现耀炎食品有限公司网页
生活随笔
收集整理的這篇文章主要介紹了
HTML综合之实现耀炎食品有限公司网页
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
HTML綜合之實現(xiàn)耀炎食品有限公司網(wǎng)頁
- 效果展示
- 導(dǎo)航欄
- 首頁
- 品牌與產(chǎn)品
- 聯(lián)營合作
- 配套服務(wù)
- 門店信息
- 關(guān)于我們
- 框架構(gòu)思
- 代碼
- 結(jié)語
效果展示
導(dǎo)航欄
鼠標放在上面，會發(fā)現(xiàn)相應(yīng)的變化，點擊圖片可以改變，效果如下所示
首頁
品牌與產(chǎn)品
聯(lián)營合作
配套服務(wù)
門店信息
關(guān)于我們
框架構(gòu)思
我將整個頁面分成了兩個大框架。
將上圖兩部分設(shè)為一個整體，因為該部分變化少，將其寫死在一個 html 文件中，可以極大的減少代碼量，提高維護和修改的簡易性。
將這一部分用一個<iframe></iframe>標簽引用，即讓每一個網(wǎng)頁設(shè)計大大減少工作量和復(fù)雜性，例如 首頁 就可以僅僅寫成下圖這樣
關(guān)于我們 就可以僅僅寫成下圖這樣
代碼
此處僅展示部分代碼，完整代碼與所需圖片，可在我的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="品牌與產(chǎn)品" name="品牌與產(chǎn)品" onclick="goPage(this)" /><input type="button" id="inp3" value="聯(lián)營合作" name="聯(lián)營合作" onclick="goPage(this)" /><input type="button" id="inp4" value="配套服務(wù)" name="配套服務(wù)" onclick="goPage(this)" /><input type="button" id="inp5" value="門店信息" name="門店信息" onclick="goPage(this)" /><input type="button" id="inp6" value="關(guān)于我們" onmouseover="mouseover()" onmouseleave="mouseleave()" /> </div> <div id="index_gywm"><input type="button" id="inp7" value="企業(yè)" name="關(guān)于我們" onclick="goPage(this)" onmouseover="mouseover()" onmouseleave="mouseleave()" /><input type="button" id="inp8" value="加入我們" name="聯(lián)營合作" 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 品牌與產(chǎn)品 = 1000; var 聯(lián)營合作 = 500; var 配套服務(wù) = 1000; var 門店信息 = 1380; var 關(guān)于我們 = 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 == '品牌與產(chǎn)品'){var height = 品牌與產(chǎn)品;}if (page == '聯(lián)營合作'){var height = 聯(lián)營合作;}if (page == '配套服務(wù)'){var height = 配套服務(wù);}if (page == '門店信息'){var height = 門店信息;}if (page == '關(guān)于我們'){var height = 關(guān)于我們;}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>結(jié)語
代碼中都寫有注釋，希望你能耐心閱讀，如還有不理解的地方，可以通過評論或郵箱聯(lián)系我（1079349989@qq.com）。
最終，望您學業(yè)有成、事業(yè)有成，謝謝！
總結(jié)
以上是生活随笔為你收集整理的HTML综合之实现耀炎食品有限公司网页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CentOS 下搭建 Hadoop：Pe
- 下一篇： HTML生日快乐代码 html生日快乐网