绿色响应式西餐厅企业网站模板_绿色响应式西餐西餐厅餐厅企业宽屏bootstrap整站手机餐饮.rar资源-CSDN文库

共34个文件

jpg：11个

html：7个

png：5个

版权申诉

132 浏览量 2021-11-06 12:57:56 上传评论收藏 685KB RAR 举报

该资源是一个用于构建西餐厅企业网站的绿色响应式模板，主要特点包括绿色设计、响应式布局、适应多种设备以及基于Bootstrap框架。以下是关于这个模板及其相关技术的详细知识点： 1. **响应式设计**：响应式网站设计是现代网页设计的关键特征，允许网站在不同设备（如桌面、平板电脑和手机）上自适应显示，提供一致且优化的用户体验。通过使用媒体查询、流式布局和可调整的图片大小等技术，响应式设计确保了网站在任何屏幕尺寸下都能保持良好的视觉效果。 2. **绿色主题**：模板采用绿色为主色调，这通常给人一种清新、自然的感觉，与西餐厅的环境和氛围相吻合。绿色在视觉上也容易引起舒适感，有助于提升用户对网站的满意度。 3. **Bootstrap框架**：Bootstrap是目前最流行的前端开发框架，它提供了丰富的预设样式、组件和JavaScript插件，大大简化了网页开发过程。Bootstrap的网格系统使得创建响应式布局变得简单，同时，其内置的工具如导航栏、模态框和下拉菜单等，可以快速构建功能齐全的页面。 4. **宽屏设计**：随着大屏幕设备的普及，宽屏设计成为一种趋势，它能充分利用屏幕空间，展示更多的内容，增强视觉冲击力。在西餐厅企业网站中，宽屏设计可以更好地展示菜品图片和餐厅环境，吸引潜在顾客。 5. **餐饮行业特性**：此模板特别针对餐饮行业设计，可能包含菜单展示、预约预订、特色菜品介绍、餐厅环境展示等功能模块，旨在突出餐厅的特色和提供便捷的在线服务。 6. **手机优化**：考虑到许多用户可能通过移动设备访问网站，模板必须确保在手机上的良好表现。这包括清晰的字体、易于点击的按钮和适应小屏幕的布局，以提高移动用户体验。 7. **整站模板**：这意味着这个压缩包包含了网站所有页面的HTML、CSS和JavaScript文件，以及可能的图片和其他资源，可以直接应用于网站项目，减少了从头开始设计和开发的工作量。 8. **HTML与CSS**：HTML（超文本标记语言）是网站的基础结构，而CSS（层叠样式表）负责样式和布局。这个模板已经预设了这些元素，设计师或开发者可以根据需求进行修改和定制。 9. **JavaScript和jQuery**：模板可能还包含使用JavaScript和jQuery实现的交互效果，如滑动展示、轮播图等，提升了网站的动态性和用户体验。这个绿色响应式西餐厅企业网站模板集成了现代网页设计的最佳实践，为创建一个专业且吸引人的餐饮业在线平台提供了便捷的起点。无论是初学者还是有经验的开发者，都可以利用这个模板快速搭建出功能完善的网站。

资源推荐

资源详情

资源评论

收起资源包目录

绿色响应式西餐厅企业网站模板_绿色响应式西餐西餐厅餐厅企业宽屏 bootstrap 整站手机餐饮.rar （34个子文件）

绿色响应式西餐厅企业网站模板_绿色响应式西餐西餐厅餐厅企业宽屏 bootstrap 整站手机餐饮

ctps_362_pa

typo.html 18KB

menu.html 7KB

bootstrap.js 66KB

responsiveslides.min.js 3KB

jquery-1.11.1.min.js 94KB

jquery.flexisel.js 8KB

css

style.css 44KB

bootstrap.css 138KB

index.html 14KB

contact.html 6KB

about.html 10KB

single.html 11KB

images

co.png 2KB

2.jpg 23KB

6.jpg 35KB

banner.jpg 65KB

1.jpg 36KB

sp.png 4KB

1.png 3KB

5.jpg 36KB

banner1.jpg 44KB

8.jpg 63KB

update.png 443B

3.jpg 31KB

7.jpg 43KB

banner2.jpg 61KB

2.png 3KB

4.jpg 27KB

blog.html 10KB

fonts

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.woff2 18KB

<!DOCTYPE html> <html> <head> <title>Typo</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Pasta Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>  <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />  <script src="js/jquery-1.11.1.min.js"></script>   <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1000); }); }); </script>  <link href='#css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'> </head> <body>  <div class="header"> <div class="container"> <div class="header-nav"> <nav class="navbar navbar-default">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><i class="glyphicon glyphicon-cutlery" aria-hidden="true"></i><span>P</span>asta</a> </div>  <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="hvr-bounce-to-bottom"><a href="index.html">Home</a></li> <li class="hvr-bounce-to-bottom"><a href="about.html">About</a></li> <li class="hvr-bounce-to-bottom"><a href="menu.html">Menu</a></li> <li class="hvr-bounce-to-bottom active"><a href="typo.html">Typo</a></li> <li class="hvr-bounce-to-bottom"><a href="blog.html">Blog</a></li> <li class="hvr-bounce-to-bottom"><a href="contact.html">Contact Us</a></li> </ul> </div> </nav> </div> </div> </div>   <div class="typo"> <div class="container"> <div class="headdings"> <h3 class="ghj">Headings</h3> <div class="bs-example"> <table class="table"> <tbody> <tr> <td><h1 id="h1.-bootstrap-heading">h1. Bootstrap heading<a class="anchorjs-link" href="#h1.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h1></td> <td class="type-info">Semibold 36px</td> </tr> <tr> <td><h2 id="h2.-bootstrap-heading">h2. Bootstrap heading<a class="anchorjs-link" href="#h2.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h2></td> <td class="type-info">Semibold 30px</td> </tr> <tr> <td><h3 id="h3.-bootstrap-heading">h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td> <td class="type-info">Semibold 24px</td> </tr> <tr> <td><h4 id="h4.-bootstrap-heading">h4. Bootstrap heading<a class="anchorjs-link" href="#h4.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h4></td> <td class="type-info">Semibold 18px</td> </tr> <tr> <td><h5 id="h5.-bootstrap-heading">h5. Bootstrap heading<a class="anchorjs-link" href="#h5.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h5></td> <td class="type-info">Semibold 14px</td> </tr> <tr> <td><h6>h6. Bootstrap heading</h6></td> <td class="type-info">Semibold 12px</td> </tr> </tbody> </table> </div> </div> <div class="Buttons"> <h3 class="ghj">Buttons</h3> <h1> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h1> <h2> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h2> <h3> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h3> <h4> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h4> <h5> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h5> <h6> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h6> </div> <div class="progress-bars"> <h3 class="ghj">Progress Bars</h3> <div class="tab-content"> <div class="tab-pane active" id="domprogress"> <div class="progress"> <div class="progress-bar progress-bar-primary" style="width: 20%"></div> </div> <p>Info with <code>progress-bar-info</code> class.</p> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 60%"></div> </div> <p>Success with <code>progress-bar-success</code> class.</p> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 30%"></div> </div>

评论收藏

内容反馈

版权申诉