当前位置：网站首页>Student website template brown cake dessert website design - brown cake dessert shop (4 pages) gourmet dessert website production final assignment finished product_ Fresh fruit web design final assign
Student website template brown cake dessert website design - brown cake dessert shop (4 pages) gourmet dessert website production final assignment finished product_ Fresh fruit web design final assign
2022-06-11 16:22:00 【Web front end quality Creator - Web Design】
HTML5 Final homework
List of articles
One 、 Works display
Two 、 File directory
3、 ... and 、 Code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XXX The cake </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/swiper.min.css">
</head>
<body id="index">
<div class="header">
<div id="headerCen">
<div id="logo"><img src="picture/logo.jpg"></div>
<div class="headerTop">
<div id="notice">
<div class="notice">
<span>2017 year 1 month 27 New year's Eve ,XXX Cake distribution and 400 The customer service time is at the latest 18：00, Return to normal service the next day , Please kindly understanding .XXX2017 year 1 month 27 New year's Eve ,XXX Cake distribution and 400 The customer service time is at the latest 18：00, Return to normal service the next day , Please kindly understanding .XXX</span>
</div>
</div>
<ul id="ures">
<li><a href="#"> Sign in </a> <span></span></li>
<li><a href="#"> register </a> <span></span></li>
<li><a href="#"> Order </a> <span></span></li>
<li><img src="picture/shou_car.png"></li>
</ul>
</div>
<!-- <div id="claer"></div> -->
<ul class="headerBut">
<li class="hover"><a href="#"> home page </a></li>
<li><a href="about.html"> Cake genealogy </a></li>
<li><a href="tale.html">XXX Story </a></li>
<li><a href="#"> Latest events </a></li>
<li><a href="love.html"> Because love </a></li>
<span><img src="picture/shou_dinahua.png"><a href="#"> XXX（ Service time ：8:30-22:30）</a></span>
</ul>
</div>
</div>
<!-- header -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="picture/bnner.jpg" alt=""></div>
<div class="swiper-slide"><img src="picture/bnner.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- swiper -->
<div class="content">
<div id="content">
<h2><img src="picture/shou_nr1.png"></h2>
<ul class="contentMenu">
<li>
<img src="picture/shou_n1.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n2.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n3.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n4.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n5.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n6.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n7.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n8.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n9.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n10.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n11.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="picture/shou_n12.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6 " /227RMB</p>
<span> Sweetness :</span>
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
<img src="picture/tian_du.png">
</div>
<div class="mune_r"><img src="picture/shou_car.png"></div>
</div>
<div class="menuBut">
<p> Lemon muscaban </p>
<p>Lemon mascarpone cake</p>
</div>
</li>
</ul>
<div id="clear"></div>
<div class="more"><p> More delicious </p></div>
</div>
<!-- list menu -->
<div id="try">
<div class="tryL"><img src="picture/shichi.jpg"></div>
<ul class="tryR">
<li><p> Corporate name :</p><input type="text" placeholder=" Please enter the company name (* Required )">
</li>
<li><p> Business address :</p><input type="text" placeholder=" Please fill in the business address ">
</li>
<li><p> Number of people trying to eat :</p><input type="text" placeholder=" Please fill in the number of people trying ">
</li>
<li><p> Name of the person making the appointment :</p><input type="text" placeholder=" Please fill in the name of the reservation person ">
</li>
<li><p> contact number :</p><input type="text" placeholder=" Please fill in the contact number ">
</li>
<li class="Xopen"><p> Cake variety :</p><input type="text" placeholder=" Fresh milk series ">
<ul class="Xhide">
<li> Caramel vanilla mousse </li>
<li> Raspberry Mousse </li>
<li> Durian cheese </li>
<li> Caramel vanilla mousse </li>
<li> Raspberry Mousse </li>
<li> Durian cheese </li>
<li> Caramel vanilla mousse </li>
<li> Raspberry Mousse </li>
<li> Durian cheese </li>
</ul>
</li>
<button class="refer"> Application for submission </button>
</ul>
<div id="clear"></div>
<div class="try_b">
<p class="try_bL">
<i>< 1 ></i>. The number of enterprises trying to eat exceeds 3 people , You can apply for a trial .
<br>
<i>< 2 ></i>
. After the application information is submitted ,XXX It will be summarized uniformly , And contact the booking person to confirm the relevant information so as to confirm whether the application is successful
</p>
<p class="try_bR">
<i>< 3 ></i>. Enterprises applying for trial eating shall provide one that can accommodate 5-10 People around the tasting space .
<br>
<i>< 4 ></i>
. The trial is over , We look forward to your valuable feedback .
</p>
</div>
</div>
<ul class="intr">
<li>
<img src="picture/xiangqing.jpg" alt="heihei">
<span> Check the details <i><img src="picture/xiangqing_logo.png"></i></span>
</li>
<li>
<img src="picture/xiangqing.jpg" alt="heihei">
<span> Check the details <i><img src="picture/xiangqing_logo.png"></i></span>
</li>
<li>
<img src="picture/xiangqing.jpg" alt="heihei">
<span> Check the details <i><img src="picture/xiangqing_logo.png"></i></span>
</li>
</ul>
<ul class="serve">
<li>
<img src="picture/b_1.png">
<span> No rest all year round <br> Delivery </span>
</li>
<li>
<img src="picture/b_2.png">
<span> Professional selection <br> Quality certification </span>
</li>
<li>
<img src="picture/b_3.png">
<span> Safe delivery <br> A specially assigned area </span>
</li>
<li>
<img src="picture/b_4.png">
<span> Professional customer service <br> Close service </span>
</li>
</ul>
</div>
<!-- content -->
<div class="footerTop">
<div id="footerTop">
<div class="footerL">
<img src="picture/weixin.jpg">
<p> Wechat ordering process <br>
<span>
Pay attention to WeChat public number － Click on ［ Wechat order ］ - ［ Cake reservation ］<br>
- Choose cake pounds ［ Buy now ］ - Click on ［ To settle accounts ］<br>
- Confirm order information - choice ［ Method of payment ］<br>
- Enter coupon password - place order
</span>
</p>
</div>
<div class="footerR">
<p class="footerR_l"> Free delivery in Suzhou <br>
<span>
[ Order special line ] XXX（ Service time ：8:30-22:30）<br>
[ Customer service email ] XXX<br>
[ The company address ] XXX
</span>
</p>
<div class="footerR_r">
<p> Official website dynamics </p>
<img src="picture/xinlang.png"><br>
<img src="picture/small_weiixn.png">
</div>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
<p> copyright 2016-2022 company : Suzhou XXX E-commerce Co., Ltd Sue ICP To prepare XXX Number </p>
</div>
</div>
</body>
</html>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/js.js"></script>
Four 、 Get more source code
~ Pay attention to me , Like the blog ~ Every day brings you knowledge
边栏推荐
- [learn FPGA programming from scratch -18]: quick start chapter - operation steps 2-6- VerilogHDL sequential circuit syntax analysis (taking the counter as an example)
- 09-最小生成树 公路村村通
- （湖南科技大学oj作业）问题 G: 串的模式匹配
- Understand the dense support functions / stored procedures of opengauss
- Nat Commun｜語言模型可以學習複雜的分子分布
- Detailed explanation of the functions of list and dict data types
- Connect to the database using GSQL
- laravel 8 使用passport 进行Auth验证及颁发token
- Question ac: Horse Vaulting in Chinese chess
- PyQt5 使QPlainTextEdit控件支持行号显示
猜你喜欢
Code farming essential SQL tuning (Part 1)
Yiwenjiaohui your database system tuning
Pytest测试框架基础篇
Elk enterprise log analysis system
![[sword finger offer] 21 Adjust array order so that odd numbers precede even numbers](/img/ba/8fa84520bacbc56ce7cbe02ee696c8.png)
[sword finger offer] 21 Adjust array order so that odd numbers precede even numbers
![Interview classic question: how to do the performance test? [Hangzhou multi surveyors] [Hangzhou multi surveyors \wang Sir]](/img/ea/2c5b48b08a9654b61694b93a2e7d0a.png)
Interview classic question: how to do the performance test? [Hangzhou multi surveyors] [Hangzhou multi surveyors \wang Sir]
MSDN download win11 method, simple and easy to operate
Nat Commun｜语言模型可以学习复杂的分子分布
Database resource load management (Part 2)
What happened to the frequent disconnection of the computer at home
随机推荐
Go语言之Go 快速入门篇（一）：第一个 Go 程序
postgresql创建数据库
Connect to the database using GSQL
Class and__ proto__ Property, the class prototype chain has two inheritance routes
The flat life of older farmers from Beijing to Holland
Data enhancement
Detailed explanation of MySQL binlog log and master-slave replication
电脑下面的任务栏怎么显示打开的程序
想学好ArrayList，看完这篇就够了
How the autorunner automated test tool creates a project -alltesting | Zezhong cloud test
Will you be punished for not wearing seat belts in the back row?
postgresql源码编译
A team of heavyweights came to the "digital transformation" arena of CLP Jinxin ice and snow sports
Discussion on opengauss parallel decoding
Overview and operation of database dense equivalent query
Search and graph theory: Dijkstra finding the shortest path i-dijkstra (shortest path)
Learn how to parse SQL from kernel code
Detailed explanation of the functions of list and dict data types
Heartless sword English Chinese bilingual poem 001 Spring outing
postgresql启动过程