当前位置：网站首页>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
边栏推荐
- leetcode684. Redundant connection (medium)
- How to optimize the performance of compose? Find the answer through "underlying principles" | developers say · dtalk
- Detailed explanation of MySQL binlog log and master-slave replication
- DHCP protocol instantiation analysis
- High concurrency pseudo sharing and cache line filling (cache line alignment) (@contained)
- 类的 prototype 属性和__proto__属性，类原型链有两条继承路线
- （湖南科技大学oj作业）问题 G: 串的模式匹配
- Understand the dense support functions / stored procedures of opengauss
- 基于FPGA的VGA协议实现
- Project workspace creation steps - Zezhong ar automated test tool
猜你喜欢
瑞吉外卖项目（三）员工管理业务开发
MySQL快速入门实例篇（入内不亏）
（湖南科技大学oj作业）问题 G: 串的模式匹配
Interview high frequency algorithm question --- longest palindrome substring
PostgreSQL startup process
【剑指Offer】21.调整数组顺序使奇数位于偶数前面
电脑下面的任务栏怎么显示打开的程序
1267_ FreeRTOS starts the first task interface prvportstartfirsttask implementation analysis
Talk about data center network again
20 full knowledge maps of HD data analysis have been completed. It is strongly recommended to collect them!
随机推荐
Database resource load management (Part 1)
（湖南科技大学oj作业）问题 G: 串的模式匹配
时间复杂度与空间复杂度解析
Complete test process [Hangzhou multi tester] [Hangzhou multi tester \wang Sir]
How can the project manager repel the fear of being dominated by work reports?
Detailed explanation of opengauss multi thread architecture startup process
Zhenxiang, Huawei gives n+1 for voluntary resignation
Golang map basic operations
laravel 监听模式
Discussion on opengauss parallel decoding
Can I eat meat during weight loss? Will you get fat?
laravel 8 使用passport 进行Auth验证及颁发token
[ISITDTU 2019]EasyPHP
完整的测试流程【杭州多测师】【杭州多测师_王sir】
用户界面之工具栏详解-AutoRunner自动化测试工具
rf中安装的第四步：安装 robotframework-selenium2library报错
RDKit教程
[从零开始学习FPGA编程-17]：快速入门篇 - 操作步骤2-5- VerilogHDL硬件描述语言符号系统与程序框架（软件程序员和硬件工程师都能看懂）
C＃ 启动一个外部exe文件，并传入参数
Kill the swagger UI. This artifact is better and more efficient!