目录
一、前言
高端大气甜品奶茶店网页，应用html+css+js，自适应响应式网页，图片轮翻、多级菜单导航、搜索等，该案例模板适用于高端餐饮、奶茶店、大学生网页课程作业设计，供大家参考。
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.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">
<link href="css/responsive.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Niconne&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</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>
<div class="auto-container">
<div class="row clearfix">
<!-- Content Column -->
<div class="content-column col-lg-6 col-md-12 col-sm-12">
<div class="inner-column">
<h1><span class="first-letter">Heathly</span><span class="second-letter">Smoothie</span></h1>
<div class="text">Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
<div class="btns-box">
<a href="menu.html" class="theme-btn btn-style-one clearfix"><span class="icon"></span>Buy Now</a>
</div>
<div class="icons-box">
<img src="images/main-slider/icons.png" alt="" />
</div>
</div>
</div>
<!-- Image Column -->
<div class="image-column col-lg-6 col-md-12 col-sm-12">
<div class="inner-column">
<div class="icon-layer-three" style="background-image: url(images/main-slider/icon-3.png)"></div>
<div class="image">
<img src="images/main-slider/content-image-1.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 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-6.png)"></div>
<div class="auto-container">
<div class="row clearfix">
<!-- Content Column -->
<div class="content-column col-lg-6 col-md-12 col-sm-12">
<div class="inner-column">
<h1><span class="first-letter">Heathly</span><span class="second-letter">Smoothie</span></h1>
<div class="text">Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
<div class="btns-box">
<a href="menu.html" class="theme-btn btn-style-one clearfix"><span class="icon"></span>Buy Now</a>
</div>
<div class="icons-box">
<img src="images/main-slider/icons.png" alt="" />
</div>
</div>
</div>
<!-- Image Column -->
<div class="image-column col-lg-6 col-md-12 col-sm-12">
<div class="inner-column">
<div class="icon-layer-three" style="background-image: url(images/main-slider/icon-3.png)"></div>
<div class="image">
<img src="images/main-slider/content-image-2.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="slide style-two">
<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-7.png)"></div>
<div class="auto-container">
<div class="row clearfix">
<!-- Content Column -->
<div class="content-column col-lg-6 col-md-12 col-sm-12">
<div class="inner-column">
<h1><span class="first-letter">Heathly</span><span class="second-letter">Smoothie</span></h1>
<div class="text">Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
<div class="btns-box">
<a href="menu.html" class="theme-btn btn-style-one clearfix"><span class="icon"></span>Buy Now</a>
</div>
<div class="icons-box">
<img src="images/main-slider/icons.png" alt="" />
</div>
</div>
</div>
<!-- Image Column -->
<div class="image-column col-lg-6 col-md-12 col-sm-12">
<div class="inner-column">
<div class="icon-layer-three" style="background-image: url(images/main-slider/icon-3.png)"></div>
<div class="image">
<img src="images/main-slider/content-image-3.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Banner Section -->
<!-- Juice Section -->
<section class="juice-section">
<div class="section-text">yummy</div>
<div class="pattern-layer" style="background-image: url(images/background/1.png)"></div>
<div class="pattern-layer-two" style="background-image: url(images/resource/juice-glass.png)"></div>
<div class="auto-container">
<div class="row clearfix">
<!-- Image Column -->
<div class="image-column col-lg-7 col-md-12 col-sm-12">
<div class="inner-column">
<div class="image">
<img src="images/resource/juice.png" alt="" />
</div>
</div>
</div>
<!-- Content Column -->
<div class="content-column col-lg-5 col-md-12 col-sm-12">
<div class="inner-column">
<!-- Sec Title -->
<div class="sec-title">
<div class="title">Drink for Health</div>
<h2>Fresh Fruit <span class="theme_color">Juices</span></h2>
<div class="separate"></div>
<div class="text">Us percipit urbanitas referrentur ea. Mei at numquam molestiae intellegam. Ansed dictas accumsan. Nam sint atqui voluptatibus an, pro ne malis semper perpetua. Nam sint atqui voluptatibus an, pro ne malis semper perpetua.</div>
</div>
<a href="menu.html" class="theme-btn btn-style-two clearfix"><span class="icon"></span>Buy Now</a>
</div>
</div>
</div>
</div>
</section>
<!-- End Juice Section -->
<!-- Beverage Section -->
<section class="beverage-section">
<div class="icon-layer" style="background-image: url(images/resource/beverage.png)"></div>
<div class="auto-container">
<!-- Sec Title -->
<div class="sec-title centered">
<div class="title">Best for You</div>
<h2>Our Beverage</h2>
<div class="separate"></div>
</div>
<div class="row clearfix">
<!-- Beverage Column -->
<div class="beverage-block col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<a href="milkshake.html"><img src="images/resource/beverage-1.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h6><a href="milkshake.html">Milkshake</a></h6>
<div class="products">3 products</div>
</div>
</div>
</div>
<!-- Beverage Column -->
<div class="beverage-block col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<a href="milkshake.html"><img src="images/resource/beverage-2.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h6><a href="milkshake.html">Frappe</a></h6>
<div class="products">3 products</div>
</div>
</div>
</div>
<!-- Beverage Column -->
<div class="beverage-block col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<a href="milkshake.html"><img src="images/resource/beverage-3.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h6><a href="milkshake.html">Boba Drinks</a></h6>
<div class="products">3 products</div>
</div>
</div>
</div>
<!-- Beverage Column -->
<div class="beverage-block col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<a href="milkshake.html"><img src="images/resource/beverage-4.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h6><a href="milkshake.html">Mojito</a></h6>
<div class="products">3 products</div>
</div>
</div>
</div>
<!-- Beverage Column -->
<div class="beverage-block col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<a href="milkshake.html"><img src="images/resource/beverage-5.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h6><a href="milkshake.html">Slushy</a></h6>
<div class="products">3 products</div>
</div>
</div>
</div>
<!-- Beverage Column -->
<div class="beverage-block col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<a href="milkshake.html"><img src="images/resource/beverage-6.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h6><a href="milkshake.html">Hot Chocolate</a></h6>
<div class="products">3 products</div>
</div>
</div>
</div>
<!-- Beverage Column -->
<div class="beverage-block col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<a href="milkshake.html"><img src="images/resource/beverage-7.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h6><a href="milkshake.html">smoothie</a></h6>
<div class="products">3 products</div>
</div>
</div>
</div>
<!-- Beverage Column -->
<div class="beverage-block col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<a href="milkshake.html"><img src="images/resource/beverage-8.jpg" alt="" /></a>
</div>
<div class="lower-content">
<h6><a href="milkshake.html">coffee</a></h6>
<div class="products">3 products</div>
</div>
</div>
</div>
</div>
<!-- Button Box -->
<div class="button-box text-center">
<a href="menu.html" class="theme-btn btn-style-two clearfix"><span class="icon"></span>View All Products</a>
</div>
</div>
</section>
<!-- End Beverage Section -->
<!-- Deal Section -->
<section class="deal-section" style="background-image: url(images/background/2.jpg)">
<div class="top-pattern-layer" style="background-image: url(images/background/pattern-1.png)"></div>
<div class="bottom-pattern-layer" style="background-image: url(images/background/pattern-2.png)"></div>
<div class="auto-container">
<div class="content-box" style="background-image: url(images/resource/deal.png)">
<div class="box-inner">
<!-- Sec Title -->
<div class="sec-title light centered">
<div class="title">30% Off For juice</div>
<h2>Big Deals of the Week</h2>
<div class="text">Us percipit urbanitas referrentur ea. Mei at numquam molestiae <br> intellegam. Ansed dictas accumsan. </div>
</div>
<!-- Email Form -->
<div class="email-form">
<div class="email-title">To Get New Of Our Deals</div>
<form method="post" action="contact.html">
<div class="form-group">
<input type="email" name="email" value="" placeholder="type your email" required>
<button type="submit" class="submit-btn"><span class="icon flaticon-send"></span></button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- End Deal Section -->
<!-- Recipe Section -->
<section class="recipe-section">
<div class="section-text">yummy</div>
<div class="icon-layer-one" style="background-image: url(images/icons/icon-1.png)"></div>
<div class="icon-layer-two" style="background-image: url(images/icons/icon-2.png)"></div>
<div class="icon-layer-three" style="background-image: url(images/icons/icon-3.png)"></div>
<div class="auto-container">
<!-- Sec Title -->
<div class="sec-title centered">
<div class="title">Best for You</div>
<h2>Detox Smoothie Recipe</h2>
<div class="separate"></div>
</div>
<div class="inner-container">
<div class="circle-layer" style="background-image: url(images/icons/circles.png)"></div>
<div class="row clearfix">
<!-- Left Column -->
<div class="left-column col-lg-5 col-md-6 col-sm-12">
<div class="inner-column">
<!-- Recipe Block -->
<div class="recipe-block">
<div class="inner-box">
<div class="icon"><img src="images/resource/recipe-1.png" alt="" /></div>
<h6><a href="menu.html">Cucumber</a></h6>
<div class="text">Us percipit urbanitas referrentur ea. Mei at numquam molestiae</div>
</div>
</div>
<!-- Recipe Block -->
<div class="recipe-block">
<div class="inner-box">
<div class="icon"><img src="images/resource/recipe-2.png" alt="" /></div>
<h6><a href="menu.html">Apple</a></h6>
<div class="text">Us percipit urbanitas referrentur ea. Mei at numquam molestiae</div>
</div>
</div>
</div>
</div>
<!-- Image Column -->
<div class="image-column col-lg-2 col-md-12 col-sm-12">
<div class="inner-column">
<div class="image">
<img src="images/resource/recipe.png" alt="" />
</div>
</div>
</div>
<!-- Right Column -->
<div class="right-column col-lg-5 col-md-6 col-sm-12">
<div class="inner-column">
<!-- Recipe Block / Style Two -->
<div class="recipe-block style-two">
<div class="inner-box">
<div class="icon"><img src="images/resource/recipe-3.png" alt="" /></div>
<h6><a href="menu.html">Lemon</a></h6>
<div class="text">Us percipit urbanitas referrentur ea. Mei at numquam molestiae</div>
</div>
</div>
<!-- Recipe Block / Style Two -->
<div class="recipe-block style-two">
<div class="inner-box">
<div class="icon"><img src="images/resource/recipe-4.png" alt="" /></div>
<h6><a href="menu.html">Fresh Water</a></h6>
<div class="text">Us percipit urbanitas referrentur ea. Mei at numquam molestiae</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Recipe Section -->
<!-- Fluid Section One -->
<section class="fluid-section-one">
<div class="outer-container clearfix">
<!-- Content Column -->
<div class="content-column">
<div class="icon-box" style="background-image:url(images/icons/icon-4.png)"></div>
<div class="inner-column">
<!-- Sec Title -->
<div class="sec-title">
<h2>Upcoming Our <br> Beverage</h2>
<div class="separate"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<!-- Button Box -->
<div class="button-box">
<a href="menu.html" class="theme-btn btn-style-two clearfix"><span class="icon"></span>All Product</a>
</div>
</div>
</div>
<!-- Image Column -->
<div class="image-column" style="background-image:url(images/resource/image-1.jpg)">
<figure class="image-box"><img src="images/resource/image-1.jpg" alt=""></figure>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section class="testimonial-section">
<div class="icon-layer-one" style="background-image: url(images/icons/icon-1.png)"></div>
<div class="icon-layer-two" style="background-image: url(images/icons/icon-2.png)"></div>
<div class="icon-layer-three" style="background-image: url(images/icons/icon-3.png)"></div>
<div class="pattern-layer" style="background-image: url(images/background/pattern-4.png)"></div>
<div class="auto-container">
<!-- Sec Title -->
<div class="sec-title centered">
<div class="title">Testimonial</div>
<h2>What People Say</h2>
<div class="separate"></div>
</div>
<div class="inner-container">
<div class="single-item-carousel owl-carousel owl-theme">
<!-- Testimonial Block -->
<div class="testimonial-block">
<div class="inner-box">
<div class="author-image">
<img src="images/resource/author-1.jpg" alt="" />
</div>
<div class="text">“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <br> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br> ullamco.”</div>
<div class="designation">Meredith Grant <span>- Host Mother</span></div>
</div>
</div>
<!-- Testimonial Block -->
<div class="testimonial-block">
<div class="inner-box">
<div class="author-image">
<img src="images/resource/author-1.jpg" alt="" />
</div>
<div class="text">“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <br> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br> ullamco.”</div>
<div class="designation">Meredith Grant <span>- Host Mother</span></div>
</div>
</div>
<!-- Testimonial Block -->
<div class="testimonial-block">
<div class="inner-box">
<div class="author-image">
<img src="images/resource/author-1.jpg" alt="" />
</div>
<div class="text">“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <br> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br> ullamco.”</div>
<div class="designation">Meredith Grant <span>- Host Mother</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Testimonial Section -->
<!-- News Section -->
<section class="news-section">
<div class="pattern-layer" style="background-image: url(images/background/pattern-5.png)"></div>
<div class="auto-container">
<!-- Sec Title -->
<div class="sec-title centered">
<div class="title">News & Recipe</div>
<h2>Our Fruitsome Blog</h2>
<div class="separate"></div>
<div class="text">Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, <br> vel scelerisque nisl consectetur et.</div>
</div>
<div class="row clearfix">
<!-- News Block -->
<div class="news-block col-lg-4 col-md-6 col-sm-12">
<div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
<div class="image">
<img src="images/resource/news-1.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/resource/news-1.jpg" data-fancybox="news" data-caption="" class="icon flaticon-gallery"></a>
</div>
</div>
</div>
</div>
<div class="lower-content">
<div class="category">smoothie</div>
<h6><a href="news-detail.html">Broad bean and goats’ cheese bruschetta</a></h6>
<ul class="post-info">
<li>May 21, 2021</li>
<li>2 Comments</li>
<li><a href="news-detail.html">Share</a></li>
</ul>
</div>
</div>
</div>
<!-- News Block -->
<div class="news-block col-lg-4 col-md-6 col-sm-12">
<div class="inner-box wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
<div class="image">
<img src="images/resource/news-2.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/resource/news-2.jpg" data-fancybox="news" data-caption="" class="icon flaticon-gallery"></a>
</div>
</div>
</div>
</div>
<div class="lower-content">
<div class="category">smoothie</div>
<h6><a href="news-detail.html">Broad bean and goats’ cheese bruschetta</a></h6>
<ul class="post-info">
<li>May 21, 2021</li>
<li>2 Comments</li>
<li><a href="news-detail.html">Share</a></li>
</ul>
</div>
</div>
</div>
<!-- News Block -->
<div class="news-block col-lg-4 col-md-6 col-sm-12">
<div class="inner-box wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms">
<div class="image">
<img src="images/resource/news-3.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/resource/news-3.jpg" data-fancybox="news" data-caption="" class="icon flaticon-gallery"></a>
</div>
</div>
</div>
</div>
<div class="lower-content">
<div class="category">smoothie</div>
<h6><a href="news-detail.html">Broad bean and goats’ cheese bruschetta</a></h6>
<ul class="post-info">
<li>May 21, 2021</li>
<li>2 Comments</li>
<li><a href="news-detail.html">Share</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End News Section -->
<!-- Gallery Section -->
<section class="gallery-section">
<div class="outer-container">
<div class="gallery-carousel owl-carousel owl-theme">
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/1.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/1.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/2.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/2.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/3.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/3.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/4.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/4.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/5.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/5.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/1.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/1.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/2.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/2.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/3.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/3.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/4.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/4.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- Gallery Block -->
<div class="gallery-block">
<div class="inner-box">
<figure class="image-box">
<img src="images/gallery/5.jpg" alt="">
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<a href="images/gallery/5.jpg" data-fancybox="gallery" data-caption="" class="icon flaticon-plus"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
</section>
<!-- End Gallery Section -->
<!-- Main Footer -->
<footer class="main-footer">
<div class="pattern-layer-one" style="background-image: url(images/resource/footer-pattern-1.png)"></div>
<div class="pattern-layer-two" style="background-image: url(images/resource/footer-pattern-2.png)"></div>
<div class="pattern-layer-three" style="background-image: url(images/background/pattern-6.png)"></div>
<div class="auto-container">
<!-- Widgets Section -->
<div class="widgets-section">
<div class="row clearfix">
<!-- Big Column -->
<div class="big-column col-lg-6 col-md-12 col-sm-12">
<div class="row clearfix">
<!--Footer Column-->
<div class="footer-column col-lg-6 col-md-6 col-sm-12">
<div class="footer-widget contact-widget">
<h6>Contact Us</h6>
<div class="text">6Fifth Avenue 5501, Broadway, New York Morris Street London 1234</div>
<ul class="contact-list">
<li><span class="icon fa fa-send"></span>Your mail @ gmail.com</li>
<li><span class="icon fa fa-phone"></span><a href="tel:+123-4567-89000">(123) 4567 89000</a></li>
</ul>
</div>
</div>
<!--Footer Column-->
<div class="footer-column col-lg-6 col-md-6 col-sm-12">
<div class="footer-widget links-widget">
<h6>Useful Links</h6>
<ul class="footer-list">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Terms Of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Big Column -->
<div class="big-column col-lg-6 col-md-12 col-sm-12">
<div class="row clearfix">
<!--Footer Column-->
<div class="footer-column col-lg-6 col-md-6 col-sm-12">
<div class="footer-widget social-widget">
<h6>Follow Us Now</h6>
<ul class="social-list">
<li><a href="#"><span class="icon fa fa-facebook"></span>facebook</a></li>
<li><a href="#"><span class="icon fa fa-twitter"></span>twitter</a></li>
<li><a href="#"><span class="icon fa fa-instagram"></span>instagram</a></li>
<li><a href="#"><span class="icon fa fa-dribbble"></span>dribbble</a></li>
</ul>
</div>
</div>
<!-- Footer Column -->
<div class="footer-column col-lg-6 col-md-6 col-sm-12">
<div class="footer-widget newsletter-widget">
<h6>Subscribe</h6>
<div class="newsletter-form">
<form method="post" action="contact.html">
<div class="form-group">
<input type="email" name="email" value="" placeholder="Your Email" required="">
<button type="submit" class="theme-btn submit-btn">Subscribe Now</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="copyright">© 2021 foodily All Rights Reserved.</div>
</div>
</div>
</footer>
</div>
<!--End pagewrapper-->
<!-- Search Popup -->
<div class="search-popup">
<button class="close-search style-two"><span class="flaticon-multiply"></span></button>
<button class="close-search"><span class="flaticon-up-arrow-1"></span></button>
<form method="post" action="blog.html">
<div class="form-group">
<input type="search" name="search-field" value="" placeholder="Search Here" required="">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
<!-- End Header Search -->
<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target="html"><span class="fa fa-arrow-up"></span></div>
<script src="js/jquery.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/appear.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/tilt.jquery.min.js"></script>
<script src="js/jquery.paroller.min.js"></script>
<script src="js/owl.js"></script>
<script src="js/wow.js"></script>
<script src="js/nav-tool.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/script.js"></script>
</body>
</html>
......
2.CSS
代码如下（节选示例）：
/* Foodily HTML Template */
/* Import Files */
@import url('global.css');
@import url('header.css');
@import url('font-awesome.css');
@import url('flaticon.css');
@import url('animate.css');
@import url('owl.css');
@import url('animation.css');
@import url('jquery-ui.css');
@import url('jquery.fancybox.min.css');
@import url('jquery.mCustomScrollbar.min.css');
/***
====================================================================
Search Popup
====================================================================
***/
.search-popup{
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
z-index: 99999;
margin-top: -540px;
transform: translateY(-100%);
background-color: rgba(0,0,0,0.90);
-webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
-moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
-o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.sidenav-bar-visible .search-popup{
width: 80%;
}
.search-popup:before{
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 560px;
background-image: url(../images/icons/waves-shape.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-top: 0px;
content: "";
}
.search-active .search-popup{
transform: translateY(0%);
margin-top: 0;
}
.search-popup .close-search{
position: absolute;
left: 0;
right: 0;
top: 75%;
margin: 0 auto;
margin-top: -200px;
border-radius: 50%;
text-align: center;
background-color: #de9190;
width: 70px;
cursor:pointer;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
border-bottom: 3px solid #ffffff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
opacity: 0;
visibility: hidden;
}
.search-popup .close-search span{
position: relative;
display: block;
height: 70px;
width: 70px;
font-size: 30px;
line-height: 70px;
color: #ffffff;
}
.search-active .search-popup .close-search{
visibility: visible;
opacity: 1;
top: 50%;
-webkit-transition-delay: 1500ms;
-moz-transition-delay: 1500ms;
-ms-transition-delay: 1500ms;
-o-transition-delay: 1500ms;
transition-delay: 1500ms;
}
.search-popup form{
position: absolute;
max-width: 700px;
top: 50%;
left: 15px;
right: 15px;
margin:-35px auto 0;
transform: scaleX(0);
transform-origin: center;
background-color: #111111;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.search-active .search-popup form{
transform: scaleX(1);
-webkit-transition-delay: 1200ms;
-moz-transition-delay: 1200ms;
-ms-transition-delay: 1200ms;
-o-transition-delay: 1200ms;
transition-delay: 1200ms;
}
.search-popup .form-group{
position:relative;
margin:0px;
overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
position:relative;
display:block;
font-size:18px;
line-height: 50px;
color:#000000;
height:70px;
width:100%;
padding: 10px 30px;
background-color: #ffffff;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
font-weight:500;
text-transform:capitalize;
}
.search-popup .form-group input[type="submit"],
.search-popup .form-group button{
position:absolute;
right:30px;
top:0px;
height:70px;
line-height: 70px;
background: transparent;
text-align:center;
font-size:24px;
color:#000000;
padding: 0;
cursor:pointer;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}
.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
color: #000000;
}
.search-popup input::placeholder,
.search-popup textarea::placeholder{
color:#000000;
}
.search-popup .close-search.style-two{
position: absolute;
right: 25px;
left: auto;
color:#ffffff;
width:auto;
height:auto;
......
3.JS
代码如下（节选示例）：
(function($) {
$.fn.appear = function(fn, options) {
var settings = $.extend({
//arbitrary data to pass to fn
data: undefined,
//call fn only on the first appear?
one: true,
// X & Y accuracy
accX: 0,
accY: 0
}, options);
return this.each(function() {
var t = $(this);
//whether the element is currently visible
t.appeared = false;
if (!fn) {
//trigger the custom event
t.trigger('appear', settings.data);
return;
}
var w = $(window);
//fires the appear event when appropriate
var check = function() {
//is the element hidden?
if (!t.is(':visible')) {
//it became hidden
t.appeared = false;
return;
}
//is the element inside the visible window?
var a = w.scrollLeft();
var b = w.scrollTop();
var o = t.offset();
var x = o.left;
var y = o.top;
var ax = settings.accX;
var ay = settings.accY;
var th = t.height();
var wh = w.height();
var tw = t.width();
var ww = w.width();
if (y + th + ay >= b &&
y <= b + wh + ay &&
x + tw + ax >= a &&
x <= a + ww + ax) {
//trigger the custom event
if (!t.appeared) t.trigger('appear', settings.data);
} else {
//it scrolled out of view
t.appeared = false;
}
};
//create a modified fn with some additional logic
var modifiedFn = function() {
//mark the element as visible
t.appeared = true;
//is this supposed to happen only once?
if (settings.one) {
//remove the check
w.unbind('scroll', check);
var i = $.inArray(check, $.fn.appear.checks);
if (i >= 0) $.fn.appear.checks.splice(i, 1);
}
//trigger the original fn
fn.apply(this, arguments);
};
//bind the modified fn to the element
if (settings.one) t.one('appear', settings.data, modifiedFn);
else t.bind('appear', settings.data, modifiedFn);
//check whenever the window scrolls
w.scroll(check);
//check whenever the dom changes
$.fn.appear.checks.push(check);
//check now
(check)();
});
};
//keep a queue of appearance checks
$.extend($.fn.appear, {
checks: [],
timeout: null,
//process the queue
checkAll: function() {
var length = $.fn.appear.checks.length;
if (length > 0) while (length--) ($.fn.appear.checks[length])();
},
//check the queue asynchronously
run: function() {
if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
$.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
}
});
//run checks when these methods are called
$.each(['append', 'prepend', 'after', 'before', 'attr',
'removeAttr', 'addClass', 'removeClass', 'toggleClass',
'remove', 'css', 'show', 'hide'], function(i, n) {
var old = $.fn[n];
if (old) {
$.fn[n] = function() {
var r = old.apply(this, arguments);
$.fn.appear.run();
return r;
}
}
});
})(jQuery);
......
五、更多推荐
【关注作者|获取更多源码；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
