🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 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.视频演示
E87JP 无锡旅游8页含有轮播图原生js。关联旅游，家乡风景乡村。登陆注册，有视频音频
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="css/style.css" rel="stylesheet"> <script type="text/javascript" src="js/pptBox.js"></script> <title>无锡印象</title> </head> <body> <embed src="file/m.mp3" width="0" height="0"> <div class="con"> <div style="position: fixed; top: 0px;right: 0px; font-size: 30px;"> </div> <header> <div class="logo"> <a href=""><img src="picture/logo.png" width="1010"></a> </div> <nav> <ul> <li><a href="">网站首页</a></li> <li><a href="page1.html">历史沿革</a></li> <li><a href="page2.html">地理环境</a></li> <li><a href="page3.html">地方特产</a></li> <li><a href="page4.html">旅游胜地</a></li> <li><a href="page5.html">关于我们</a></li> <li><a href="log.html">登录</a></li> <li><a href="reg.html">注册</a></li> </ul> </nav> <div class="clear"></div> </header> <div class="clear"></div> <div class="lunbo"> <script>var box = new PPTBox(); box.width = 1010; //宽度 box.height = 333; //高度 box.autoplayer = 3; //自动播放间隔时间 //box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"}) box.add({ "url": "picture/banner_1.png", "href": "#", "title": "1" }) box.add({ "url": "picture/banner_2.png", "href": "#", "title": "2" }) box.add({ "url": "picture/banner_3.png", "href": "#", "title": "3" }) box.add({ "url": "picture/banner_4.png", "href": "#", "title": "3" }) box.add({ "url": "picture/banner_5.png", "href": "#", "title": "3" }) box.add({ "url": "picture/banner_6.png", "href": "#", "title": "3" }) box.add({ "url": "picture/banner_7.png", "href": "#", "title": "3" }) box.show();</script> </div> <div class="clear"></div> <div class="main"> <h2>家乡无锡简介</h2> <p>无锡，简称“锡”，古称新吴、梁溪、金匮，是江苏省地级市，国务院批复确定的中国长江三角洲的中心城市之一、重要的风景旅游城市 。截至，全市下辖5个区、代管2个县级市，总面积4627.47平方千米，建成区面积332.01平方千米，常住人口657.45万人，城镇人口501.50万人，城镇化率76.28%。</p> <p> 无锡地处中国华东地区、江苏省南部、长江三角洲平原，是扬子江城市群重要组成部分，北倚长江、南滨太湖，被誉为“太湖明珠”，京杭大运河从无锡穿过；境内以平原为主，星散分布着低山、残丘；属北亚热带湿润季风气候区，四季分明，热量充足。 </p> <p> 无锡是国家历史文化名城 ，自古就是鱼米之乡，素有布码头、钱码头、窑码头、丝都、米市之称。无锡是中国民族工业和乡镇工业的摇篮，是苏南模式的发祥地，也是联勤保障部队无锡联勤保障中心驻地 。无锡有鼋头渚、灵山大佛、无锡中视影视基地等景点。</p> <p> 11月，复查确认继续保留全国文明城市荣誉称号。 12月，被评为中国大陆最佳地级城市第3名，中国创新力最强的30个城市之一，中国最佳旅游目的地城市第17名。8月，中国海关总署主办的《中国海关》杂志公布了“中国外贸百强城市”排名，无锡排名第11。，无锡市地区生产总值为11852.32亿元，增长6.7%。分产业看，第一产业增加值122.50亿元，下降2.4%；第二产业增加值5627.88亿元，增长7.6%；第三产业增加值6101.94亿元，增长6.0%。 </p> <p></p> <p></p> <p></p> <h2>风景欣赏</h2> <div class="main_list"> <ul> <li> <a href="#"><img class="img2" src="picture/p1.png"></a> </li> <li> <a href="#"><img class="img2" src="picture/p2.png"></a> </li> <li> <a href="#"><img class="img2" src="picture/p3.png"></a> </li> <li> <a href="#"><img class="img2" src="picture/p4.png"></a> </li> </ul> </div> </div> <div class="clear"></div> <footer> <p id="xx"></p> </footer> <div class="clear"></div> </div> </body> </html> <script>var xx = document.getElementById('xx') xx.innerHTML=itime() setInterval(function(){ xx.innerHTML=itime() },1000) function itime() { var date = new Date(); this.year = date.getFullYear(); this.month = date.getMonth() + 1; this.date = date.getDate(); this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()]; this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); var currentTime = + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day; return(currentTime) }</script></doctype><doctype>
🏠CSS样式代码
.clear{ clear:both;} .fl{ float:left;} .fr{ float:right;} img{ border:none;} a{ text-decoration:none;} a:hover{ text-decoration:underline;} li{ list-style-type:none;} .center{ text-align:center;} .p10{ padding:10px;} .p20{ padding:20px;} img{-moz-border-radius:15px;border-radius:15px; } .img2 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img2:hover {transform: scale(1.1); -webkit-transform: scale(1.1);-moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); } body{ background:url(../image/bj.jpg) top center fixed no-repeat;} /*----------------------con-------------------------*/ .con{ width:1024px; padding:20px; height:auto; margin:10px auto; background:#fff;background-color:rgba(255,255,255,0.85);-moz-border-radius:15px;border-radius:15px;} /*----------------head-----------------*/ header{ width:1024px; height:auto; margin:auto;} .logo{ width:1010px; height:auto; margin:10px auto;} nav{ width:1010px; height:40px; margin:20px auto; border-top:1px dotted #611111; border-bottom:1px dotted #611111; } nav ul{ } nav li{ float:left; padding:5px 28px; text-align:center; } nav li a{ font-size:18px; line-height:30px; color:#611111;} nav li a:hover{ color:#611111; text-decoration:none;} nav li:hover{} nav li:hover a{ color:#a11a1a;} .banner{ width:1010px; height:auto; margin:5px auto;} .mainbox{ overflow:hidden; position:relative;} .flashbox{ overflow:hidden; position:relative;} .imagebox{ text-align:right;position:relative;} .bitdiv{display:inline-block;width:12px;height:12px;margin:0 10px 10px 0px;cursor:pointer;float:right;} .defimg{background-image:url(../image/02.png)} .curimg{background-image:url(../image/01.png)} /*----------------main-----------------*/ .main{ width:1000px; height:auto; margin:10px auto; font-size:14px; line-height:24px; color:#555;} .main h2{ font-size:22px; line-height:40px; margin:10px auto;color:#611111;font-weight:normal; text-align:center; border-bottom:1px dotted #611111; font-family:楷体;} .main h3{ font-size:16px; line-height:32px;color:#611111; text-align:left; } .main p{ font-size:14px; line-height:26px;color:#666; text-align:left; } .main p strong{ font-size:16px; line-height:32px;color:#611111; text-align:left; } .main_list{ width:960px; height:auto; margin:30px auto; } .main_list li{ width:210px;height:180px; float:left; margin:15px; } .main_list li p{ text-align:center;} .main_list li p a{font-size:18px; line-height:40px; color:#111; text-align:center;} .main_list li p a:hover{ color:#611111;} .main_list li:hover{} .main_list li img{ width:211px; height:137px; } /*----------------love-----------------*/ .love_in{ width:980px; height:auto; margin:10px auto;} .love_in_l{ width:400px; height:auto; float:left; margin:10px;} .love_in_r{ width:520px; height:auto; float:right; margin:10px;font-size:14px; line-height:26px; color:#111; } /*----------------foot-----------------*/ footer{ width:1010px; height:auto; margin:10px auto; border-top:1px dotted #ccc; padding-top:10px; text-align:center; font-size:12px; line-height:24px; color:#999595;}*{ margin:0; padding:0; font-family:Microsoft YaHei;}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
