html5简洁响应式美食菜单定价网站模板资源-CSDN文库

共54个文件

woff2：19个

jpg：16个

css：4个

版权申诉

5 浏览量 2022-07-14 02:40:07 上传评论收藏 1.81MB RAR 举报

：“html5简洁响应式美食菜单定价网站模板”是指一种基于HTML5技术构建的网页设计模板，专为展示美食菜单和价格而设计。这种模板具有简洁的界面和响应式布局，能够适应不同设备的屏幕尺寸，如手机、平板电脑和桌面电脑。：“注：无后台”意味着这个模板不包含任何后端服务器支持。这意味着网站的数据管理（如菜品更新、价格调整等）将完全在前端进行，或者需要通过手动编辑HTML和CSS文件来实现。用户可能需要有一定的网页编辑基础才能对内容进行维护和更新。【HTML5】：HTML5是超文本标记语言的第五个主要版本，增加了许多新的语义元素和功能，如音频和视频嵌入、离线存储、拖放功能、表单控件增强等。在美食菜单模板中，HTML5可能被用来创建互动的菜单项，提供更好的用户体验。【响应式设计】：响应式网页设计是一种使网站能够在不同设备上呈现良好效果的方法。它通过CSS3媒体查询和其他技术，根据用户设备的屏幕大小和方向调整布局、图片大小及字体。在美食菜单模板中，响应式设计确保无论用户是在大屏幕的桌面还是小屏幕的移动设备上浏览，都能清晰地查看菜单和价格。【CSS3】：层叠样式表第三版，提供了更多的样式控制和动画效果。在模板中，CSS3可能会用于定义页面的视觉风格，如颜色、字体、过渡和动画，以及响应式布局的实现，让菜单在不同屏幕尺寸下自动调整布局。【JavaScript】：可能用于添加交互性，如动态显示菜单项、添加到购物车功能、滚动效果等。JavaScript还可以与HTML5的APIs结合，如Web Storage或IndexedDB，实现简单的数据存储，即使在无后台的情况下也能保存用户的偏好设置或购物车信息。【文件名称列表】："Zp_demo.demohuo.top_161"可能是压缩包的主文件名，暗示这是一个演示版本，可能包含了HTML、CSS、JavaScript等文件，以及可能的图像和其他资源文件，用于展示模板的完整功能。总结来说，这个“html5简洁响应式美食菜单定价网站模板”是一个无需后端服务器支持的网页模板，利用HTML5、CSS3和JavaScript技术，提供适应各种设备的美食菜单展示。它适合那些希望快速搭建在线菜单展示的餐厅或美食博主，但可能需要一定的技术知识来进行内容管理和更新。

资源推荐

资源详情

资源评论

收起资源包目录

Zp_demo.demohuo.top_161.rar （54个子文件）

Zp_demo.demohuo.top_161

index.html 13KB

static

css

templatemo-style.css 13KB

css1.css 2KB

css.css 5KB

all.min.css 56KB

picture

01.jpg 32KB

05.jpg 32KB

about-05.jpg 202KB

07.jpg 33KB

img-01.jpg 15KB

04.jpg 28KB

about-01.jpg 11KB

about-03.jpg 15KB

08.jpg 16KB

simple-house-01.jpg 244KB

about-06.jpg 44KB

about-04.jpg 10KB

03.jpg 24KB

06.jpg 24KB

02.jpg 37KB

about-02.jpg 11KB

simple-house-logo.png 379B

jquery.min.js 94KB

parallax.min.js 7KB

font

fa-solid-900.woff2 74KB

fa-brands-400.woff2 74KB

fa-brands-400.woff 86KB

memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2 44KB

memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2 17KB

fa-brands-400.eot 128KB

memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2 7KB

memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2 20KB

fa-regular-400.woff2 13KB

fa-solid-900.eot 188KB

fa-regular-400.ttf 33KB

memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2 31KB

memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2 10KB

fa-regular-400.eot 34KB

memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2 7KB

memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2 9KB

memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2 4KB

memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2 13KB

memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2 14KB

memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2 16KB

fa-solid-900.ttf 188KB

fa-brands-400.ttf 128KB

memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2 48KB

fa-regular-400.woff 16KB

memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2 16KB

memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2 4KB

fa-solid-900.woff 96KB

memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2 24KB

about.html 8KB

contact.html 7KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Home</title> <link href="static/css/css1.css" rel="stylesheet"> <link href="static/css/templatemo-style.css" rel="stylesheet"> </head> <body> <div class="container">   <div class="placeholder"> <div class="parallax-window" data-parallax="scroll" data-image-src="static/picture/simple-house-01.jpg"> <div class="tm-header"> <div class="row tm-header-inner"> <div class="col-md-6 col-12"> <img src="static/picture/simple-house-logo.png" alt="Logo" class="tm-site-logo"> <div class="tm-site-text-box"> <h1 class="tm-site-title">Simple House</h1> <h6 class="tm-site-description">new restaurant template</h6> </div> </div> <nav class="col-md-6 col-12 tm-nav"> <ul class="tm-nav-ul"> <li class="tm-nav-li"><a href="" class="tm-nav-link active">Home</a></li> <li class="tm-nav-li"><a href="about.html" class="tm-nav-link">About</a></li> <li class="tm-nav-li"><a href="contact.html" class="tm-nav-link">Contact</a></li> </ul> </nav> </div> </div> </div> </div> <main> <header class="row tm-welcome-section"> <h2 class="col-12 text-center tm-section-title">Welcome to Simple House</h2> <p class="col-12 text-center">Total 3 HTML pages are included in this template. Header image has a parallax effect. You can feel free to download, edit and use this TemplateMo layout for your commercial or non-commercial websites.</p> </header> <div class="tm-paging-links"> <nav> <ul> <li class="tm-paging-item"><a href="#" class="tm-paging-link active">Pizza</a></li> <li class="tm-paging-item"><a href="#" class="tm-paging-link">Salad</a></li> <li class="tm-paging-item"><a href="#" class="tm-paging-link">Noodle</a></li> </ul> </nav> </div>  <div class="row tm-gallery">  <div id="tm-gallery-page-pizza" class="tm-gallery-page"> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/01.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Fusce dictum finibus</h4> <p class="tm-gallery-description">Nam in suscipit nisi, sit amet consectetur metus. Ut sit amet tellus accumsan</p> <p class="tm-gallery-price">$45 / $55</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/02.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Aliquam sagittis</h4> <p class="tm-gallery-description">Nam in suscipit nisi, sit amet consectetur metus. Ut sit amet tellus accumsan</p> <p class="tm-gallery-price">$65 / $70</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/03.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Sed varius turpis</h4> <p class="tm-gallery-description">Nam in suscipit nisi, sit amet consectetur metus. Ut sit amet tellus accumsan</p> <p class="tm-gallery-price">$30.50</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/04.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Aliquam sagittis</h4> <p class="tm-gallery-description">Nam in suscipit nisi, sit amet consectetur metus. Ut sit amet tellus accumsan</p> <p class="tm-gallery-price">$25.50</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/05.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Maecenas eget justo</h4> <p class="tm-gallery-description">Nam in suscipit nisi, sit amet consectetur metus. Ut sit amet tellus accumsan</p> <p class="tm-gallery-price">$80.25</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/06.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Quisque et felis eros</h4> <p class="tm-gallery-description">Nam in suscipit nisi, sit amet consectetur metus. Ut sit amet tellus accumsan</p> <p class="tm-gallery-price">$20 / $40 / $60</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/07.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Sed ultricies dui</h4> <p class="tm-gallery-description">Nam in suscipit nisi, sit amet consectetur metus. Ut sit amet tellus accumsan</p> <p class="tm-gallery-price">$94</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/08.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Donec porta consequat</h4> <p class="tm-gallery-description">Nam in suscipit nisi, sit amet consectetur metus. Ut sit amet tellus accumsan</p> <p class="tm-gallery-price">$15</p> </figcaption> </figure> </article> </div>   <div id="tm-gallery-page-salad" class="tm-gallery-page hidden"> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/04.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Salad Menu One</h4> <p class="tm-gallery-description">Proin eu velit egestas, viverra sapien eget, consequat nunc. Vestibulum tristique</p> <p class="tm-gallery-price">$25</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/03.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Second Title Salad</h4> <p class="tm-gallery-description">Proin eu velit egestas, viverra sapien eget, consequat nunc. Vestibulum tristique</p> <p class="tm-gallery-price">$30</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/05.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Third Salad Item</h4> <p class="tm-gallery-description">Proin eu velit egestas, viverra sapien eget, consequat nunc. Vestibulum tristique</p> <p class="tm-gallery-price">$45</p> </figcaption> </figure> </article> <article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item"> <figure> <img src="static/picture/01.jpg" alt="Image" class="img-fluid tm-gallery-img"> <figcaption> <h4 class="tm-gallery-title">Superior Salad</h4> <p class="tm-gallery-description">Proin eu velit egestas, viverra sapien eget, consequat nunc. Vestibulum tristique</p>

评论收藏

内容反馈

版权申诉