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

news/2024/12/15 16:50:44/

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

  • 🥤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、网页源码

html_35">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黄大大】网站,有很多主题优质网页源码。

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

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


http://www.ppmy.cn/news/1555345.html

相关文章

saltstack 和 ansible 最新比对

Ansible 和 SaltStack、Puppet 等都是配置管理系统&#xff08;configuration management system&#xff09; Ansible 和 SaltStack 都是 Python 编译的自动化运维工具&#xff0c;都是使用模块管理。不同的是Ansible没有客户端&#xff08;使用的 SSH 通道传输&#xff09;而…

设计模式学习之——装饰者模式

装饰者模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你动态地向一个现有的对象添加新的行为&#xff0c;同时又不改变其结构。 一、定义与特点 定义&#xff1a;装饰者模式动态地将责任附加到对象上。若要扩展功能&#xff0c;装饰者…

《Vue进阶教程》第十课:其它函数

往期内容&#xff1a; 《Vue零基础入门教程》合集&#xff08;完结&#xff09; 《Vue进阶教程》第一课&#xff1a;什么是组合式API 《Vue进阶教程》第二课&#xff1a;为什么提出组合式API 《Vue进阶教程》第三课&#xff1a;Vue响应式原理 《Vue进阶教程》第四课&#…

opencv-python的简单练习

题目1.读取一张彩色图像并将其转换为灰度图。 import cv2 # 读取图片文件 img cv2.imread(./1.png)# 将原图灰度化 img_gray cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)# 输出图片 cv2.imshow(img,img) cv2.imshow(img_g,img_gray) # 进行阻塞 cv2.waitKey(0) 题目2&#xff1a;…

【Axure视频教程】中继器表格——打开指定页面

今天教大家在Axure制作中继器表格--打开指定页面的原型模板&#xff0c;鼠标点击表格里员工所在行的查看简历按钮&#xff0c;就可以跳转至该员工对应的简历页面。这个原型模板是用中继器制作的&#xff0c;所以使用也很简单&#xff0c;只需要在中继器表格里填写对应内容&…

Android 异形屏设备设置沉浸式界面

Android 异形屏设备设置沉浸式界面 问题 由于业务需要&#xff0c;应用需要配置沉浸式界面&#xff0c;但设置全屏时&#xff0c;会遇到异形屏采用传统的全屏设置模式无效问题。 解决方案 Android P版本提供参数layoutInDisplayCutoutMode供实现沉浸式设置。layoutInDispl…

c语言数据结构与算法--简单实现线性表(顺序表+链表)的插入与删除

老规矩&#xff0c;点赞评论收藏关注&#xff01;&#xff01;&#xff01; 目录 线性表 其特点是&#xff1a; 算法实现&#xff1a; 运行结果展示 链表 插入元素&#xff1a; 删除元素&#xff1a; 算法实现 运行结果 线性表是由n个数据元素组成的有限序列&#xff0c;每个元…

双重AEB:将基于规则的方法与多模态大型语言模型相结合,以实现有效的紧急制动(202410)

Dual-AEB: Synergizing Rule-Based and Multimodal Large Language Models for Effective Emergency Braking 双重AEB&#xff1a;将基于规则的方法与多模态大型语言模型相结合&#xff0c;以实现有效的紧急制动 Abstract Automatic Emergency Braking (AEB) systems are a c…