【html网页页面011】html+css+js制作香菇品牌食品网页含视频、轮播特效（5页面附效果及源码）

2025/2/24 23:22:25 来源：https://blog.csdn.net/hdp134793/article/details/144413326 浏览: 次关键词：【html网页页面011】html+css+js制作香菇品牌食品网页含视频、轮播特效（5页面附效果及源码）

食品主题美食品牌网页制作

🥤1、写在前面
🍧2、涉及知识
🌳3、网页效果
- 完整效果(5页)：
- 代码目录结构：
- page1、首页
- page2、关于我们
- page3、经Y产品
- page4、近期活动
- page5、新品上新
🌈4、网页源码
- 4.1 html
- 4.2 CSS
- 4.3 源码获取
- - 食品香菇网页源码及介绍链接
🐋5、作者寄语

🥤1、写在前面

食品香菇主题网站品牌主题的网页一共5个页面

网页使用html+css+js制作
页面可以相互跳转包含图文、菜单列表页面、视频页面、轮播效果
含一级、二级等
网页可以使用vscode hbuilder dw等打开修改
里面的图片和文字都可以替换为其他内容
html静态网页 js轮播效果布局简单原创html网页设计适合当作业使用

静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计,常用的网页设计软件有Dreamwea ver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如家乡、美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

🍧2、涉及知识

html+css+js香菇美食品牌主题网页，轮播特效网页，食品主题网页制作css+div，美食主题品牌网页，5页网页制作含视频元素，静态页面html网页、动态js轮播效果。html品牌香菇主题网页，美食主题网页制作，品牌主题网页html

🌳3、网页效果

完整效果(5页)：

在这里插入图片描述

代码目录结构：

在这里插入图片描述

page1、首页

在这里插入图片描述

page2、关于我们

在这里插入图片描述

page3、经Y产品

在这里插入图片描述

page4、近期活动

在这里插入图片描述

page5、新品上新

在这里插入图片描述

🌈4、网页源码

4.1 html

 <div class="bigbox"><div class="top"><img width="200" src="../images/index/1.png" alt=""></div><div class="menu"><ul><a href="../index.html"><li>首页</li></a><a href="aboutus.html"><li>关于我们</li></a><a href="product.html"><li>经营产品</li></a><a href="action.html"><li>近期活动</li></a><a href="news.html"><li class="activee">新品上市</li></a></ul></div><div class="main"><div class="sy-list"><img width="100" src="../images/news/1.jpg" alt=""></div><div class="sy-list"><ul><li><img width="350" height="180" src="../images/news/2.jpg" alt=""><p>菇且逛逛新推出干货蘑菇150g</p><p class="red"> 39 </p></li><li><img width="350" height="180" src="../images/news/3.jpg" alt=""><p>菇且逛逛新上市君臣汤100g</p><p class="red">49</p></li><li><img width="350" height="180" src="../images/news/4.jpg" alt=""><p>菇且逛逛新上市君臣汤600g折</p><p class="red"> 199</p></li></ul></div><div class="sy-list"><img width="1100" src="../images/news/5.jpg" alt=""></div><div class="sy-list"><img width="350" height="200" src="../images/news/6.jpg" alt=""><img width="350" height="200" src="../images/news/7.jpg" alt=""><img width="350" height="200" src="../images/news/8.jpg" alt=""></div></div></div>

4.2 CSS

* {padding: 0;margin: 0;
}body, html {padding: 0;margin: 0;width: 100%;height: 100%;
}.bigbox {width: 1366px;height: 1000px;margin: 0 auto;padding: 0;background-color: #F4E9D3;
}.top {padding-left: 600px;
}.menu {width: 85%;height: 60px;border-radius: 15px;margin: 10px auto;background-color: #694A3B;
}ul {list-style: none;
}ul a {color: #fff;
}