current position:Home>Design and implementation of Web college students' Web homework finished ~ gourmet catering website (HTML + CSS + JavaScript)

Design and implementation of Web college students' Web homework finished ~ gourmet catering website (HTML + CSS + JavaScript)

2021-08-22 22:52:44 @. code out the future

HTML Final homework ~ Food and beverage student web design homework ~ HTML+CSS+JS Web design final course assignment ~ web Front end development technology ~ web Course design, web page planning and design ~Web College Students' web products

Towards the end of the term , You're still working on HTML Web design homework , The teacher's homework requirements are big ?HTML There is no way to start web homework ? The total number of pages required is too much ? No suitable template ? And so on and so forth . The problem you want to solve , In this blog post, you can basically meet your needs ~

original HTML+CSS+JS Page design , web College students web design homework source code ,~ This is a good web page making , Smart picture , Very suitable for beginners to learn to use .

Introduction to works

A red atmosphere catering service , Food and beverage industry , Fast food distribution , Canteen catering management company website responsive dream weaving template .

This work is the subject matter of students' personal home page design , The code is simple student level html+css Layout making , The whole work consists of the home page 、 About us 、 Company business 、 Specials 、 news information 、 Contact us common 5 Page composition , After downloading the works, you can use any HTML Edit software ( for example :DW、HBuilder、NotePAD Vscode All editors are available )

The layout of web works : The overall layout of the web page is LOGO、 Navigation 、 Main content layout . There are many layouts of sub pages , Interest content uses picture list layout , The score page inserts a table , Contact us to set the left alignment using the image alignment .

Technical aspects of web works : Use CSS Made a background picture of the web page 、 Color change effect of mouse passing and selected navigation 、 Underline, etc . The home page has made a message form , At the same time, it is easy to use JavaScript Made a form to judge ( The form cannot be empty when submitting )

One 、 Demonstration of works

1. home page

 Insert picture description here

2. About us

 Insert picture description here

3. Company business

 Insert picture description here

4. Specials

 Insert picture description here

5. news information

 Insert picture description here

6. Contact us

 Insert picture description here

Two 、 Code directory

 Insert picture description here

3、 ... and 、 Code implementation

<!DOCTYPE html>
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="cleartype" content="on" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      ( Adaptive mobile version ) Responsive catering investment management enterprise dream weaving template 
       Download the website template of red high-end food and catering group  - AB Template net 
    <meta name="keywords" content=" Catering investment dream weaving template , Food and beverage website template " />
    <meta name="description" content="( Adaptive mobile version ) Responsive catering investment management enterprise dream weaving template   Download the website template of red high-end food and catering group  - AB Template net " />
    <meta name="author" content="order by " />
    <link rel="stylesheet" type="text/css" href="skin/css/font_409178_1kd7th82irv34n29.css" />
    <link rel="stylesheet" type="text/css" href="skin/css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="skin/css/lhcommon.css" />
    <style> .dn {
      display: none; } </style>
    <header class="lh-header">
      <a href="/" class="lh-logo"><img src="picture/logo.png" /></a>
      <ul class="lh-header-nav lh-flex">
        <li class="active">
          <a href="/">
            <h2> home page </h2>
        <li class="">
          <a href="/a/about/">
            <h2> About us </h2>
        <li class="">
          <a href="/a/yewu/">
            <h2> Company business </h2>
        <li class="">
          <a href="/a/caipin/">
            <h2> Specials </h2>
        <li class="">
          <a href="/a/news/">
            <h2> news information </h2>
        <li class="">
          <a href="/a/contact/">
            <h2> Contact us </h2>
      <div class="lh-map-btn"><span></span></div>

    <footer class="lh-footer lh-section">
      <h2 class="lh-about-h2"><img src="picture/index-a7.png" /></h2>
      <h2 class="lh-wapAbout-h2"><img src="picture/wapindex-a7.png" /></h2>
      <div class="lh-footer-cont clearfix">
        <div class="lh-footer-l left">
          <h2 class="lh-fonts"> Nanjing XX catering company </h2>
          <ul class="lh-footer-item">
            <li><span> Head office address :</span> <em> Xuanwu Lake, Xuanwu District, Nanjing City, Jiangsu Province </em></li>
            <li><span> Company switchboard :</span> <em>400-888-8888</em></li>
            <li><span> email :</span> <em>[email protected]</em></li>
              <span> National Customer Service Hotline :</span> <b class="lh-fonts">400-888-8888</b ><i></i>
        <div class="lh-footer-r right">
          <a href="/" class="lh-footer-logo" ><img src="picture/footer-logo.png" /></a>
          <ul class="lh-footer-gz clearfix">
              <img src="picture/weixin1.jpg" />
              <h2> Mobile website </h2>
              <img src="picture/weixin2.jpg" />
              <h2> WeChat official account </h2>
          <div class="bshare-custom lh-footer-share">
            <a title=" Share the QQ Good friends " class="bshare-qqim iconfont icon-QQ"></a>
            <a title=" Share to wechat " class="bshare-weixin iconfont icon-icon-wx" ></a>
            <a title=" Share with Sina " class="bshare-sinaminiblog iconfont icon-xinlang" ></a>
      <ul class="lh-footer-nav">
        <li><a href="/a/about/"> About us </a></li>
        <li><a href="/a/yewu/"> Company business </a></li>
        <li><a href="/a/caipin/"> Specials </a></li>
        <li><a href="/a/news/"> news information </a></li>
        <li><a href="/a/contact/"> Contact us </a></li>
      <div class="lh-copy">
        <div class="lh-copy-cont clearfix">
            Copyright &copy; 2002-2021  XX catering Co., Ltd   copyright 
            <a href="" target="_blank" rel="nofollow" > Sue ICP12345678</a >
            <a href="/sitemap.xml" target="_blank">XML Map </a>
          <span>17 Template net </span>
    <script src="js/jquery.min.js"></script>
    <script src="js/plugin.js"></script>
    <script src="js/swiper-3.4.2.jquery.min.js"></script>
    <script src="js/lhpublic.js"></script>


Four 、 front end Zero basic entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )

Suitable for children's shoes from entry to advanced ~ send 1000 set HTML+CSS+JavaScript Template website
 Insert picture description here

# 5、 ... and 、 The source code for * ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

*1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduation template 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!

*3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

 Insert picture description here

6、 ... and 、 more HTML Final assignment article

1.HTML The students finish their homework at the end of the term ~html+css+javascript Imitation Dingdang movie online website ( The function is all ready )

2.HTML Final student homework ~html+css+javascript Cat's eye movie online website ( The function is all ready )

3.HTML Final student homework (9 set )html+css+javascript Imitation of Jingdong 、 Tmall 、 clothing 、 Major e-commerce templates ( University graduation project )

4.HTML Final homework ~ Pirate king Qiaoba special cartoon student web page setting homework source code (HTML+CSS+JavaScript)

5.HTML Final homework ~ be based on HTML+CSS+JavaScript Design and implementation of tourism website

6.HTML Web design final course assignment ~ Design and implementation of imitation Tencent game official website (HTML+CSS+JavaScript)

7.HTML Final homework ~ Imitation Xiaomi mall web design template (HTML+CSS+JavaScript)

8.HTML Final homework ~ Catering culture student web design homework (HTML+CSS+JavaScript)

9.HTML Student web design homework ~ Catering food hamburger enterprise website 6 Page with carousel (HTML+CSS+JavaScript)

10. university web Basic final assignment ~ Imitation excellent purchase page production (HTML+CSS+JavaScript)

11.HTML Web design and production homework - Make comics, Web Design 6 A page (HTML+CSS+JavaScript)

12.web Front end freshman training ~ Design and implementation of cartoon website (HTML+CSS+JavaScript)

13.web Web design final course assignment ~ Super high imitation hero League LOL Design and implementation of game official website (HTML+CSS+JavaScript)

14.HTML Final homework ~ Hotel website template (HTML+CSS+JavaScript)

15.HTML Student web design homework source code ~ Happy travel website design and Implementation (HTML Final homework )

16.HTML Olympic web page 5 Page culture ~ PE Students' web design homework

17.HTML My hometown Hangzhou web design homework source code (div+css)

18.HTML Web design final course assignment ~ Anime cherry balls 5 Page table div+css Student web design homework source code

19.HTML Student web design homework finished ~ Design and implementation of cosmetics official website (HTML+CSS+JS) common 8 A page

20.HTML College students animation web design homework source code ~ Naruto animation 7 Page with special effects and carousel (HTML+CSS+JavaScript)

21. A complete set of imitation pull hook nets HTML Static web page template ( contain 38 Independent HTML)

22.HTML Final assignment course design big assignment ~ Environmental protection student web design homework source code (HTML+CSS)

7、 ... and 、 More confession source code

100 Paragraph confession source code demonstration address

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.

Random recommended