🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
二、📚网站介绍
📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面:计划采用最新的网页编程语言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 © 2015-2021 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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻