大门生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页计划 美食 餐饮杰12个页面

大门生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页计划 美食 餐饮杰12个页面

网页作品代码简单，可使用恣意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等恣意html编辑软件举行运行及修改编辑等操纵）。

获取源码

1，访问该网站
2，点击上方下载
目次1

项目视频


   html+css网页计划 美食 餐饮杰12个页面

页面1

页面2

页面3

页面4

页面5

页面6

页面7

页面8

页面9

页面10

页面11

页面12

代码展示

1.   <div style="margin: 0 auto;">
2.     <!-- 顶部导航栏 -->
3.     <div class="topnav">
4.       <!-- 品牌图标能够链接到首页 -->
5.       <a href="index.html">
6.         <img src="img/logo.png" alt="">
7.       </a>
9.       <!-- 导航内容 -->
10.       <div >
11.         <ul class="zf" >
12.           <li >
13.             <a href="#" title="餐饮品牌" class="zf sf">品牌</a>
14.           </li>
15.           <li class="item1">
16.             <button onclick="window.location.href = '#' " >
17.               <span class="zf sf zxbt">资讯</span>
18.               <div class="down1 xf">
19.                 <ul>
20.                   <li>
21.                     <a href="cyhyzx.html" class="sf">餐饮行业资讯</a>
22.                   </li>
23.                   <li>
24.                     <a href="#" class="sf">餐饮品牌新闻</a>
25.                   </li>
26.                 </ul>
27.               </div>
28.             </button>
29.           </li>
30.           <li class="item2">
31.             <button onclick="window.location.href = '#'">
32.               <span class=" zf sf ytbt" >业态</span>
33.               <div class="down2 xf">
34.                 <ul>
35.                   <li>
36.                     <a href="#" class="sf">快餐</a>
37.                   </li>
38.                   <li>
39.                     <a href="#" class="sf">火锅</a>
40.                   </li>
41.                   <li>
42.                     <a href="#" class="sf">小吃</a>
43.                   </li>
44.                   <li>
45.                     <a href="#" class="sf">中餐</a>
46.                   </li>
47.                   <li>
48.                     <a href="#" class="sf">西餐</a>
49.                   </li>
50.                   <li>
51.                     <a href="#" class="sf">饮品</a>
52.                   </li>
53.                   <li>
54.                     <a href="#" class="sf">烧烤</a>
55.                   </li>
56.                   <li>
57.                     <a href="#" class="sf">烘焙</a>
58.                   </li>
59.                   <li>
60.                     <a href="#" class="sf">特色餐饮</a>
61.                   </li>
62.                 </ul>
63.                 </div>
64.             </button>
65.           </li>
66.           <li>
67.             <a href="#" title="餐饮专题" class="zf sf">专题</a>
68.           </li>
69.           <li>
70.             <a href="#" title="餐饮招商" class="zf sf">招商</a>
71.           </li>
72.           <li>
73.             <a href="#" title="餐饮商机" class="zf sf">商机</a>
74.           </li>
75.           <li>
76.             <a href="./zh.html" title="餐饮展会" class="zf sf">展会</a>
77.           </li>
78.           <li>
79.             <a href="./jmdphb.html" title="餐饮排行榜1" class="zf sf">排行</a>
80.           </li>
81.       </div>
83.       <!-- 登录/入驻 -->
84.       <div class="login xf">
85.         <img src="img/login.png" alt="">
86.         <a href="./login.html" class="dl">登录</a>
87.         <a href="./register.html" class="rz">品牌免费入驻</a>
88.       </div>
89.       
90.     </div>
92.     <!-- 首页图片展示 -->
93.     <div class="banner">
94.       <a href="./ctmhg.html">
95.         <img src="img/banner.jpg" alt="">
96.       </a>
97.     </div>
99.     <!-- 一些店铺介绍 -->
100.     <div class="introduce">
101.       <div>
102.         <a href="#" class="sf df">满朝佰家粥铺</a><br>
103.         <p class="qf xf">一辈子，只熬一碗粥</p>
104.       </div>
105.       <div>
106.         <a href="#" class="sf df">朴太院韩式烤肉</a><br>
107.         <p class="qf xf">首尔风味，正宗烤肉</p>
108.       </div>
109.       <div>
110.         <a href="#" class="sf df">拔戒排骨</a><br>
111.         <p class="qf xf">人间至味小鲜肉</p>
112.       </div>
113.       <div>
114.         <a href="#" class="sf df">N多寿司</a><br>
115.         <p class="qf xf">手工小鲜食一口吃一个！</p>
116.       </div>
117.       <div>
118.         <a href="#" class="sf df">汉釜宫韩式烧烤</a><br>
119.         <p class="qf xf">做烧烤，我们是认真的！</p>
120.       </div>
121.     </div>
122.   
123.     <!-- 店铺海报 -->
124.     <!-- 一张海报 -->
125.     <div class="pic">
126.       <div class="p1">
127.         <a href="#">
128.           <img src="img/pic1.jpg" alt="">
129.         </a>
130.         <div class="ggbj">
131.           广告
132.         </div>
133.       </div>
134.       <!-- 两张海报 -->
135.       <div class="p2">
136.         <div>
137.           <a href="#">
138.             <img src="img/pic2.jpg" alt="">
139.           </a>
140.           <div class="ggbj">
141.             广告
142.           </div>
143.         </div>
144.         <div>
145.           <a href="#">
146.             <img src="img/pic3.jpg" alt="">
147.           </a>
148.           <div class="ggbj">
149.             广告
150.           </div>
151.         </div>
152.         
153.       </div>
154.       <!-- 两张海报 -->
155.       <div class="p2">
156.         <div>
157.           <a href="#">
158.             <img src="img/pic4.jpg" alt="">
159.           </a>
160.           <div class="ggbj">
161.             广告
162.           </div>
163.         </div>
164.         <div>
165.           <a href="#">
166.             <img src="img/pic5.jpg" alt="">
167.           </a>
168.           <div class="ggbj">
169.             广告
170.           </div>
171.         </div>
172.         
173.       </div>
174.       <!-- 四张海报 -->
175.       <div class="p4">
176.         <div>
177.           <a href="#">
178.             <img src="img/pic6.jpg" alt="">
179.           </a>
180.           <div class="ggbj">
181.             广告
182.           </div>
183.         </div>
184.         <div>
185.           <a href="#">
186.             <img src="img/pic7.jpg" alt="">
187.           </a>
188.           <div class="ggbj">
189.             广告
190.           </div>
191.         </div>
192.         <div>
193.           <a href="#">
194.             <img src="img/pic8.jpg" alt="">
195.           </a>
196.           <div class="ggbj">
197.             广告
198.           </div>
199.         </div>
200.         <div>
201.           <a href="#">
202.             <img src="img/pic9.jpg" alt="">
203.           </a>
204.           <div class="ggbj">
205.             广告
206.           </div>
207.         </div>
208.       </div>
209.       <!-- 四张海报 -->
210.       <div class="p4">
211.         <div>
212.           <a href="#">
213.             <img src="img/pic10.jpg" alt="">
214.           </a>
215.           <div class="ggbj">
216.             广告
217.           </div>
218.         </div>
219.         <div>
220.           <a href="#">
221.             <img src="img/pic11.jpg" alt="">
222.           </a>
223.           <div class="ggbj">
224.             广告
225.           </div>
226.         </div>
227.         <div>
228.           <a href="#">
229.             <img src="img/pic12.jpg" alt="">
230.           </a>
231.           <div class="ggbj">
232.             广告
233.           </div>
234.         </div>
235.         <div>
236.           <a href="#">
237.             <img src="img/pic13.jpg" alt="">
238.           </a>
239.           <div class="ggbj">
240.             广告
241.           </div>
242.         </div>  
243.       </div>
244.       <!-- 四张海报 -->
245.       <div class="p4">
246.         <div>
247.           <a href="#">
248.             <img src="img/pic14.jpg" alt="">
249.           </a>
250.           <div class="ggbj">
251.             广告
252.           </div>
253.         </div>
254.         <div>
255.           <a href="#">
256.             <img src="img/pic15.jpg" alt="">
257.           </a>
258.           <div class="ggbj">
259.             广告
260.           </div>
261.         </div>
262.         <div>
263.           <a href="#">
264.             <img src="img/pic16.jpg" alt="">
265.           </a>
266.           <div class="ggbj">
267.             广告
268.           </div>
269.         </div>
270.         <div>
271.           <a href="#">
272.             <img src="img/pic17.jpg" alt="">
273.           </a>
274.           <div class="ggbj">
275.             广告
276.           </div>
277.         </div>
278.       </div>
279.     </div>
281.     <!-- 资讯&专题 -->
282.     <div class="zizhuan">
283.       <!-- 资讯 -->
284.       <div class="zx" id="box1">
285.         <!-- 标题 -->
286.         <div class="zx_title">
287.           <span class="qf dddf" >资讯</span>
288.           <a href="#" class="qf df cydt_title active" data-id="cydt">餐饮动态</a>
289.           <a href="#" class="qf df ppzx_title" data-id="ppzx">品牌资讯</a>
290.           <a href="#" class="qf df ppzx_title" data-id="cyxw">餐饮新闻</a>
291.         </div>
292.         <!-- 整体内容 -->
293.         <div class="zx_content">
294.            <!-- 文章部分 -->
295.         <div class="zx_article">
296.           <!-- 餐饮动态 -->
297.         <div class="cydt active" id="cydt">
298.           <ul>
299.             <li><a href="#" class="sf xf">2022年餐饮加盟靠不靠谱？</a></li>
300.             <li><a href="#" class="sf xf">餐饮进入预制菜新赛道，但整体市场还不</a></li>
301.             <li><a href="#" class="sf xf">疫情期间在家和外出就餐如何践行“分餐</a></li>
302.             <li><a href="#" class="sf xf">招牌美食为何会成为餐饮加盟的法宝？</a></li>
303.             <li><a href="#" class="sf xf">餐饮老板的朋友圈发什么内容，才能吸引</a></li>
304.             <li><a href="#" class="sf xf">为什么说疫情下，餐企必须灵活调整产品</a></li>
305.             <li><a href="#" class="sf xf">经历了3年疫情的餐饮人，这个道理你懂</a></li>
306.             <li><a href="#" class="sf xf">30%的餐饮转让店不要选，你知道吗？</a></li>
307.             <li><a href="#" class="sf xf">餐饮行业企业应当如何搭建自己的客户</a></li>
308.             <li><a href="#" class="sf xf">餐饮人如何经营好一家社区餐饮店？</a></li>
309.           </ul>     
310.         </div>
311.         <!-- 品牌资讯 -->
312.         <div class="ppzx" id="ppzx">
313.           <ul>
314.             <li><a href="#" class="sf xf">喜讯：陕西高总与朝天门火锅达成合作！</a></li>
315.             <li><a href="#" class="sf xf">口水鸡排合作店成败的关键是什么呢</a></li>
316.             <li><a href="#" class="sf xf">快乐星汉堡店装修指导</a></li>
317.             <li><a href="#" class="sf xf">吉祥馄饨，中式快餐连锁加盟店的选址原</a></li>
318.             <li><a href="#" class="sf xf">草原往事冰煮羊火锅，汤汁鲜美，羊肉鲜</a></li>
319.             <li><a href="#" class="sf xf">榴芒一族，鲜果榴芒，惊艳味蕾</a></li>
320.             <li><a href="#" class="sf xf">开零食店的技巧，帮你把店开的红红火火</a></li>
321.             <li><a href="#" class="sf xf">开馄饨店的市场行情怎么样，真实情况解</a></li>
322.             <li><a href="#" class="sf xf">快乐星汉堡一站式运营服务，加盟合伙人</a></li>
323.             <li><a href="#" class="sf xf">2022年做火锅餐饮店，到底靠不靠谱？</a></li>
324.           </ul>
325.         </div>
326.         <!-- 餐饮新闻 -->
327.         <div class="cyxw" id="cyxw">
328.           <ul>
329.             <li><a href="#" class="sf xf">炸鸡店怎么开生意才能火起来，这些技巧</a></li>
330.             <li><a href="#" class="sf xf">2022年餐饮加盟靠不靠谱？</a></li>
331.             <li><a href="#" class="sf xf">炸鸡店没生意怎么办，教你几招把店搞起</a></li>
332.             <li><a href="#" class="sf xf">开火锅需要经验吗，掌握这些也能把店开</a></li>
333.             <li><a href="#" class="sf xf">开麻辣烫店必须要了解的问题，都是有关</a></li>
334.             <li><a href="#" class="sf xf">开烧烤店容易遇到的风险，这里教你提前</a></li>
335.             <li><a href="#" class="sf xf">开面包店的注意事项，这些问题注意就对</a></li>
336.             <li><a href="#" class="sf xf">开烧烤店怎么才能经营得很好，这些方面</a></li>
337.             <li><a href="#" class="sf xf">开好一家市井火锅店必备的技巧</a></li>
338.             <li><a href="#" class="sf xf">开好一家麻辣烫店的关键步骤，可不要弄</a></li>
339.           </ul>
340.         </div>
341.         </div>
342.         
343.         <!-- 图片部分 -->
344.         <div class="zx_pic" id="banner1">
346.           <div>
347.             <a href="#">
348.               <img src="img/zx1.jpg" alt="" class="active">
349.             </a>
350.             
351.             <a href="#">
352.               <img src="img/zx2.jpg" alt="">
353.             </a>
354.             <a href="#">
355.               <img src="img/zx3.jpg" alt="">
356.             </a>
357.           </div>
359.           <div class="zxpic_title">
360.             <div>
361.               <span class="active" data-id="kc"></span>
362.               <span data-id="yj"></span>
363.               <span data-id="cq"></span>
364.             </div>
365.           </div>
366.           <div>
367.             <p class="active" id="kc">宽城子美蛙自助火锅</p>
368.             <p id="yj">怡佳仁零食店，嘴里的小幸福</p>
369.             <p id="cq">重庆崽儿火锅</p>
370.           </div>
371.           <button id="next1"></button>
372.         </div>
373.         
374.       </div>
375.       
376.       </div>
377.       <!-- 餐饮行业专题 -->
378.       <div class="zt dddf">
379.         <p class="sf">餐饮行业专题</p>
380.         <a href="./cxhgsdph.html" class="sf ddf">创新火锅十大排行</a>
381.         <a href="#" class="sf xf">外卖快餐店加盟哪家好</a>
382.         <a href="#" class="sf xf">成都本地人推荐火锅十大品牌</a>
383.         <a href="#" class="sf ddf">火锅加盟连锁店10大品牌</a>
384.         <a href="#" class="sf xf">火锅食材超市加盟排名</a>
385.         <a href="#" class="sf xf">烧烤加盟店哪个品牌好</a>
386.         <a href="#" class="sf ddf">快餐加盟连锁店十大</a>
387.         <a href="#" class="sf xf">加盟哪个汉堡比较好</a>
388.         <a href="#" class="sf xf">自助烤肉加盟连锁店排行榜</a>
389.       </div>
390.     </div>
392.     <!-- 长海报 -->
393.     <div class="longbanner">
394.       <a href="#">
395.         <img src="img/longbanner.jpg" alt="">
396.       </a>
397.     </div>
399.     <!-- 餐饮管理及排名 -->
400.     <div class="guanpai">
401.       <!-- 管理 -->
402.       <div class="gl" id="box2">
403.         <!--管理标题行  -->
404.         <div class="gl_title">
405.           <span class="qf dddf">管理</span>
406.           <a href="#" class="qf df active" data-id="jyzd">餐饮经营之道</a>
407.           <a href="#" class="qf df " data-id="cygl">餐饮管理</a>
408.           <a href="#" class="qf df " data-id="kdcb">餐饮开店筹备</a>
409.         </div>
410.         <!-- 管理内容行 -->
411.         <div class="gl_content">
412.            <!-- 广告标签 -->
413.            <div>
414.             <!-- 广告轮播图 -->
415.             <div class="gl_pic" id="banner2">
416.               <div>
417.                 <a href="#">
418.                   <img src="img/gl1.jpg" alt="" class="active">
419.                 </a>
420.                 <a href="#">
421.                   <img src="img/gl2.jpg" alt="">
422.                 </a>
423.                 <a href="#">
424.                   <img src="img/gl3.jpg" alt="">
425.                 </a>
426.               </div>
427.              <div class="glpic_title">
428.                <div>
429.                 <span class="active" data-id="jh"></span>
430.                 <span data-id="bj"></span>
431.                 <span data-id="jn"></span>
432.                </div>
433.              </div>
434.               <div>
435.                 <p class="active" id="jh">金海家港式肉蟹煲</p>
436.                 <p id="bj">拔戒排骨，人间至味小鲜肉</p>
437.                 <p id="jn">筋牛哥全牛锅</p>
438.               </div>
439.             
440.             </div>
441.             <!-- 标签 -->
442.             <div class="gl_biaoqian">
443.               <div>
444.                 <a href="#">快餐品牌</a>
445.                 <a href="#">火锅品牌</a>
446.               </div>
447.               <div>
448.                 <a href="#">小吃品牌</a>
449.                 <a href="#">中餐正餐</a>
450.               </div>
451.               <div>
452.                 <a href="#">牛排披萨</a>
453.                 <a href="#">奶茶饮品</a>
454.               </div>
455.               <div>
456.                 <a href="#">烧烤烤肉</a>
457.                 <a href="#">面包烘焙</a>
458.               </div>
459.               <div>
460.                 <a href="#">特色餐饮</a>
461.                 <a href="#">休闲食品</a>
462.               </div>
463.             </div>
464.            </div>
465.          <!-- 内容变换部分 -->
466.          <div class="gl_article">
467.             <!--餐饮经营之道  -->
468.             <div class="jyzd active" id="jyzd">
470.               <div class="jyzd_wen1">
471.                 <h3><a href="#" class="sf dddf">开饭店亏了几十万，这些原因你需要找一下</a></h3>
472.                 <p class="zf">在开饭店前要选择合适的开店地址，这是必备要素之一。合适的开店位置会给饭店带来人流量，生意也...</p>
473.               </div>
475.               <div class="jyzd_wen2" >
476.                 <h3><a href="#" class="sf dddf">开饭店一直亏，这些问题你要注意</a></h3>
477.                 <p class="zf">开饭店一直亏损的话，大家首先应该考虑的问题是不是地段问题，因为饭店对地段的要求是比较高的，...</p>
478.               </div>
480.               <div class="jyzd_tuwen1">
481.                 <div>
482.                   <img src="img/jyzd_pic1.jpg" alt="">
483.                 </div>
484.                 <div>
485.                   <ul>
486.                     <li><a href="#" class="sf">汉堡店刚开没什么生意，建议</a></li>
487.                     <li><a href="#" class="sf">汉堡店刚开没什么生意，建议</a></li>
488.                     <li><a href="#" class="sf">开餐饮店怎样运营才好，可以</a></li>
489.                   </ul>
490.                 </div>
491.               </div>
493.               <div class="jyzd_tuwen2">
494.                 <div>
495.                   <img src="img/jyzd_pic2.jpg" alt="">
496.                 </div>
497.                 <div>
498.                   <ul>
499.                     <li><a href="#" class="sf">饭店经营一个劲亏钱，这些原</a></li>
500.                     <li><a href="#" class="sf">饭店经营一个劲亏钱，这些原</a></li>
501.                     <li><a href="#" class="sf">饭店怎么做营销活动，这些方</a></li>
502.                   </ul>
503.                 </div>
504.               </div>
506.             </div>
508.                <!--餐饮管理  -->
509.                <div class="cygl" id="cygl">
511.                 <div class="cygl_wen1">
512.                   <h3><a href="#" class="sf dddf">经营餐饮店需要注意哪些细节问题，看了这些你会明白</a></h3>
513.                   <p class="zf">餐饮店经营过程中必须要注意的细节就是店面的清洁问题。</p>
514.                 </div>
515.   
516.                 <div class="cygl_wen2" >
517.                   <h3><a href="#" class="sf dddf">餐饮人需要从哪些细节去调整自己？</a></h3>
518.                   <p class="zf">首先，一个餐饮店的立身之本就是菜品。凡是做大做强的餐饮品牌，都有一个共同的特点，那就是他们...</p>
519.                 </div>
520.   
521.                 <div class="cygl_tuwen1">
522.                   <div>
523.                     <img src="img/cygl_pic1.jpg" alt="">
524.                   </div>
525.                   <div>
526.                     <ul>
527.                       <li><a href="#" class="sf">餐饮店长具备这7种心态，才能</a></li>
528.                       <li><a href="#" class="sf">餐厅该怎样提高出菜速度，整</a></li>
529.                       <li><a href="#" class="sf">餐饮连锁店生意好的店是怎么</a></li>
530.                     </ul>
531.                   </div>
532.                 </div>
533.   
534.                 <div class="cygl_tuwen2">
535.                   <div>
536.                     <img src="img/cygl_pic2.jpg" alt="">
537.                   </div>
538.                   <div>
539.                     <ul>
540.                       <li><a href="#" class="sf">餐饮人要从哪几个细节去调整</a></li>
541.                       <li><a href="#" class="sf">想创业的餐饮人不懂这4点，千</a></li>
542.                       <li><a href="#" class="sf">餐饮老板务必清楚，好员工离</a></li>
543.                     </ul>
544.                   </div>
545.                 </div>
546.   
547.               </div>
549.                  <!--餐饮开店筹备  -->
550.             <div class="kdcb" id="kdcb">
552.               <div class="kdcb_wen1">
553.                 <h3><a href="#" class="sf dddf">餐饮开店筹备流程，一步一步教你把店开起来</a></h3>
554.                 <p class="zf">想要开好一家餐饮店铺的话，大家首先需要做的四千就是选择好一个地段，因为对于餐饮店铺来说，人...</p>
555.               </div>
557.               <div class="kdcb_wen2" >
558.                 <h3><a href="#" class="sf dddf">避坑这几点，大大提高你的开店成功率</a></h3>
559.                 <p class="zf">炸鸡作为一种快餐小吃，操作简单，出餐快，门店经营方便，很多人都把炸鸡作为自己的创业选择。</p>
560.               </div>
562.               <div class="kdcb_tuwen1">
563.                 <div>
564.                   <img src="img/kdcb_pic1.jpg" alt="">
565.                 </div>
566.                 <div>
567.                   <ul>
568.                     <li><a href="#" class="sf">餐饮创业避坑法则，三大要点</a></li>
569.                     <li><a href="#" class="sf">餐饮行业开店的几大注意事</a></li>
570.                     <li><a href="#" class="sf">西式简餐开店筹备工作有哪些</a></li>
571.                   </ul>
572.                 </div>
573.               </div>
575.               <div class="jyzd_tuwen2">
576.                 <div>
577.                   <img src="img/jyzd_pic2.jpg" alt="">
578.                 </div>
579.                 <div>
580.                   <ul>
581.                     <li><a href="#" class="sf">新手开一家餐馆的店铺流程</a></li>
582.                     <li><a href="#" class="sf">如何推广自己的餐饮店</a></li>
583.                     <li><a href="#" class="sf">选择餐饮店铺几大必备条件及</a></li>
584.                   </ul>
585.                 </div>
586.               </div>
588.             </div>
590.          </div>
591.           </div>
592.      
594.       </div>
595.       <!-- 品牌排行榜 -->
596.       <div class="phb">
597.         <p ><a href="#" class="sf dddf">餐饮品牌排行榜</a></p>
598.         <ul>
599.           <li>
600.             <div>
601.             <i class="cur">1</i>
602.             <a href="#" class="sf">有拈头市井火锅</a>
603.           </div>
604.             <span>9872</span>
605.           </li>
606.           <li>
607.             <div>
608.               <i class="cur">2</i>
609.               <a href="#" class="sf">朝天门火锅</a>
610.             </div>
611.             <span>9854</span>
612.           </li>
613.           <li>
614.             <div>
615.               <i class="cur">3</i>
616.               <a href="#" class="sf">豪渝火锅</a>
617.             </div>
618.             <span>9852</span>
619.           </li>
620.           <li>
621.             <div>
622.               <i>4</i>
623.               <a href="#" class="sf">小猪查理川式烤肉</a>
624.             </div>
625.            <span>9852</span>
626.           </li>
627.           <li>
628.             <div>
629.               <i>5</i>
630.               <a href="#" class="sf">酸小七果味酸菜鱼</a>
631.             </div>
632.             <span>9652</span>
633.           </li>
634.           <li>
635.             <div>
636.               <i>6</i>
637.               <a href="#" class="sf">五谷鱼粉</a>
638.             </div>
639.             <span>8921</span>
640.           </li>
641.           <li>
642.             <div>
643.               <i>7</i>
644.             <a href="#" class="sf">吴太和鲍汁黄焖鸡</a>
645.             </div>
646.             <span>8562</span>
647.           </li>
648.           <li>
649.             <div>
650.               <i>8</i>
651.               <a href="#" class="sf">富士烧肉牧场</a>
652.             </div>
653.             <span>8542</span>
654.           </li>
655.           <li>
656.             <div>
657.               <i>9</i>
658.             <a href="#" class="sf">快乐星汉堡</a>
659.             </div>
660.             <span>8528</span>
661.           </li>
662.           <li>
663.             <div>
664.               <i>10</i>
665.               <a href="#" class="sf">N多寿司</a>
666.             </div>
667.             <span>8521</span>
668.           </li>
669.         </ul>  
670.       </div>
671.     </div>
673.     <!-- 美食店铺 -->
674.     <div class="dianpu">
676.       <div class="dp1">
678.          <div>
679.          <div class="dp_pic"><a href="#"><img src="img/dp1.jpg" alt=""></a></div>
680.           <p class="sf dddf">六年一班串串香</p>
681.           <span>单店投资</span>
682.           <i class="qf xf">10以上</i>
683.         </div>
685.         <div>
686.           <div class="dp_pic"><a href="#"><img src="img/dp2.jpg" alt=""></a></div>
687.           <p class="sf dddf">签佰度串串火锅</p>
688.           <span>单店投资</span>
689.           <i class="qf xf">10-30万</i>
690.         </div>
692.         <div>
693.           <div class="dp_pic"><a href="#"><img src="img/dp3.jpg" alt=""></a></div>
694.           <p class="sf dddf">唛乐滋汉堡</p>
695.           <span>单店投资</span>
696.           <i class="qf xf">10以上</i>
697.         </div>
699.         <div>
700.           <div class="dp_pic"><a href="#"><img src="img/dp4.jpg" alt=""></a></div>
701.           <p class="sf dddf">老黄记丁丁美蛙鱼头</p>
702.           <span>单店投资</span>
703.           <i class="qf xf">30-100万</i>
704.         </div>
705.         
706.       </div>
708.       
709.       <div class="dp2">
711.         <div>
712.           <div class="dp_pic"><a href="#"><img src="img/dp5.jpg" alt=""></a></div>
713.           <p class="sf dddf">藕然间：藕然天成 润泽人间</p>
714.           <span>单店投资</span>
715.           <i class="qf xf">20-50万</i>
716.         </div>
718.         <div>
719.           <div class="dp_pic"><a href="#"><img src="img/dp6.jpg" alt=""></a></div>
720.           <p class="sf dddf">鼎四方鲜牛肉大骨汤</p>
721.           <span>单店投资</span>
722.           <i class="qf xf">10-30万</i>
723.         </div>
725.         <div>
726.           <div class="dp_pic"><a href="#"><img src="img/dp7.jpg" alt=""></a></div>
727.           <p class="sf dddf">吴太和鲍汁黄焖鸡</p>
728.           <span>单店投资</span>
729.           <i class="qf xf">8-20万以上</i>
730.         </div>
732.         <div>
733.           <div class="dp_pic"><a href="#"><img src="img/dp8.jpg" alt=""></a></div>
734.           <p class="sf dddf">李八哥火锅俱乐部头</p>
735.           <span>单店投资</span>
736.           <i class="qf xf">20-30万</i>
737.         </div>
738.         
739.       </div>
740.     </div>
742.     <!-- 综合点评 -->
743.     <div class="zongdian">
744.       <!-- 综合 -->
745.       <div class="zh" id="box3">
746.         <!-- 标题 -->
747.         <div class="zh_title" >
748.           <span class="qf dddf">综合</span>
749.           <a href="#" class="qf df zcfg_title active" data-id="zcfg">政策法规</a>
750.           <a href="#" class="qf df cyzn_title" data-id="cyzn">创业指南</a>
751.           <a href="#" class="qf df cygs_title" data-id="cygs">餐饮公司</a>
752.         </div>
753.         <!-- 整体内容 -->
754.         <div class="zh_content">
755.            <!-- 文章部分 -->
756.         <div class="zh_article">
757.           <!-- 政策法规 -->
758.         <div class="zcfg active" id="zcfg">
759.           <ul>
760.             <li><i class="circle"></i><a href="#" class="sf zf">三项餐饮地方新标准4月实施 外卖取餐须与加工制</a></li>
761.             <li><i class="circle"></i><a href="#" class="sf zf">反食品浪费法草案提请审议，为粮食安全保驾护航</a></li>
762.             <li><i class="circle"></i><a href="#" class="sf zf">北京发布《冷链食品从业人员工作与居家个人防护</a></li>
763.             <li><i class="circle"></i><a href="#" class="sf zf">天津禁止餐饮经营者设置最低消费</a></li>
764.             <li><i class="circle"></i><a href="#" class="sf zf">网络餐饮服务食品安全监督管理规定再修订，新版</a></li>
765.             <li><i class="circle"></i><a href="#" class="sf zf">餐饮服务单位应向合餐顾客提供公筷公勺</a></li>
766.             <li><i class="circle"></i><a href="#" class="sf zf">立法制止餐饮浪费 促进文明用餐行为</a></li>
767.           </ul>     
768.         </div>
769.         <!-- 创业指南 -->
770.         <div class="cyzn" id="cyzn">
771.           <ul>
772.             <li><i class="circle"></i><a href="#" class="sf zf">开餐饮店的选址要点，餐饮人必看</a></li>
773.             <li><i class="circle"></i><a href="#" class="sf zf">开串串火锅店必备知识</a></li>
774.             <li><i class="circle"></i><a href="#" class="sf zf">开饭店的技巧，掌握这些经营不成问题</a></li>
775.             <li><i class="circle"></i><a href="#" class="sf zf">饭馆生意不好怎样才能扭转，这些方法你可以试试</a></li>
776.             <li><i class="circle"></i><a href="#" class="sf zf">饭店刚开始就亏损，估计是方法上的错误</a></li>
777.             <li><i class="circle"></i><a href="#" class="sf zf">餐饮店刚开业没有人，这些方法可以帮你</a></li>
778.             <li><i class="circle"></i><a href="#" class="sf zf">餐饮小白能做炒饭外卖吗，掌握这些还是可以的</a></li>
779.           </ul>
780.         </div>
781.         <!-- 餐饮公司 -->
782.          <div class="cygs" id="cygs">
783.           <ul>
784.             <li><i class="circle"></i><a href="#" class="sf zf">自己开家寿司店怎么样，先看了这些再说</a></li>
785.             <li><i class="circle"></i><a href="#" class="sf zf">自己开一家烤肉店这些问题不得不考虑</a></li>
786.             <li><i class="circle"></i><a href="#" class="sf zf">火锅串串的特色有哪些，是什么样的？</a></li>
787.             <li><i class="circle"></i><a href="#" class="sf zf">烤肉店生意下滑的原因分析，原来都可以避免的问</a></li>
788.             <li><i class="circle"></i><a href="#" class="sf zf">重庆开串串香店需要具备哪些实力，开店成功经验</a></li>
789.             <li><i class="circle"></i><a href="#" class="sf zf">酸菜鱼店做营销，这几招你真的得知道</a></li>
790.             <li><i class="circle"></i><a href="#" class="sf zf">串串店开业活动这样做，好生意自然来</a></li>
791.           </ul>
792.         </div>
793.         </div>
794.         
795.         <!-- 图片部分 -->
796.         <div class="zh_pic" id="banner3">
797.           <div>
798.             <a href="#">
799.               <img src="img/zh1.jpg" alt="" class="active">
800.             </a>
801.             <a href="#">
802.               <img src="img/zh2.jpg" alt="">
803.             </a>
804.           </div>
806.           <div class="zhpic_title">
807.             <div>
808.               <span class="active" data-id="jy"></span>
809.               <span data-id="jhj"></span>
810.             </div>
811.           </div>
813.           <div>
814.             <div class="active" id="jy">九园包子</div>
815.             <div id="jhj">金海家港式肉蟹煲</div>
816.           </div>
818.         </div>
819.         
820.       </div>
821.       
822.       </div>
823.       <!-- 餐饮品牌点评 -->
824.       <div class="dp">
825.         <a href="#" class="sf dddf">餐饮品牌点评</a>
826.         <ul>
827.           <li><i class="circle"></i><a href="#" class="sf">了不起的快乐星汉堡</a></li>
828.           <li><i class="circle"></i><a href="#" class="sf">加盟鸡排店连锁有哪些？功夫鸡排加盟</a></li>
829.           <li><i class="circle"></i><a href="#" class="sf">做麻辣烫合作就选创新的蔬是，好收获</a></li>
830.           <li><i class="circle"></i><a href="#" class="sf">经验之谈，开快乐星汉堡店这几个问题</a></li>
831.           <li><i class="circle"></i><a href="#" class="sf">创业进行时，快乐星汉堡全程帮扶省心</a></li>
832.           <li><i class="circle"></i><a href="#" class="sf">开汉堡店有没有前景？快乐星汉堡的答</a></li>
833.           <li><i class="circle"></i><a href="#" class="sf">麻辣烫哪家好—蔬是不可错过的商机</a></li>
834.           <li><i class="circle"></i><a href="#" class="sf">天气不错，来快乐星汉堡总部一探究竟</a></li>
835.         </ul>
836.       </div>
837.     </div>
839.     <!-- 品牌排行检索 -->
840.     <div class="paijian">
841.       <!-- 排行1 -->
842.       <div class="ph1">
843.         <div class="ph11">
844.           <div>
845.             <img src="img/ph1.jpg" alt="">
846.           </div>
847.           <div>
848.             <ul>
849.               <li><a href="#" class="sf gd">牛肉火锅店加盟品牌排行</a></li>
850.               <li><a href="#" class="sf">有前景的冷门餐饮生意排行</a></li>
851.               <li><a href="#" class="sf">加盟自助餐哪个品牌好</a></li>
852.             </ul>
853.           </div>
854.         </div>
855.         <div class="ph12">
856.           <div>
857.             <img src="img/ph2.jpg" alt="">
858.           </div>
859.           <div>
860.             <ul>
861.               <li><a href="#" class="sf">成都好吃的火锅店排名</a></li>
862.               <li><a href="#" class="sf gd">鱼主题快餐加盟品牌</a></li>
863.               <li><a href="#" class="sf">小吃加盟店十佳排行榜</a></li>
864.             </ul>
865.           </div>
866.         </div>
867.       </div>
868.       
869.       <!-- 排行2 -->
870.       <div class="ph2">
871.         <div class="ph21">
872.           <div>
873.             <img src="img/ph3.jpg" alt="">
874.           </div>
875.           <div>
876.             <ul>
877.               <li><a href="#" class="sf">酸菜鱼加盟十大品牌</a></li>
878.               <li><a href="#" class="sf gd">全国麻辣烫知名度排名</a></li>
879.               <li><a href="#" class="sf">网红火锅店加盟十大品牌</a></li>
880.             </ul>
881.           </div>
882.         </div>
883.         <div class="ph22">
884.           <div>
885.             <img src="img/ph4.jpg" alt="">
886.           </div>
887.           <div>
888.             <ul>
889.               <li><a href="#" class="sf">火锅食材超市品牌排行</a></li>
890.               <li><a href="#" class="sf">自助烤肉加盟哪家靠谱</a></li>
891.               <li><a href="#" class="sf">韩国烤肉加盟店排行榜</a></li>
892.             </ul>
893.           </div>
894.         </div>
895.       </div>
896.       <!-- 块状导航 -->
897.       <div class="ph_nav">
898.         <div class="ph_nav1">
899.           <div>
900.             <img src="./img/ph_nav1.jpg" alt="">
901.             <br>
902.             <a class="sf">餐饮品牌</a>
903.           </div>
904.           <div>
905.             <img src="./img/ph_nav2.jpg" alt=""><br>
906.             <a class="sf">餐饮排行</a>
907.           </div>
908.           <div>
909.             <img src="./img/ph_nav3.jpg" alt=""><br>
910.             <a class="sf">餐饮专题</a>
911.           </div>
912.         </div>
913.         <div class="ph_nav2">
914.           <div>
915.             <img src="./img/ph_nav4.jpg" alt=""><br>
916.             <a class="sf" href="./cywd.html">餐饮问答</a>
917.           </div>
918.           <div>
919.             <img src="./img/ph_nav5.jpg" alt=""><br>
920.             <a class="sf">餐饮资讯</a>
921.           </div>
922.           <div>
923.             <img src="./img/ph_nav6.jpg" alt=""><br>
924.             <a class="sf">品牌资讯</a>
925.           </div>
926.         </div>
927.       </div>
928.     </div>
930.     <!-- 餐饮店面 -->
931.     <div class="dm">
932.       <div>
933.         <img src="./img/dm1.jpg" alt="">
934.         <div class="dm1_w">小猪查理川式烤肉</div>
935.       </div>
937.       <div>
938.         <div class="dm21">
939.           <div class="dm211">
940.             <a href="#"><img src="./img/dm2.jpg" alt=""></a>
941.             <div class="dm211_w">爷爷那辈卤味火锅面图</div>
942.           </div>
943.          
944.           <div class="dm212">
945.             <a href="#"><img src="./img/dm3.jpg" alt=""></a>
946.             <div class="dm212_w">豪渝火锅</div>
947.           </div>
948.         </div>
949.         <div class="dm22">
950.           <a href="#"><img src="./img/dm4.jpg" alt=""></a>
951.           <div class="dm22_w">朝天门火锅店面图片</div>
952.         </div>
953.       </div>
954.       <div>
955.         <div class="dm31">
956.           <a href="#"><img src="./img/dm5.jpg" alt=""></a>
957.           <div class="dm31_w">朝天门火锅店面图片</div>
958.         </div>
959.         <div class="dm32">
960.           <h3>餐饮店面</h3>
961.           <h4>SHOW >>></h4>
962.         </div>
963.       </div>
964.     </div>
966.     <!-- 店铺标识 -->
967.     <div class="db">
968.       <a href="#"><img src="./img/db1.jpg" alt=""></a>
969.       <a href="#"><img src="./img/db2.jpg" alt=""></a>
970.       <a href="#"><img src="./img/db3.jpg" alt=""></a>
971.       <a href="#"><img src="./img/db4.jpg" alt=""></a>
972.       <a href="#"><img src="./img/db5.jpg" alt=""></a>
973.       <a href="#"><img src="./img/db6.jpg" alt=""></a>
974.       <a href="#"><img src="./img/db7.jpg" alt=""></a>
975.       <a href="#"><img src="./img/db8.jpg" alt=""></a>
976.       <a href="#"><img src="./img/db9.jpg" alt=""></a>
977.       <a href="#"><img src="./img/db10.jpg" alt=""></a>
978.       <a href="#"><img src="./img/db11.jpg" alt=""></a>
979.       <a href="#"><img src="./img/db12.jpg" alt=""></a>
980.       <a href="#"><img src="./img/db13.jpg" alt=""></a>
981.       <a href="#"><img src="./img/db14.jpg" alt=""></a>
982.       <a href="#"><img src="./img/db15.jpg" alt=""></a>
983.       <a href="#"><img src="./img/db16.jpg" alt=""></a>
984.       <a href="#"><img src="./img/db17.jpg" alt=""></a>
985.       <a href="#"><img src="./img/db18.jpg" alt=""></a>
986.       <a href="#"><img src="./img/db19.jpg" alt=""></a>
987.       <a href="#"><img src="./img/db20.jpg" alt=""></a>
988.       <a href="#"><img src="./img/db21.jpg" alt=""></a>
989.       <a href="#"><img src="./img/db22.jpg" alt=""></a>
990.       <a href="#"><img src="./img/db23.jpg" alt=""></a>
991.       <a href="#"><img src="./img/db24.jpg" alt=""></a>
992.     </div>
994.     <!-- 餐饮信息和特色美食 -->
995.     <div class="cante">
996.       <!-- 餐饮信息 -->
997.       <div class="cyxx">
998.         <!-- 餐饮人物 -->
999.         <div class="cyrw">
1000.           <p><a href="#" class="sf dddf">餐饮人物</a></p>
1001.           <a href="#"><img src="./img/cyrw.jpg" alt=""></a>
1002.           <ul>
1003.             <li><i class="circle"></i><a href="./jjnp.html" class="sf">金记酿皮创始人金明义：用一个金字</a></li>
1004.             <li><i class="circle"></i><a href="#" class="sf">苦练内功厚积薄发，黄门老灶逆势进</a></li>
1005.             <li><i class="circle"></i><a href="#" class="sf">82岁必胜客联合创始人弗兰克·卡尼逝</a></li>
1006.             <li><i class="circle"></i><a href="#" class="sf">南城香创始人汪国玉介绍</a></li>
1007.             <li><i class="circle"></i><a href="#" class="sf">N多寿司创始人董玉友</a></li>
1008.             <li><i class="circle"></i><a href="#" class="sf">味千中国衰落：5位60岁老人决定这碗</a></li>
1009.           </ul>     
1010.         </div>
1011.         <!-- 餐饮展会 -->
1012.         <div class="cyzh">
1013.           <p><a href="#" class="sf dddf">餐饮展会</a></p>
1014.           <a href="#"><img src="./img/cyzh.jpg" alt=""></a>
1015.           <ul>
1016.             <li><i class="circle"></i><a href="#" class="sf">2022内蒙古连锁加盟创业项目展览会</a></li>
1017.             <li><i class="circle"></i><a href="#" class="sf">解锁“懒人福音”，北京餐饮博览会</a></li>
1018.             <li><i class="circle"></i><a href="#" class="sf">第十二届北京国际酒店、餐饮及食品</a></li>
1019.             <li><i class="circle"></i><a href="#" class="sf">SIAL 国际食品展（上海）2022年5月</a></li>
1020.             <li><i class="circle"></i><a href="#" class="sf">2022第十二届北京国际酒店、餐饮及</a></li>
1021.             <li><i class="circle"></i><a href="#" class="sf">2022第十九届北京国际食品餐饮博览</a></li>
1022.           </ul>     
1023.         </div>
1024.         <!-- 餐饮加盟资讯 -->
1025.         <div class="cyjmzx">
1026.           <p><a href="#" class="sf dddf">餐饮加盟资讯</a></p>
1027.           <a href="#"><img src="./img/cyjmzx.jpg" alt=""></a>
1028.           <ul>
1029.             <li><i class="circle"></i><a href="#" class="sf">牛排火锅哪家好吃，大家一起涮庖丁</a></li>
1030.             <li><i class="circle"></i><a href="#" class="sf">佬农王生态稻花饭，线上私厨，只味</a></li>
1031.             <li><i class="circle"></i><a href="#" class="sf">康韵唐朝唐风火锅加盟</a></li>
1032.             <li><i class="circle"></i><a href="#" class="sf">华阳串根香火锅串串，使用一次性锅</a></li>
1033.             <li><i class="circle"></i><a href="#" class="sf">口水鸡排，打造全新多料鸡排</a></li>
1034.             <li><i class="circle"></i><a href="#" class="sf">牛王堡，手作牛肉汉堡</a></li>
1035.           </ul>     
1036.         </div>
1037.       </div>
1039.       <!-- 特色美食 -->
1040.       <div class="tsms">
1041.         <p><a href="#" class="sf dddf">特色美食</a></p>
1042.         <ul>
1043.           <li><i class="circle"></i><a href="#" class="sf">开鱼火锅店如何把生意做好</a></li>
1044.           <li><i class="circle"></i><a href="#" class="sf">火锅涮菜多长时间才合适</a></li>
1045.           <li><i class="circle"></i><a href="#" class="sf">几种火锅底料的家常做法</a></li>
1046.           <li><i class="circle"></i><a href="#" class="sf">健康餐饮风口加速，麻辣烫要如何把握</a></li>
1047.           <li><i class="circle"></i><a href="#" class="sf">开酸菜鱼店亏本是因为什么原因呢？</a></li>
1048.           <li><i class="circle"></i><a href="#" class="sf">经营一家火锅串串店不可忽视的方面有哪</a></li>
1049.           <li><i class="circle"></i><a href="#" class="sf">烤鱼店开业活动怎么搞人气旺，几招教你</a></li>
1050.           <li><i class="circle"></i><a href="#" class="sf">如何选好串串香店地址让你的店铺人气更</a></li>
1051.           <li><i class="circle"></i><a href="#" class="sf">开一家饭店推新品千万别犯的错误都在这</a></li>
1052.           <li><i class="circle"></i><a href="#" class="sf">广东经典名菜：砂锅焗鱼头煲做法，浓郁</a></li>
1053.         </ul>     
1054.       </div>
1055.     </div>
1056.     </div>

复制代码

总结

计划一个样式雅观又人性化的网页，除了具备踏实的专业知识，还需具备美学和人机工程学等相干知识，良好的网页应具备以下几个特点:
1.简便实用

只管以最高服从的方式将用户所要想得到的信息传送给他就是最好的，要去掉全部的冗余的东西；
2.使用方便

要满足使用者的要求，网页恰当使用，表现出其功能美；
3.团体性好

围绕一个同一的目标计划，夸大团体的功能性；
4.形象突出

只管符合网页美的标准，可以大概使网站的形象得到最大限度的提拔，寻求雅俗共赏。页面用色和谐，布局符合情势美的要求：布局有条理，充实使用美的情势，使网页富有可欣赏性，进步档次。
5.交互式强

发挥网络的上风，费经心机使每个使用者都到场到此中来。
更多保举
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大门生结业计划辅导、期末大作业辅导、模板源码、技能咨询等，有爱好的接洽我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页计划 CSDN博客
html+css+js网页计划 CSDN博客
html+css+js网页计划 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完备代码，主题涵盖30+种范例: