🌩️ Wonderful column recommendation👇🏻👇🏻👇🏻
💂 Author homepage: [Enter the homepage—🚀Get more source code]
🎓 web front-end final homework: [📚HTML5 webpage final assignment (1000 sets) ]
🧡 Interesting confessions for programmers: [💌HTML Tanabata Valentine's Day Confession Web Page Production (110 Sets) ]
2. 📚 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 a stable display effect.
📓Website programming: 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 on the market, and the effect of seeing the website immediately after opening it has been achieved.
📘Website materials: We plan to collect good-looking picture materials from various platforms, and carefully select pictures that are suitable for the style of the web page, and then use PS to make pictures suitable for the size of the web page.
📒Website files: The types of website system files include: html web page structure file, css web page style file, js web page special effect file, images web page picture file;
📙Webpage editing: The code of the webpage works is simple, and any HTML editing software (such as Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++, etc.) can be used to run, modify and edit.
in:
(1) The 📜html file contains: index.html is the home page, and other html are secondary pages;
(2) 📑 css files include: css all page styles, text scrolling, image enlargement, etc.;
(3) 📄 js files include: js implements dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).
3. 🔗 website effect
▶️1. Video demonstration
E78JP Chengdu Tourism 12 pages with carousel, jquery
🧩 2. Picture demo
4. 💒 website code
🧱HTML structure code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chengdu</title>
<meta content="Chengdu" name="keywords">
<meta content="Chengdu" name="description">
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/pagename.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<!--header start-->
<div class="header">
<div class="w1000">
<p>Chengdu</p>
<div class="contact"><a href="">Setup as front page</a> <a href="">add to favorites</a></div>
</div>
</div>
<div class="w1000">
<div class="header_bottom">
<a href=""><img src="picture/logo.png" width="294" height="49" alt="" title="Chengdu"></a>
<ul>
<li><a href="">Home page</a></li>
<li><a href="historic.html">history</a></li>
<li><a href="beautiful.html">landscape</a></li>
<li><a href="tourism.html">travel</a></li>
<li><a href="delicacy.html">Food</a></li>
<li><a href="new.html">dynamic</a></li>
<li><a href="about.html">team introduction</a></li>
<li><a href="connection.html">contact us</a></li>
</ul>
</div>
</div>
<!--header Finish-->
<div class="container">
<!--banner start-->
<div class="banner">
<div class="bd">
<ul>
<li style="background:url(picture/3.jpg) no-repeat center top;"></li>
<li style="background:url(picture/2.jpg) no-repeat center top;"></li>
</ul>
</div>
<div class="hd">
<ul>
<li></li>
<li></li>
</ul>
</div>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<!--transfer JS Module image scrolling-->
<script type="text/javascript">
jQuery(".banner").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "fold",
delayTime: 1000,
interTime: 5000,
autoPlay: true,
autoPage: true,
trigger: "click"
});
</script>
<!--banner Finish-->
<!--content start-->
<div class="content">
<p class="p_tit1">Into Chengdu</p>
<ul class="ul_jishu clearfix">
<li class="fl">
<a href="introduce.html"><img src="picture/3.jpg" width="291" height="126" alt="" title=""></a>
<p>
<a href="introduce.html">Introduction to Chengdu</a> Chengdu, a prefecture-level city under the jurisdiction of Sichuan Province, referred to as "Rong", also known as Rongcheng and Jincheng, the provincial capital of Sichuan Province, a sub-provincial city, a megacity, a core city in the Chengdu-Chongqing economic circle, and an important western region of China approved by the State Council. It is the central city of China, an important national high-tech industrial base, a commercial logistics center and a comprehensive transportation hub. </p>
</li>
<li class="fl ml20">
<a href="Culture.html"><img src="picture/2.jpg" width="291" height="126" alt="" title=""></a>
<p>
<a href="Culture.html">Chengdu culture</a> Various techniques make the cultural heritage of Shu embroidery more profound. Sichuan Opera Culture Sichuan Opera is a major feature of Chengdu culture in Sichuan. When it comes to Sichuan Opera, people will immediately think of the magic skill of Sichuan Opera - face changing. The fastest face-changing record is held by the famous Sichuan Opera master Peng Denghuai.
</p>
</li>
<li class="fr">
<a href="historic.html"><img src="picture/5.jpg" width="291" height="126" alt="" title=""></a>
<p>
<a href="historic.html">Chengdu History</a> "Chengdu has a long history,It is also the ancient cultural capital of China,It has the reputation of "Land of Abundance". According to historical records,Around the middle of the 5th century BC, during the 9th century of the Kaiming Dynasty of the ancient Shu Kingdom, the capital was removed from Fanxiang, Guangdu.(Shuangliu County today)Move to Chengdu,Build a fort. About the origin of a person in Chengdu,According to "Taiping Huanyu Ji",It is borrowed from the historical process of building the capital in the Western Zhou Dynasty.,"Take the Zhou Taiwang from Liangshan to Qishan,One year into town,Three years in Chengdu
</p>
</li>
</ul>
<div class="feilei">
<div class="fl1 fldiv">
<a href="#"><img src="picture/1.jpg" width="75" height="76" alt="" title=""></a>
<p><a href="#">Kuanzhai Alley</a></p>
</div>
<div class="fl2 fldiv">
<a href="#"><img src="picture/2.jpg" width="75" height="76" alt="" title=""></a>
<p><a href="#">Well Alley</a></p>
</div>
<div class="fl3 fldiv">
<a href="#"><img src="picture/3.jpg" width="75" height="76" alt="" title=""></a>
<p><a href="#">Xiaolong Fan Dajiang Hotpot</a></p>
</div>
<div class="fl4 fldiv">
<a href="#"><img src="picture/4.jpg" width="75" height="76" alt="" title=""></a>
<p><a href="#">Alleys</a></p>
</div>
<div class="fl5 fldiv">
<a href="#"><img src="picture/5.jpg" width="75" height="76" alt="" title=""></a>
<p><a href="#">Li Xue Niu Zai Hot Pot</a></p>
</div>
<div class="fl6 fldiv">
<a href="#"><img src="picture/6.jpg" width="75" height="76" alt="" title=""></a>
<p><a href="#">Chengdu Folk Song Lake Cruise</a></p>
</div>
<div class="fl7 fldiv">
<a href="#"><img src="picture/7.jpg" width="75" height="76" alt="" title=""></a>
<p><a href="#">Famous Tree Expo Park</a></p>
</div>
</div>
<div class="zjfc">
<p class="p_tit1">Beautiful Chengdu</p>
<div class="picScroll-left">
<div class="hd">
<a class="next">
<</a>
<a class="prev">></a>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><img src="picture/1.jpg" width="231" height="151"></div>
</li>
<li>
<div class="pic"><img src="picture/2.jpg" width="231" height="151"></div>
</li>
<li>
<div class="pic"><img src="picture/3.jpg" width="231" height="151"></div>
</li>
<li>
<div class="pic"><img src="picture/4.jpg" width="231" height="151"></div>
</li>
<li>
<div class="pic"><img src="picture/5.jpg" width="231" height="151"></div>
</li>
<li>
<div class="pic"><img src="picture/6.jpg" width="231" height="151"></div>
</li>
</ul>
</div>
</div>
<!--Scroll left for Beauty Chengdu module pictures-->
<script type="text/javascript">
jQuery(".picScroll-left").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
autoPage: true,
effect: "left",
autoPlay: true,
vis: 4,
trigger: "click"
});
</script>
</div>
</div>
<!--content Finish-->
</div>
<!--footer start-->
<div class="footer">
<p><a href="">front page</a> | <a href="historic.html">history</a> | <a href="beautiful.html">landscape</a> | <a href="tourism.html">travel</a> | <a href="delicacy.html">Food</a> | <a href="new.html">dynamic</a> | <a href="javascript:;">travel</a>|
<a href="connection.html">contact us</a></p>
<p>Copyright © 2015－2021 All Rights Reserved all rights reserved XXXXXXXXXXXXXXXXXX</p>
</div>
<!--footer Finish-->
</body>
</html>
🏠CSS style code
/*CSS reset*/
html { color:#000;}
body {font: 12px/1.231 SimSun, arial, helvetica, clean, sans-serif;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0;}
table {}
fieldset, img { border:0; }
address, caption, cite, code, dfn, strong, th, var, optgroup { font-style:inherit; font-weight:inherit; }
em{ font-style:normal;}
b,strong{ font-weight:bold;}
del, ins { text-decoration:none; }
li { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
q:before, q:after { content:''; }
abbr, acronym { border:0; font-variant:normal; }
sup { vertical-align:baseline; }
sub { vertical-align:baseline; }
legend { color:#000; }
/*input, button, textarea { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }*/
input, button, textarea, select { *font-size:100%; }
a,a:visited{color: #0f8f38; text-decoration:none; outline:none; blr:expression(this.onFocus=this.blur());}
a:hover {color:#c00;}
textarea{ resize:none; }
/*Typesetting*/
.f12 { font-size:12px; }
.f13 { font-size:13px; }
.f14 { font-size:14px; }
.f15 { font-size:15px; }
.f16 { font-size:16px; }
.f17 { font-size:17px; }
.f18 { font-size:18px; }
.f19 { font-size:19px; }
.f20 { font-size:20px; }
.f25 { font-size:25px; }
.fb { font-weight:bold }
.fn { font-weight:normal; }
.t0 { text-indent:0em; }
.t2 { text-indent:2em; }
.lh150 { line-height:150%; }
.lh180 { line-height:180%; }
.lh200 { line-height:200%; }
.unl { text-decoration:underlline; }
.no_unl { text-decoration:none; }
/*position*/
.tl { text-align:left; }
.tc { text-align:center; }
.tr { text-align:right; }
.bc { margin-left:0; margin-right:0; }
.fl { float:left; display:inline; }
.fr { float:right; display:inline; }
.cb,.clear { clear:both; }
.cl { clear:left; }
.cr { clear:rigth; }
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.vm { verticle-align:middle; }
.pr { position:relative; }
.pa { position:absolute; }
.abs-right { position:absolute; right:0 }
.zoom { zoom:1; }
.hidden { visiility:hidden; }
.none { display:none; }
/*length height*/
.w10 { width:10px; }
.w20 { width:20px; }
.w30 { width:30px; }
.w40 { width:40px; }
.w50 { width:50px; }
.w60 { width:60px; }
.w70 { width:70px; }
.w80 { width:80px; }
.w90 { width:90px; }
.w100 { width:100px; }
.w200 { width:200px; }
.w300 { width:300px; }
.w400 { width:400px; }
.w500 { width:500px; }
.w600 { width:600px; }
.w700 { width:700px; }
.w800 { width:800px; }
.w { width:100% }
.h50 { width:50px; }
.h80 { width:80px; }
.h100 { width:100px; }
.h200 { width:200px; }
.h { height:100% }
/*margin*/
.m10 { margin:10px; }
.m15 { margin:15px; }
.m30 { margin:30px; }
.mt5 { margin-top:5px; }
.mt10 { margin-top:10px; }
.mt15 { margin-top:15px; }
.mt20 { margin-top:20px; }
.mt30 { margin-top:30px; }
.mt50 { margin-top:50px; }
.mt100 { margin-top:100px; }
.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb50 { margin-bottom:50px; }
.mb100 { margin-bottom:100px; }
.ml5 { margin-left:5px; }
.ml10 { margin-left:10px; }
.ml15 { margin-left:15px; }
.ml20 { margin-left:20px; }
.ml30 { margin-left:30px; }
.ml50 { margin-left:50px; }
.ml100 { margin-left:100px; }
.mr5 { margin-right:5px; }
.mr10 { margin-right:10px; }
.mr15 { margin-right:15px; }
.mr20 { margin-right:20px; }
.mr30 { margin-right:30px; }
.mr50 { margin-right:50px; }
.mr100 { margin-right:100px; }
.p10 { padding:10px; }
.p15 { padding:15px; }
.p30 { padding:30px; }
.pt5 { padding-top:5px; }
.pt10 { padding-top:10px; }
.pt15 { padding-top:15px; }
.pt20 { padding-top:20px; }
.pt30 { padding-top:30px; }
.pt50 { padding-top:50px; }
.pt100 { padding-top:100px; }
.pb5 { padding-bottom:5px; }
.pb10 { padding-bottom:10px; }
.pb15 { padding-bottom:15px; }
.pb20 { padding-bottom:20px; }
.pb30 { padding-bottom:30px; }
.pb50 { padding-bottom:50px; }
.pb100 { padding-bottom:100px; }
.pl5 { padding-left:5px; }
.pl10 { padding-left:10px; }
.pl15 { padding-left:15px; }
.pl20 { padding-left:20px; }
.pl30 { padding-left:30px; }
.pl50 { padding-left:50px; }
.pl100 { padding-left:100px; }
.pr5 { padding-right:5px; }
.pr10 { padding-right:10px; }
.pr15 { padding-right:15px; }
.pr20 { padding-right:20px; }
.pr30 { padding-right:30px; }
.pr50 { padding-right:50px; }
.pr100 { padding-right:100px; }
5. 🎁More source code
1. If my blog is helpful to you, please "👍Like" "✍️Comment" "💙Favorite" one click and three links!
2. 💗[👇🏻👇🏻👇🏻🉑Follow me | Get more source code] Take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, as well as website templates, college graduate HTML templates, etc.!
📣Technical issues related to the above content💌Welcome to exchange and learn together👇🏻👇🏻👇🏻