HTML网页设计结课作业 榆林子州 HTML5响应式旅游景区网站模板
最新推荐文章于 2023-04-05 22:24:49 发布
html5网页设计
最新推荐文章于 2023-04-05 22:24:49 发布
阅读量34
收藏
点赞数
最新推荐文章于 2023-04-05 22:24:49 发布
阅读量34
收藏
点赞数
🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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.视频演示
E01LW-榆林子州-HTML5响应式旅游景区网站模板
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE HTML>
<html>
<head>
<title>榆林子州</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script src="js/jquery-1.11.1.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
</head>
<body>
<!-- banner -->
<div class="banner">
<!-- container -->
<div class="container">
<div class="header">
<div class="logo">
<a href="index.html">榆林子州</a>
</div>
<div class="icons">
<ul>
<li><a href="#" class="facebook"> </a></li>
<li><a href="#" class="facebook twitter"> </a></li>
<li><a href="#" class="facebook chrome"> </a></li>
<li><a href="#" class="facebook dribbble"> </a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="top-nav">
<span class="menu">菜单</span>
<ul class="nav1">
<li><a href="index.html" class="active">子州简介</a></li>
<li><a href="history.html">文化历史</a></li>
<li><a href="accomdation.html">住宿</a></li>
<li><a href="food.html">子州美食</a></li>
<li><a href="#news" class="scroll">景区公告</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
</div>
<!-- //container -->
<div class="banner-text">
<!-- container -->
<div class="container">
<ul>
<li>子洲县位于陕北黄土高原丘陵沟壑区腹地，榆林市南缘，为纪念革命烈士李子洲而命名。</li>
</ul>
</div>
<!-- //container -->
</div>
</div>
<!-- //banner -->
<!-- banner-bottom -->
<div class="banner-top-slide">
<div class="banner-bottom-top">
<h4>全民抗疫</h4>
<p>团结一致，万众一心，早日战胜疫情，武汉加油，中国加油</p>
</div>
<div class="banner-bottom-bottom">
<div class="banner-top-slide-grids">
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider3">
<li>
<div class="banner-slid">
<h3>同舟共济</h3>
<p>居家隔离，减少外出，就是最好的防护;</br>
听从号召尽量待在家中，不串门不聚会;</br>正确佩戴口罩，做好防护，养成良好卫生习惯。
</p>
</div>
</li>
<li>
<div class="banner-slid">
<h3>坚定信心</h3>
<p>科学宣传疫情防护知识，提高公众自我保护意识;</br>
加强防控，一起加油。众志成城，抗击疫情;</br>
疫情就是命令，防控就是责任。
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- //banner-bottom -->
<!-- welcome -->
<div class="welcome">
<!-- container -->
<div class="container">
<div class="welcome-info">
<h3>Hello there!</h3>
<h5>新的一年，打卡子州的正确姿势</h5>
<h4>你要不要跟我走？ <a href="follow-me.html">嗯，点这里>></a></h4>
</div>
</div>
<!-- //container -->
</div>
<!-- //welcome -->
<div class="copyrights">Collect from </div>
<!-- banner-bottom -->
<div class="banner-bottom">
<!-- container -->
<div class="container">
<div class="banner-bottom-info">
<h3>子州过年习俗</h3>
<p>陕北的春节，各种民俗活动异彩纷呈，闹秧歌，庙会，打醮，说书等百花齐放，可谓是热闹非凡<a href="handie.html">更多>></a></p>
</div>
<div class="banner-bottom-grids">
<div class="col-md-6 banner-bottom-grid">
<div class="col-md-5 banner-bottom-left">
<img src="images/xs1.jpg" alt="">
</div>
<div class="col-md-7 banner-bottom-right">
<h4>秧歌朝拜佛祖</h4>
<p>打醮本是道士设坛为人做法事，求福禳灾的一种法事活动。一般是在冬天农事告一段落的时候，农民们为了感谢神灵带来一年的收获，祈求上苍赐福庇佑来年风调雨顺、五谷丰登，消灾免难，吉祥安康，而举行各种祭祀活动，而打醮便是其中的一项重要的活动。</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-6 banner-bottom-grid">
<div class="col-md-5 banner-bottom-left">
<img src="images/xs2.jpg" alt="">
</div>
<div class="col-md-7 banner-bottom-right">
<h4>转幡</h4>
<p>在众多的祭祀活动中，转幡也是一项规模比较大的佛事活动。转幡也称祭幡，就是凡来参加祭事活动的村民都要手执法器、排例成行、跟随佛教居士在空阔平整的地上围绕着栽在地上的绑着一把朝向天空的高高在上的扫帚旋转，绑着的扫帚谓之“扫天晴”。</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- container -->
</div>
<!-- //banner-bottom -->
<!-- news -->
<div id="news" class="news">
<div class="container">
<div class="news-text">
<h3>子州景区</h3>
<p>因外界各种原因给您带来的麻烦，我们在此感到深深的抱歉，感谢您的谅解，祝您游玩愉快！</p>
</div>
<div class="news-grids">
<div class="col-md-3 news-grid">
<h4>子洲西峰寺</h4>
<span>2020.02.07</span>
<img src="images/ticket.jpg" alt="">
<div class="news-info">
<p>子洲县瓜园则湾乡政府东北2公里处有一块山地，名叫芦草坛，其上有一西峰寺，依山而建。北临乏牛山，西北与柏全山相望。芦草坛虽不雄伟壮观，却也峻峭，人若站于其顶眺望，视野倒也开阔，更因其西峰寺而遐迩闻名。西峰寺坐西北面东南，占地约3亩，一个独院。正殿由三孔拱形洞组成，纯砖结构，顶呈硬山式，用黄色琉璃瓦铺顶，飞檐翘角，兽头独尊，遥遥相望，顶上中有三层小0，独特精致,引人注目。正殿走廊四柱支撑，朱柱彩壁，画栋雕梁，十分生动。</p>
</div>
</div>
<div class="col-md-3 news-grid">
<h4>子洲大洪寺</h4>
<span>2020.02.07</span>
<img src="images/ticket.jpg" alt="">
<div class="news-info">
<p>子洲城西五里大理河北岸有大洪寺。“据庙内碑记载，明景泰初年，信士诸公创修庙于底石崖，延及成化年间乃修葺于中峰之巅，后世多次重修，1917年——1920年再重修葺”。(1958年文物普查记录)其寺据今已有550多年的历史了。大洪寺面南而建，与大理河南岸之青龙山、克戎寨(今张家寨)遥遥相对。</p>
</div>
</div>
<div class="col-md-3 news-grid">
<h4>淮宁河</h4>
<span>2020.02.07</span>
<img src="images/ticket.jpg" alt="">
<div class="news-info">
<p>淮宁河无定河，陕北最著名的一条河。它从遥远的三边高原西南部的白于山脉奔腾而来，它在陡峭的石壁间、狭窄的河谷里咆哮冲撞，夺路东下，在莽莽的山沟大川上，又有无数的大河小溪从四面八方汇入了它博大的怀抱。淮宁河，就是这无数支流中的一条河流。它发源于子长县石家湾乡高柏山麓的枣树畔村，流经子长、子洲、绥德三县的十个乡镇，近百个村庄，最后从绥德县邓家楼村入无定河，全长85．2公里，流域总面积1222平方公里。</p>
</div>
</div>
<div class="col-md-3 news-grid">
<h4>子洲柏全山</h4>
<span>2020.02.07</span>
<img src="images/ticket.jpg" alt="">
<div class="news-info">
<p>柏全山位于瓜园则湾乡政府驻地南3公里处。据传说，此山曾有4株枝叶繁茂的大柏树，故名柏全山。柏全山北高南低，山巅上有一古庙，主奉天皇、地皇、人皇，简称为“三皇庙”。坐北面南，正殿为三孔硬山形顶拱式砖窑，整个寺院虽然面积不大，但布局合理，层次分明，有泥塑五十余尊，保持有晚清风格。</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //news -->
<!-- footer -->
<div class="footer">
<!-- container -->
<div class="container">
<div class="col-md-6 footer-left">
<h3>联系我们</h3>
<form>
<input type="text" placeholder="电子邮件,例如1435469178@qq.com" required="">
<input type="submit" value="提交">
</form>
</div>
<div class="col-md-3 footer-middle">
<h3>地址</h3>
<div class="address">
<p>陕北黄土高原丘陵沟壑区腹地
<span>榆林市南缘</span>
</p>
</div>
<div class="phone">
<p>0573-88731088</p>
</div>
</div>
<div class="col-md-3 footer-right">
<div class="f-logo">
<a href="index.html">榆林子州</a>
</div>
<p>陕北黄土高原丘陵沟壑区腹地，榆林市南缘</p>
</div>
<div class="clearfix"> </div>
</div>
<!-- //container -->
</div>
<!-- //footer -->
<!-- copyright -->
<div class="copyright">
<!-- container -->
<div class="container">
<div class="copyright-left">
</div>
</div>
<!-- //container -->
</div>
<!-- copyright -->
</body>
</html>
🏠CSS样式代码
.banner{
background: url(../images/banner.jpg) no-repeat 0px 0px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
position: relative;
}
.copyrights{
text-indent:-9999px;
height:0;
line-height:0;
font-size:0;
overflow:hidden;
}
.a-banner {
background: url(../images/banner.jpg) no-repeat 0px 0px;
background-size: cover;
}
.logo{
float:left;
}
.logo a{
color: #FFF;
font-size: 5em;
font-family: 'Dorsa-Regular';
text-decoration: none;
letter-spacing: 2px;
}
.icons{
float:right;
}
.icons ul{
padding: 0;
margin: 3em 0 0 0;
}
.icons ul li{
display:inline-block;
margin:0 .3em;
}
.icons ul li a.facebook{
background:url(../images/social.png) no-repeat 0px 0px;
width:40px;
height:40px;
display:block;
}
.icons ul li a.twitter{
background: url(../images/social.png) no-repeat -41px 0px;
}
.icons ul li a.chrome{
background:url(../images/social.png) no-repeat -82px 0px;
}
.icons ul li a.dribbble{
background:url(../images/social.png) no-repeat -123px 0px;
}
.icons ul li a.pinterest{
background:url(../images/social.png) no-repeat -164px 0px;
}
.icons ul li a.facebook:hover{
opacity:.5;
}
.top-nav {
text-align: center;
padding: 1em 0 1em 0;
border-top: ridge 1px rgba(255, 255, 255, 0.62);
}
.top-nav ul {
padding: 0;
margin: 0;
}
.top-nav ul li {
display: inline-block;
margin: 0 2em;
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
6362
前端领域优质创作者
到【灌水乐园】发言
m0_75080023: * { margin: 0px; padding: 0px; list-style: none; } body { background-color: #4B7C99; } #bigbox { width: 1000px; margin: 0 auto; } #banner { width: 1000px; font-size: 0px; } #banner img { width: 1000px; } nav { background-color: #CCD0D9; width: 1000px; height: 60px; } nav a { text-decoration: none; line-height: 60px; margin-left: 50px; margin-right: 50px; color: #020C16; font-weight: bold; } nav a:hover { color: #1a9be6; } .dangqian { color: #1a9be6; } #main { height: 490px; width: 1000px; margin: 0 auto; background-color: #86aacb; } #main_left { width: 300px; display: inline-block; background-color: #86aacb; float: left; } h2 { box-sizing: border-box; padding-left: 10px; font-size: 20px; line-height: 30px; background-color: #03151F; color: #CCD0D9; } #main_left img { width: 300px; } #main_left p { margin-left: 10px; line-heigh
2301_80728013: 宝子能给个包吗，有偿
Wing05: 图片可以发一下嘛
Starsstars（星辰）: 你好 ，请问可以发完整代码给我吗？
2301_81865031: 原照片，在哪