👨🎓 The compilation of static websites mainly uses HTML DIV+CSS JS to complete the page layout design 👩🎓, The commonly used web design software includes Dreamweaver, EditPlus, HBuilderX, VScode, Webstorm, Animate, etc. DW is the most used. Of course, the front-end Html5 code written by different software is the same. This web page is suitable for modifying into various types of product display web pages, such as food, tourism, photography, movies, music and other topics. I hope it can be helpful to you.
🎀 Wonderful column recommendation 👇🏻👇🏻👇🏻
🧡 [author's homepage—— 🔥 Get more high-quality source code]
🧡 [web front end final assignment—— 🔥🔥 Excellent practical cases of the completed project (1000 sets)]
1, Website title 👨🎓
🥧 Food website introduction 🍰 Dessert cake 🦐 Local food and snack culture 🍺 Catering culture, website design and production.
2, Website description ✍️
🍧 The food theme website mainly displays all kinds of food, so that visitors can clearly understand the details of all kinds of food, which is convenient for visitors to choose. There is a food category on the left side of the module. Users can choose their favorite types. When clicking on the category, various kinds of food under the category will appear on the right side. Users can click on the food they are interested in to see its specific information. Its specific information includes ingredients, origin and some functions, so that users have a comprehensive understanding of the food.
3, Website introduction 📚
📔 Website layout: it is planned to adopt the current mainstream floating web page layout structure that is compatible with major mainstream browsers and has stable display effect.
📓 Website program: it is planned to use the latest web page programming language HTML5+CSS3+JS to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers on the market, which has achieved the effect that you can see the website immediately after opening it.
📘 Website materials: it is planned to collect good-looking picture materials from major platforms, carefully select pictures suitable for the style of web pages, and then use PS to make pictures suitable for the size of web pages.
📒 In terms of website files: the types of website system files include: html web page structure files, css web page style files, js web page special effects files, images web page image files;
📙 Web page editing: the code of web page works is simple, and any HTML editing software (such as Dreamweaver, HBuilder, vscade, Sublime, Webstorm, Text, Notepad++ and other HTML editing software) can be used to run, modify and edit.
Of which:
(1) 📜 HTML files include: index.html is the home page, and other html is the secondary page;
(2) 📑 css files include: css all page styles, text scrolling, image zooming, etc;
(3) 📄 js files include: js to achieve dynamic rotation effects, form submission, click events, etc. (js code is used in individual web pages).
4, Website effect 🌐
5, Code implementation 🪓
HTML structure code 🧱
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Chopsticks dance|Chopsticks dance creative side bar|Noodle & Pastries|noodle|delicious food|Restaurant|Junwei Catering Management Co., Ltd|Official website</title>
<meta name="keywords" content="Chopsticks dance,Chopsticks dance creative side bar,Chopsticks dance join,Franchise chain,Investment Promotion Agency,Catering cuisine,Pasta cooperation" />
<meta name="description" content="Pasta is the first choice for investment in the catering industry, and its investment advantages of high return and low risk are beyond doubt. Chopsticks dance creative side bar,It has created a comprehensive and three-dimensional catering entrepreneurship service platform for the majority of entrepreneurs, and led many franchisees to achieve the success of independent entrepreneurship in life." />
<link rel="stylesheet" href="style/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="js/iepng.js"></script>
<script type="text/javascript">
EvPNG.fix('body,div,ul,li,ol,dl,dt,dd,img,input,span,p,h1,h2,h3,h4,a,strong,textarea');
</script>
<![endif]-->
<script type="text/javascript" src="js/banner.js" ></script>
</head>
<body>
<div id="header">
<div class="header_in">
<h1><a href="#"> chopsticks dance</a></h1>
<ul class="nav">
<li><a href="#"> Group Introduction</a></li>
<li><a href="#"> brand gene</a></li>
<li><a href="#"> brand advantages</a></li>
<li><a href="#"> food world</a></li>
<li><a href="#"> investment attraction zone</a></li>
<li><a href="#"> contact us</a></li>
</ul>
<dl class="tel">
<dt>Hotline:</dt>
<dd><img src="images/tel.png" width="182" height="22" alt="0335-7528866" /></dd>
</dl>
</div>
</div>
<div style="width:1200px;position:relative;height:0;overflow:hidden;margin:auto;"></div>
<div id="shutter" class="shutter" >
<ul>
<li><a href="#"><img src="images/banner4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/banner1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/banner2.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item">
<dl class="item_01">
<dt><img src="images/c1.jpg" width="278" height="228" alt="Colorful mixed noodles Reference price" /></dt>
<dd class="item">Colorful mixed noodles<a class="fcl" href="#"> reference price </a>< /dd>
<dd class="item_sub">Chopsticks dance-Brand project</dd>
</dl>
<dl class="item_02">
<dt>Fruit and vegetable nutrition<br />Noodle series in high soup</dt>
<dd><img src="images/c2.jpg" width="180" height="180" alt="Noodle soup with fresh shrimp and hibiscus" /></dd>
</dl>
<dl class="item_02" style="position: absolute;left:660px;">
<dt>Coarse grain<br />Health preserving noodles series</dt>
<dd><img src="images/c3.jpg" width="180" height="180" alt="Noodles with pork ribs soup" /></dd>
</dl>
<dl class="item_02" style="position: absolute;left:1020px;">
<dt>delicate<br />Salad series</dt>
</dl>
<dl class="item_02" style="position: absolute;left:300px;top:200px;">
<dd><img src="images/c4.jpg" width="180" height="180" alt="Noodle soup with fresh shrimp and hibiscus" /></dd>
</dl>
<dl class="item_02" style="position: absolute;left:480px;top:200px;">
<dt>Colorful<br />Exquisite mixing noodles</dt>
<dd><img src="images/c5.jpg" width="180" height="180" alt="Noodle soup with fresh shrimp and hibiscus" /></dd>
</dl>
<dl class="item_02" style="position: absolute;left:840px;top:200px;">
<dt>cross the bridge<br />Pan fried noodles</dt>
<dd><img src="images/c6.jpg" width="180" height="180" alt="Noodle soup with fresh shrimp and hibiscus" /></dd>
</dl>
</div>
<div id="show">
<div class="left_s">
<h3><a href="#"> product display</a></h3>
<ul>
<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/left_s.jpg" alt="" /></a></li>
</ul>
</div>
<div class="right_s">
<h3><a href="#"> store display</a></h3>
<ul>
<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/right_s.jpg" alt="" /></a></li>
</ul>
</div>
</div>
<div id="squeezebox">
<div class="one">
<h3><a href="#"> joining dynamics</a></h3>
<div class="one_in">
<p class="one_txt">
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
</p>
<p class="one_txt">
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
</p>
<p class="one_txt">
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
</p>
<p class="one_txt">
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
<a href="#"> warm congratulations to Mr. Huang on his successful signing [06-03]</a>
</p>
</div>
</div>
<div class="two">
<h3><a href="#"> brand story</a></h3>
<p class="two_img"><a href="#"><img src="images/ppgs_1.jpg" alt="" /></a></p>
<p class="two_txt">According to legend, Emperor Qianlong made a journey to the south in micro clothes, and the journey was tiring,
I passed a noodle shop and went into the shop to satisfy my hunger. Unexpectedly, this people
The delicious food in this small shop surprised him so much, especially these seven
Colorful noodles look colorful and smooth to eat
. He called the boss to ask the mystery. The boss saw his clothes and hit him
Pretending to be modest, he told Qianlong the reason for this colorful face
Come on. Originally, this noodle shop can be on a piece of noodles
Make different colors, like notes dancing on the surface
. This kind of colored noodles is extracted from fresh fruits and vegetables
Vitamins, dietary fiber and white flour are mixed and processed.
Pick up colorful noodles with chopsticks and eat them with secret sauce
The aftertaste is endless. Picking up noodles feels like a girl
Dancing! Emperor Qianlong clapped his hands and applauded immediately
Wave a pen and give the word "chopsticks dance"!<br />
China has a population of 1.3 billion and a pasta market of 800 million. Noodles as
Folk recipes are deeply loved by Chinese people from the north
It seems that almost everyone in the South doesn't like noodles. Junwei group
After several twists and turns, the headquarters was handed down from the 24th generation of the imperial dining room
Get the formula, aim at the Chinese pasta market, in the traditional noodles
Improved on the basis of<a href="#"> View Details</a>
</p>
</div>
<div class="three"><h3><a href="#">Group news</a></h3><p><a href="#"><img src="images/jtxw_1.jpg" alt="" /></a></p></div>
</div>
<div id="footer">
<div class="sub_nav">
<a href="#"> official homepage </a>|
<a href="#"> industry news </a>|
<a href="#"> product advantages </a>|
<a href="#"> Project advantages </a>|
<a href="#"> contact us</a>
</div>
<div class="footer_in">
<div class="footer_c">
<p class="footer_logo"><img src="images/tel_1.jpg" width="370" height="102" alt="" /></p>
<p>Address: 9th floor, Fanya building, Haigang District, Qinhuangdao, Hebei Province</p>
<p>Junwei catering group is committed to<a href="#">Catering franchise</a> | <a href="#">Snack Alliance</a> | <a href="#">Restaurant franchise</a> | <a href="#"> catering chain franchise</a></p>
<p><a href="#">Chopsticks dance creative noodles bar join</a> | <a href="#">Pasta Alliance</a> | <a href="#"> Junwei catering joined </a></p>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/kzw100.js" ></script>
<script type="text/javascript">
<!--
var shutterH = new Hongru.shutter.init('shutterH',{
id:'shutter'
});
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
if (isIE){
if (isIE6!="ie6"){
changecss();
window.onresize = function(){
changecss();
}
}
}
if (!isIE){
changecss();
window.onresize = function(){
changecss();
}
}
function changecss(){
var kuandu = document.documentElement.clientWidth;
var shutterW=$("#shutter").width();
var left=(kuandu-shutterW)/2;
$("#shutter").css("left",left);
}
// -->
</script>
CSS style code 💒
@charset "utf-8";
/* CSS Document */
html{overflow-y:auto;overflow-x:hidden;_overflow-y:auto;_overflow-x:auto;}
html,body,div,p,h1,h2,h3,h4,input,ul,li,ol,dl,dt,dd,span,img,a{ padding:0; margin:0; list-style:none; border:0;}
body{font-size:12px; color:#3e3e3e; font-family:"Microsoft YaHei","Microsoft YaHei ","SimSun","Song typeface";background:#00a742 ;}
a{ color:#fff; text-decoration:none;}
a:hover{ text-decoration:underline;}
/*header*/
#header{ overflow:hidden;padding-bottom: 30px; margin: auto; background:#00a742 url(../images/water.png) no-repeat center top;_background:#00a742 url(../images/water.jpg) no-repeat center 4px; }
.header_in{ width:1200px;margin:auto;}
.header_in h1{ width:332px;height:108px;background: url(../images/logo.png) no-repeat right bottom;text-indent: -9999px;padding-top:46px;padding-left:50px;float:left;}
.header_in h1 a{ display:block;width:332px;height:108px;}
.header_in .nav{ float:left;padding-top:92px;padding-left:136px;}
.header_in .nav li{ float:left;padding:0 12px;font-size:14px;font-weight:300;}
.header_in .tel{ float:left;padding-left:148px;padding-top:26px;font-size:14px;font-weight:300;}
.header_in .tel dt{ float:left;color:#fff;}
.header_in .tel dd{ float:left;}
/*banner*/
#banner{ overflow:hidden;width: 100%;margin:auto; position: relative;}
#banner ul{ overflow:hidden;width:100%;margin:auto;text-align:center;}
#banner ul li{ display:none;width:100%;height:454px;text-align:center;}
#banner ul li a{ display:block;width:2000px;height:454px;margin:auto;position:relative;text-indent: -999999px;}
#banner ul li.cur{ display:block;}
#banner ul li.cur a img{ position:absolute;left:0;}
.shutter{position:relative;overflow:hidden;height:454px;width:2000px;margin:auto;}
.shutter li{position:absolute;left:0;top:0;}
.shutter-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
.shutter-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
/*item*/
8, More dry goods 🎁
1. If my blog is helpful to you and you like my blog content, please“ 👍 Like "“ ✍️ Comments "“ 💙 Collect "one button three times!"!
two 💗 [ 👇🏻👇🏻👇🏻 Follow me | get more source code | high quality articles] take you to learn various front-end plug-ins, 3D cool effects, image display, text effects, as well as whole station templates, college students' Graduation HTML templates, final homework templates, etc! "There are many front-end developers here to discuss front-end Node knowledge and learn from each other"!
3. Technical issues related to the above content 💌 Welcome to exchange and study together 👇🏻👇🏻👇🏻🔥
