【html网页页面011】html+css+js制作香菇品牌食品网页含视频、轮播特效(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

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

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;
}

4.3 源码获取

源码直通车点击下面链接:

食品香菇网页源码及介绍链接

🐋5、作者寄语

如果觉得我这篇博客对您有帮助,请 "👍点赞" "✍️评论" "💙收藏" 一键三连哦!

更多主题及完整源码 尽在【IT黄大大】网站,有很多主题优质网页源码。

以上有问题可以随时交流学习,一起进步!

有任何不懂的和意见都可以评论区留言,也可私信,博主都会认真回复哟!

相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室13 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室13 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀16 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js