A wonderful column recommendation
About the author: A technical blogger who loves to turn logical thinking into code
Author’s homepage: [Homepage–? Get more high-quality source code]
Web front-end major homework: 【Practice cases of high-quality project projects (1000 sets) 】
Programmer’s interesting confession method: 【HTML Tanabata Valentine’s Day Confession Web Page Production (110 sets) 】
Super cool Echarts large-screen visualization source code: [ echarts large-screen display big data platform visualization (150 sets) 】
Free and practical WEB front-end learning guide: [web front-end zero basic to advanced learning video tutorial 120G dry goods sharing]
About the author: He has successively served as R&D engineer, technical team leader, and teaching director; he was awarded CSDN’s Top Ten Blog Stars twice in 2016 and 2020. Ten years of cold ice, it is difficult to cool the blood; many years have passed, and after changes, things have changed. However, the exploration and pursuit of technology never stops. Insist on originality, love to share, keep the original intention, carry on the past and open up the future!
Article directory
- 1. ?Website title
- 2. Website description
- 3. Introduction to the website
- 4. The effect of the website
- 5. Code implementation
-
- HTML structure code
- CSS style code
- 6. How to make learning no longer blind
- 7. More dry goods
1. ?Website title
gourmet web page introduction, dessert cake, local gourmet snack culture,
2. Website description
Gourmet theme website mainly displays various delicacies, so that viewers can clearly understand the detailed information of various delicacies, and it is convenient for visitors to choose. There is a food category on the left side of the module. Users can choose their favorite category. After clicking on the category, all kinds of food under this category will appear on the right side. Users can click on the food they are interested in to see it specific information. Its specific information includes ingredients, origin and some of its functions, so that users have a comprehensive understanding of the food.
? Static website writing mainly uses HTML DIV + CSS JS to complete page layout design? Commonly used web design software includes Dreamweaver, EditPlus, HBuilderX, VScode, Webstorm, Animate, etc. DW is the most used one. Of course, the front-end Html5 code written by different software is consistent. This webpage is suitable for modification into various types of product display webpages, such as food, travel, photography, movies, music and other themes. I hope to be helpful.
3. Website introduction
Website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has stable display effects.
Web site program: It is planned to use the latest web programming language HTML5 + CSS3 + JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers currently on the market, so that the website can be seen immediately after opening.
Website materials: plan to collect good-looking picture materials from various platforms, carefully select pictures suitable for the style of the webpage, and then use PS to make pictures suitable for the size of the webpage.
Website files: The types of website system files include: html web page structure files, css web page style files, js web page special effect files, images web page picture files;
Webpage editing: The code of the webpage works is simple, and any HTML editing software can be used (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad + + , etc. Any html editing software for operation, modification and editing).
in:
(1) The html file contains: index.html is the home page, and other html is the second-level page;
(2) The css file contains: all css page styles, text scrolling, image zooming, etc.;
(3) The js file includes: js to achieve dynamic carousel 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> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="renderer" content="webkit"/> <meta name="force-rendering" content="webkit"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <title>Japanese food and catering company website html template homepage - template home http://www.cssmoban.com</title> <link rel="stylesheet" href="css/swiper.min.css" /> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="bgwrap"> <div class="w1200"> <div class="header clearfix"> <ul class="ul1 fl"> <li><a href="index">Website Homepage</a></li> <li><a href="">About Us</a></li> <li><a href="">Delicious Dishes</a></li> <li><a href="case.html">Store Showcase</a></li> \t\t\t\t\t</ul> <a href="" class="logo"><img src="picture/logo.png"/></a> <ul class="ul2 fr"> <li><a href="">Investment Cooperation</a></li> <li><a href="">Partner style</a></li> <li><a href="news.html">News</a></li> <li><a href="details.html">News content</a></li> \t\t\t\t\t</ul> </div> </div> <div class="box"> <div class="banner"> <ul class="bannerfix slides clearfix"> <li><img class="bimg" src="picture/banner.jpg" /></li> <li><img class="bimg" src="picture/banner.jpg" /></li> <li><img class="bimg" src="picture/banner.jpg" /></li> \t\t\t\t\t</ul> <div class="bamnline"><span></span></div> </div> <div class="index-sec1 clearfix"> <div class="sec1-left fl"> <div class="title clearfix"> <p class="p2">Brand Introduction</p> <p class="p1">Brand introduction</p> </div> <div class="video-kuai"> <div class="video-tu"> <img src="picture/tu3.jpg"/> </div> <div class="video-cont"> <video src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls="controls"> </video> <i class="close">×</i> </div> </div> </div> <div class="sec1-right fr"> <ul class="clearfix"> <li> <a href=""> <p class="p1">XX Catering Group was founded in <b></b></p> <p class="p2"><strong class="strong1" >2010</strong><i>year</i></p> </a> \t\t\t\t\t\t\t</li> <li> <a href=""> <p class="p1">Have direct sales store operation experience<b></b></p> <p class="p2"><strong class="strong2" >12</strong><i>years</i></p> </a> \t\t\t\t\t\t\t</li> <li> <a href=""> <p class="p1">Group brand projects<b></b></p> <p class="p2"><strong class="strong3" >7</strong><i></i></p> </a> \t\t\t\t\t\t\t</li> <li> <a href=""> <p class="p1">Group cooperative franchisee<b></b></p> <p class="p2"><strong class="strong4" >1000</strong><i> + </i></p> </a> \t\t\t\t\t\t\t</li> \t\t\t\t\t\t</ul> <div class="div1"> <p class="p3">XX Japanese Cuisine <span>about us</span></p> <p class="p4"> XX Japanese Cuisine was founded in 2010. It has 30 years of experience in operating direct-sale stores and has always carried out business Healthy environmental protection concept. There are more than 120 special dishes prepared for customers, which are divided into raw fish bones Body, appetizers, sushi (handmade nigiri sushi, rolled Hana sushi/hand rolled sushi, broiled sushi), Japanese style There are ten types of sukiyaki, barbecue, frying, salad, rice, noodles, and drinks. XX Japanese cuisine will The combination of orthodox Japanese catering and culture forms a unique catering model to meet the different needs of different consumer groups. \t\t\t\t\t\t\t</p> <div class="clearfix"> <a href="" class="more">view more + </a> </div> <p class="p5">400-1234-566</p> <p class="p6">Need our help? Give us a call or schedule a call</p> </div> \t\t\t\t\t\t </div> </div> <div class="index-sec2"> <div class="w1200"> <div class="title title2"> <p class="p2">Dishes display</p> <p class="p1">メニューDisplay</p> </div> <div class="sec2gun"> <div class="bd"> <ul class="picList clearfix"> <li> <a href=""> <figure><img src="picture/tu2.jpg"/></figure> <figcaption></figcaption> <p class="p1">より多くのシリーズ</p> <p class="p2">More series</p> </a> \t\t\t\t\t\t\t\t\t\t</li> <li> <a href=""> <figure><img src="picture/tu2.jpg"/></figure> <figcaption></figcaption> <p class="p1">より多くのシリーズ</p> <p class="p2">More series</p> </a> \t\t\t\t\t\t\t\t\t\t</li> <li> <a href=""> <figure><img src="picture/tu2.jpg"/></figure> <figcaption></figcaption> <p class="p1">より多くのシリーズ</p> <p class="p2">More series</p> </a> \t\t\t\t\t\t\t\t\t\t</li> <li> <a href=""> <figure><img src="picture/tu2.jpg"/></figure> <figcaption></figcaption> <p class="p1">より多くのシリーズ</p> <p class="p2">More series</p> </a> \t\t\t\t\t\t\t\t\t\t</li> \t\t\t\t\t\t\t\t\t\t <li> <a href=""> <figure><img src="picture/tu2.jpg"/></figure> <figcaption></figcaption> <p class="p1">より多くのシリーズ</p> <p class="p2">More series</p> </a> \t\t\t\t\t\t\t\t\t\t</li> <li> <a href=""> <figure><img src="picture/tu2.jpg"/></figure> <figcaption></figcaption> <p class="p1">より多くのシリーズ</p> <p class="p2">More series</p> </a> \t\t\t\t\t\t\t\t\t\t</li> <li> <a href=""> <figure><img src="picture/tu2.jpg"/></figure> <figcaption></figcaption> <p class="p1">より多くのシリーズ</p> <p class="p2">More series</p> </a> \t\t\t\t\t\t\t\t\t\t</li> \t\t\t\t\t\t\t\t\t \t\t\t\t\t\t\t\t\t</ul> </div> <div class="hd"> <span class="prev"></span> <span class="next"></span> </div> </div> <a href="" class="more">view more + </a> </div> </div> <div class="index-sec3"> <div class="tit"> <div class="clearfix w1200"> <p class="p1">Cumulative</p> <p class="p2">More than 100 stores<span>case display</span></p> </div> <p class="p3">Certificate of quality service</p> </div> <div class="sec3-hdul"> <ul class="clearfix"> <li class="on"> <a href=""> <img src="picture/i1.png" alt="" class="fl" /> <div class="fl"> <p class="p2">Store display case</p> <p class="p3">Store display ケース</p> </div> </a> \t\t\t\t\t\t\t\t</li> <li> <a href=""> <img src="picture/i1.png" alt="" class="fl" /> <div class="fl"> <p class="p2">Hot on-site demonstration</p> <p class="p3">Explosion scene display</p> </div> </a> \t\t\t\t\t\t\t\t</li> \t\t\t\t\t\t\t</ul> </div> <div class="sec3-box"> <div class="box on"> <div class="box1"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img data-src="picture/tu9.jpg" class="swiper-lazy"> </div> <div class="swiper-slide"> <img data-src="picture/tu9.jpg" class="swiper-lazy"> </div> <div class="swiper-slide"> <img data-src="picture/tu9.jpg" class="swiper-lazy"> </div> <div class="swiper-slide"> <img data-src="picture/tu9.jpg" class="swiper-lazy"> </div> \t\t\t\t\t\t\t\t\t <div class="swiper-slide"> <img data-src="picture/tu9.jpg" class="swiper-lazy"> </div> </div> <div class="swiper-pagination"> \t\t\t\t\t\t\t\t \t </div> <div class="btnwrap"> <div class="swiper-button-prev"><img src="picture/prev.png"/></div> <div class="swiper-button-next"><img src="picture/next.png"/></div> </div> </div> </div> \t\t\t\t\t </div> <div class="sec3tu"> <ul class="clearfix"> <li> <a href=""> <figure><img src="picture/tu4.png"/></figure> <figcaption> <p class="p1">Centre mind is also known as Zen mind, which refers to a quiet and peaceful state of mind</p> <div class="clearfix"> <span>view more</span> <i></i> </div> </figcaption> </a> \t\t\t\t\t\t\t</li> <li> <a href=""> <figure><img src="picture/tu4.png"/></figure> <figcaption> <p class="p1">Centre mind is also known as Zen mind, which refers to a quiet and peaceful state of mind</p> <div class="clearfix"> <span>view more</span> <i></i> </div> </figcaption> </a> \t\t\t\t\t\t\t</li> <li> <a href=""> <figure><img src="picture/tu4.png"/></figure> <figcaption> <p class="p1">Centre mind is also known as Zen mind, which refers to a quiet and peaceful state of mind</p> <div class="clearfix"> <span>view more</span> <i></i> </div> </figcaption> </a> \t\t\t\t\t\t\t</li> <li> <a href=""> <figure><img src="picture/tu4.png"/></figure> <figcaption> <p class="p1">Centre mind is also known as Zen mind, which refers to a quiet and peaceful state of mind</p> <div class="clearfix"> <span>view more</span> <i></i> </div> </figcaption> </a> \t\t\t\t\t\t\t</li> \t\t\t\t\t\t\t \t\t\t\t\t</p> </div> </div> </div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/superslide.2.1.3.js"></script> <script src="js/plugin.js"></script> <script src="js/animationcounter.js"></script> <script src="js/banner.js"></script> <script src="js/index.js"></script> <script src="js/swiper.min.js"></script> <script src="js/more.js"></script> </body> </html>
CSS style code
@charset "utf-8";
body,html{<!-- --> min-width: 1200px; overflow-x: hidden; }
*{<!-- --> margin:0; padding:0;}
body,p,h1,h2,h3,h4,h5,table,ul,li,form,input{<!-- --> margin:0; padding:0; color:#000; font-family:" Microsoft yahei"; }
body,p{<!-- --> font-size:14px; border:none;}
a{<!-- --> font-size:14px; color:#999; text-decoration:none; border:none; padding:0; margin:0;}
table{<!-- -->border-collapse:collapse;}
img{<!-- --> border:0; margin:0; padding:0;}
ul,li{<!-- --> list-style:none; border:0; margin:0; padding:0;}
dl,dt,dd{<!-- --> margin:0; padding:0; -webkit-margin-start:0;}
h1,h2,h3,h4,h5{<!-- --> font-weight:normal; font-size:12px; display:block;}
strong,b{<!-- --> font-weight: normal;}
table,tr,td{<!-- --> border-spacing:0;}
em,i,b{<!-- --> font-style: normal;}
p{<!-- --> line-height: 170%; color: #555; font-size: 14px;}
input{<!-- --> border: none; background: none; }
figcaption{<!-- --> display: block;}
input:focus{<!-- --> outline: none; }
::-webkit-input-placeholder {<!-- --> /* WebKit browsers */ font-size:14px; color: #dfdfdf; }
::-ms-input-placeholder {<!-- --> /* Internet Explorer 10 + */ font-size:14px;color: #dfdfdf; }
.fl{<!-- -->float:left;}
.fr{<!-- -->float:right;}
.clearfix{<!-- -->*zoom:1;}
.clearfix:before, .clearfix:after{<!-- -->display:table; line-height:0; content:"";}
.clearfix:after{<!-- -->clear:both;}
.w1200{<!-- --> width: 1200px; margin: 0 auto;}
@font-face {<!-- -->
font-family: 'siyuan';
src: url('../fonts/SourceHanSerifCN-Regular.otf');
src: url('../fonts/SourceHanSerifCN-SemiBold.otf');
}
.bgwrap{<!-- --> background: url(../images/kuai.png) repeat; padding: 0 5.2% 50px 5.2%;}
.header{<!-- --> position: relative; }
.header ul li{<!-- --> float: left;}
.header li a{<!-- --> display: block; color: #000; font-size: 16px; font-family: "siyuan"; height: 100px; line-height: 100px; : 45px; transition: all 0.6s;}
.header .ul2 li a{<!-- --> margin-left: 45px; margin-right: 0;}
.header .logo{<!-- --> position: absolute; top: 0; right: 50%; margin-right: -94px; z-index: 333;}
.banner {<!-- --> position:relative; overflow:hidden;}
.banner .bannerfix >li {<!-- --> height: 100%; line-height: 0; opacity: 0; transition: opacity 1000ms linear; -webkit-transition: opacity 1000ms linear; float: left;}
.banner .bannerfix >li .bimg {<!-- --> line-height: 0; width: 100%; position: relative; transition: transform 5s ease; -webkit-transition: transform 5s ease; transform: scale( 1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.banner .bannerfix >li.imgIn{<!-- --> opacity:1; z-index:10; display:block;}
.banner .bannerfix >li.imgIn .bimg {<!-- --> transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
.banner .flex-control-nav{<!-- --> width:100%; height:20px; position:absolute; left:0; bottom:30px; text-align:center; z-index:20;}
.banner .flex-control-nav li{<!-- --> display:inline-block; position:relative; margin-right:14px; width:5px; height:20px;}
.banner .flex-control-nav li:last-child{<!-- --> margin-right:0;}
.banner .flex-control-nav li span{<!-- --> display:block; text-indent:999px; overflow:hidden; width:5px; height:8px; :320ms; left:0; top:6px;}
.banner .flex-control-nav li a.flex-active span{<!-- --> height:20px; top:0; background:#C0A16B;}
.title {<!-- --> position: relative; padding: 55px 0 110px 10px;}
.title .p2{<!-- --> color: #222; font-size: 40px; font-family: "siyuan"; line-height: 0;}
.title .p1{<!-- --> line-height: 0; float: left; font-size: 85px; color: #e4e4e4; font-family: "siyuan";
.title2 .p1{<!-- --> float: none; text-align: center;}
.title2 .p2{<!-- --> float: none; text-align: center; position: relative; z-index: 3; font-weight: bold;}
.index-sec1{<!-- --> background: #fff; padding-top: 50px;}
.sec1-left{<!-- --> width: 50%; position: relative; }
.video-kuai{<!-- --> position: relative;}
.video-tu{<!-- --> cursor: pointer; width: 100%;}
.video-tu img{<!-- --> display: block; width: 100%;}
.video-cont{<!-- --> position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 33333;
width: 100%; height: 100%; transform: translate(0, -105%); opacity: 0;
@media screen and (max-width: 1260px){<!-- -->
.sec6-left{<!-- --> width: 500px}
}
@media screen and (max-width: 1200px){<!-- -->
.sec1-right .p4{<!-- --> line-height: 30px; font-size: 14px;}
.swiper-slide {<!-- --> width:770px; }
.swiper-pagination, .btnwrap{<!-- --> width: 770px;}
\t
}
@media only screen and (max-height:480px) {<!-- -->
.swiper-slide {<!-- -->
width: 471px;
}
}
6. How to make learning no longer blind
Many beginners who have just started programming have learned basic grammar, but they don’t know the purpose of grammar, how to deepen the image, and how to improve themselves. Go to Niuke.com’s introductory training for programming beginners. This topic is an introductory programming level, suitable for beginners who have just learned grammar. The topics involve basic programming grammar, basic structure, etc. Each question has a practice mode and an exam mode. You can restore the exam mode for simulation, or you can use the practice mode Practice.
7. More dry goods
1. If my blog is helpful to you, if you like my blog content, Please "Like" "Comment" "Favorite" One click and three links!
2. 【?Follow me | Get more source code | High-quality articles】 Take you to learn various front-end plug-ins, 3D cool effects, and picture display , text effects, and templates for the whole site, HTML templates for college graduates, final homework templates, etc.! “There are a lot of front-end developers here, discuss front-end Node knowledge and learn from each other”!
3.
Questions related to the above content technology? Welcome to exchange and learn together?
