基于HTML(甜品奶茶店)餐饮美食项目的设计与实现（html前端源码和论文设计）
【摘要】 👨🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对...
👨🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
🎀 精彩专栏推荐👇🏻👇🏻👇🏻
🧡 【作者主页——🔥获取更多优质源码】
🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
@TOC
一、网站题目👨🎓
🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。
二、网站描述✍️
🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。
三、网站介绍📚
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、网站效果🌐
五、代码实现 🪓
HTML结构代码🧱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Foodily HTML-5 Template | Homepage 01</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="hidden-bar-wrapper">
<div class="page-wrapper">
<!-- Preloader -->
<div class="preloader"></div>
<!-- Main Header-->
<header class="main-header header-style-one">
<!-- Header Upper -->
<div class="header-upper">
<div class="auto-container clearfix">
<div class="pull-left logo-box">
<div class="logo"><a href="index.html"><img src="images/logo.png" alt="" title=""></a></div>
</div>
<div class="nav-outer clearfix">
<!--Mobile Navigation Toggler-->
<div class="mobile-nav-toggler"><span class="icon flaticon-menu"></span></div>
<!-- Main Menu -->
<nav class="main-menu navbar-expand-md">
<div class="navbar-header">
<!-- Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li class="current dropdown"><a href="#">Home</a>
<ul>
<li><a href="index.html">Homepage One</a></li>
<li><a href="index-2.html">Homepage Two</a></li>
<li><a href="index-3.html">Homepage Three</a></li>
<li><a href="index-4.html">Homepage Four</a></li>
<li class="dropdown"><a href="#">Header Styles</a>
<ul>
<li><a href="index.html">Header Style One</a></li>
<li><a href="index-2.html">Header Style Two</a></li>
<li><a href="index-3.html">Header Style Three</a></li>
<li><a href="index-3.html">Header Style Four</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">About</a>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="restaurant.html">Restaurant</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Menu</a>
<ul>
<li><a href="menu.html">Menu</a></li>
<li><a href="milkshake.html">Milk Shake</a></li>
<li><a href="frappe.html">Frappe</a></li>
<li><a href="boba-tea.html">Boba Tea</a></li>
<li><a href="slushy.html">Slushy</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Gallery</a>
<ul>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="gallery-2.html">Gallery 02</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Blog</a>
<ul>
<li><a href="blog-classic.html">Blog Classic</a></li>
<li><a href="news-detail.html">Blog Single</a></li>
<li><a href="news-detail-2.html">Blog Single 02</a></li>
<li><a href="not-found.html">Not Found</a></li>
</ul>
</li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
</nav>
<!-- Main Menu End-->
<div class="outer-box clearfix">
<!-- Search Btn -->
<div class="search-box-btn search-box-outer"><span class="icon fa fa-search"></span></div>
<!-- Nav Btn -->
<div class="nav-btn navSidebar-button"><span class="icon flaticon-menu-2"></span></div>
</div>
</div>
</div>
</div>
<!--End Header Upper-->
<!-- Sticky Header -->
<div class="sticky-header">
<div class="auto-container clearfix">
<!--Logo-->
<div class="logo pull-left">
<a href="index.html" title=""><img src="images/logo-small.png" alt="" title=""></a>
</div>
<!--Right Col-->
<div class="pull-right">
<!-- Main Menu -->
<nav class="main-menu">
<!--Keep This Empty / Menu will come through Javascript-->
</nav><!-- Main Menu End-->
<!-- Main Menu End-->
<div class="outer-box clearfix">
<!-- Search Btn -->
<div class="search-box-btn search-box-outer"><span class="icon fa fa-search"></span></div>
<!-- Nav Btn -->
<div class="nav-btn navSidebar-button"><span class="icon flaticon-menu-2"></span></div>
</div>
</div>
</div>
</div><!-- End Sticky Menu -->
<!-- Mobile Menu -->
<div class="mobile-menu">
<div class="menu-backdrop"></div>
<div class="close-btn"><span class="icon flaticon-multiply"></span></div>
<nav class="menu-box">
<div class="nav-logo"><a href="index.html"><img src="images/logo-2.png" alt="" title=""></a></div>
<div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
</nav>
</div><!-- End Mobile Menu -->
</header>
<!-- End Main Header -->
<!-- Sidebar Cart Item -->
<div class="xs-sidebar-group info-group">
<div class="xs-overlay xs-bg-black"></div>
<div class="xs-sidebar-widget">
<div class="sidebar-widget-container">
<div class="widget-heading">
<a href="#" class="close-side-widget">
X
</a>
</div>
<div class="sidebar-textwidget">
<!-- Sidebar Info Content -->
<div class="sidebar-info-contents">
<div class="content-inner">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="" /></a>
</div>
<div class="content-box">
<h2>About Us</h2>
<p class="text">The argument in favor of using filler text goes something like this: If you use real content in the Consulting Process, anytime you reach a review point you’ll end up reviewing and negotiating the content itself and not the design.</p>
<a href="contact.html" class="theme-btn btn-style-one clearfix"><span class="icon"></span>Consultation</a>
</div>
<div class="contact-info">
<h2>Contact Info</h2>
<ul class="list-style-one">
<li><span class="icon fa fa-location-arrow"></span>Chicago 12, Melborne City, USA</li>
<li><span class="icon fa fa-phone"></span>(111) 111-111-1111</li>
<li><span class="icon fa fa-envelope"></span>foodily@gmail.com</li>
<li><span class="icon fa fa-clock-o"></span>Week Days: 09.00 to 18.00 Sunday: Closed</li>
</ul>
</div>
<!-- Social Box -->
<ul class="social-box">
<li class="facebook"><a href="#" class="fa fa-facebook-f"></a></li>
<li class="twitter"><a href="#" class="fa fa-twitter"></a></li>
<li class="linkedin"><a href="#" class="fa fa-linkedin"></a></li>
<li class="instagram"><a href="#" class="fa fa-instagram"></a></li>
<li class="youtube"><a href="#" class="fa fa-youtube"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END sidebar widget item -->
<!-- Banner Section -->
<section class="banner-section">
<div class="pattern-layer" style="background-image: url(images/main-slider/pattern-1.png)"></div>
<div class="main-slider-carousel owl-carousel owl-theme">
<!-- Slide -->
<div class="slide">
<div class="icon-layer-one" style="background-image: url(images/main-slider/icon-1.png)"></div>
<div class="icon-layer-two" style="background-image: url(images/main-slider/icon-2.png)"></div>
</body>
</html>
CSS样式代码💒
.main-header{
position:absolute;
left:0px;
top:0px;
z-index:99;
width:100%;
padding-top:15px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
.main-header .main-box{
position:relative;
padding:0px 0px;
left:0px;
top:0px;
width:100%;
background:none;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
}
.main-header .main-box .outer-container{
position:relative;
padding:0px 40px;
}
.main-header .main-box .logo-box{
position:relative;
float:left;
left:0px;
z-index:10;
padding:30px 0px;
}
.main-header .main-box .logo-box .logo img{
display:inline-block;
max-width:100%;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
}
.main-header .header-upper{
position:relative;
}
.main-header .header-upper .upper-right{
position:relative;
padding-top:22px;
}
.main-header .header-upper .inner-container{
position:relative;
}
.main-header .nav-outer{
position:relative;
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
!
💂【获取方式】
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）