效果展示

导航栏

鼠标放在上面，会发现相应的变化，点击图片可以改变，效果如下所示

首页

品牌与产品

联营合作

配套服务

门店信息

关于我们

框架构思

我将整个页面分成了两个大框架。

将上图两部分设为一个整体，因为该部分变化少，将其写死在一个 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综合之实现耀炎食品有限公司网页相关推荐

耀炎食品-1.index
创建index.heml ---------------------------------------------------------------------- 在body中,分块一整个顶部, ...
web作业之期末工程 “耀炎食品网站”
设计思路不难看出,此次期末工程,我们要具体分为六个网页进行完成而设计思路为: 1.设计一个总网页,六个分网页,最后进行调用达到最终效果 2.此次将实行css js html的分离 3建立一个图片目 ...
福建盼盼食品有限公司网络营销集团分析报告
一.样本的选择我通过360导航中搜索"福建食品公司",在翻过三四页之后找到了"福建盼盼食品有限公司"--公司官网.在目标消费者产品需求调研表中,有部分消费者有 ...
厦门羽燕食品有限公司受邀参加2022世界滋补产业生态大会暨品牌展示会
厦门羽燕食品有限公司是即食燕窝罐头.即食燕窝罐头等产品专业生产加工的公司,拥有完整.科学的质量管理体系.厦门羽燕食品有限公司的诚信.实力和产品质量获得业界的认可.欢迎各界朋友莅临参观.指导和业务洽谈. ...
html期末作业代码网页设计——月饼美食食品模板(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程食品设计网页规划与设计计食品模板设计源码
HTML5期末大作业文章目录 HTML5期末大作业一.作品展示二.文件目录三.代码实现四.获取更多源码一.作品展示二.文件目录三.代码实现 <!DOCTYPE html PUBL ...
HTML5期末大作业：月饼美食网站设计——月饼美食食品模板(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程食品设计网页规划与设计计食品模板设计源码
HTML5期末大作业:月饼美食网站设计--月饼美食食品模板(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程食品设计网页规划与设计计食品模板设计源码常见网页设计 ...
HTML5期末大作业：中韩美食加盟网站设计——中韩美食加盟网站(22页) H关于食品的网页设计作页源码下载DW大学生网页大作业网页设计
HTML5期末大作业:中韩美食加盟网站设计--中韩美食加盟网站(22页) H关于食品的网页设计作页源码下载DW大学生网页大作业网页设计常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. ...
HTML5期末大作业：美食餐厅网站设计——一千一夜美食餐厅(11页) 食品网页设计作业,海鲜网页制作作业, 大众食品学生网页作业, 美食网页作业成品, 食物网页作业模板 ,甜品网页作业定制
HTML5期末大作业:美食餐厅网站设计--一千一夜美食餐厅(11页) 食品网页设计作业,海鲜网页制作作业, 大众食品学生网页作业, 美食网页作业成品, 食物网页作业模板 ,甜品网页作业定制常见网页设 ...
Web前端：中国环宇科技有限公司网页设计
案例 HTML <!DOCTYPE html> <html><head><meta charset="utf-8"><meta ...

HTML综合之实现耀炎食品有限公司网页