🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
E78JP 成都旅游12页 带轮播图, jquery
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>成都</title><meta content="成都" name="keywords"><meta content="成都" 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开始--><div class="header"><div class="w1000"><p>成都</p><div class="contact"><a href="">设为首页</a> <a href="">加入收藏</a></div></div></div><div class="w1000"><div class="header_bottom"><a href=""><img src="picture/logo.png" width="294" height="49" alt="" title="成都"></a><ul><li><a href="">网站首页</a></li><li><a href="historic.html">历史</a></li><li><a href="beautiful.html">风景</a></li><li><a href="tourism.html">旅游</a></li><li><a href="delicacy.html">美食</a></li><li><a href="new.html">动态</a></li><li><a href="about.html">团队介绍</a></li><li><a href="connection.html">联系我们</a></li></ul></div></div><!--header结束--><div class="container"><!--banner开始--><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><!--调用JS模块图片滚动--><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结束--><!--content开始--><div class="content"><p class="p_tit1">走进成都</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">成都简介</a> 都，四川省辖地级市，简称“蓉”，别称蓉城、锦城，四川省省会，副省级市、超大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。 </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">成都文化</a> 各种技法让蜀绣文化底蕴更深厚。川剧文化 川剧，是四川成都文化的一大特色。说到川剧，人们马上会想到川剧的神技——变脸。变脸的最快纪录由著名川剧表演大师彭登怀保持，</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">成都历史</a> “成都历史悠久,也是中国的古文化之都,具有“天府之国”的美称。据史书记载,大约在公元前5世纪中叶的古蜀国开明王朝九世时将都城从广都樊乡(今双流县)迁往成都,构筑城池。关于成都一名的来历,据《太平环宇记》记载,是借用西周建都的历史经过,“以周太王从梁山止岐山,一年成邑,三年成都</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="#">宽窄巷子</a></p></div><div class="fl2 fldiv"><a href="#"><img src="picture/2.jpg" width="75" height="76" alt="" title=""></a><p><a href="#">井巷子</a></p></div><div class="fl3 fldiv"><a href="#"><img src="picture/3.jpg" width="75" height="76" alt="" title=""></a><p><a href="#">小龙翻大江火锅</a></p></div><div class="fl4 fldiv"><a href="#"><img src="picture/4.jpg" width="75" height="76" alt="" title=""></a><p><a href="#">小通巷</a></p></div><div class="fl5 fldiv"><a href="#"><img src="picture/5.jpg" width="75" height="76" alt="" title=""></a><p><a href="#">李雪牛杂火锅</a></p></div><div class="fl6 fldiv"><a href="#"><img src="picture/6.jpg" width="75" height="76" alt="" title=""></a><p><a href="#">成都民歌湖游船</a></p></div><div class="fl7 fldiv"><a href="#"><img src="picture/7.jpg" width="75" height="76" alt="" title=""></a><p><a href="#">名树博览园</a></p></div></div><div class="zjfc"><p class="p_tit1">秀丽成都</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><!--为秀丽成都模块图片向左滚到--><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 结束--></div><!--footer开始--><div class="footer"><p><a href="">首页</a> | <a href="historic.html">历史</a> | <a href="beautiful.html">风景</a> | <a href="tourism.html">旅游</a> | <a href="delicacy.html">美食</a> | <a href="new.html">动态</a> | <a href="javascript:;">旅游</a>|<a href="connection.html">联系我们</a></p><p>Copyright © － All Rights Reserved 版权所有 XXXXXXXXXXXXXXXXXX</p></div><!--footer 结束--></body></html>
🏠CSS样式代码
/*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; } /*文字排版*/.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; }/*定位*/.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; }/*长度高度*/.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% }/*边距*/.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; }
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
