一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、🔗作品效果
▶️视频演示
https://live.csdn.net/v/embed/239914
(title-E01LW-榆林子州-HTML5响应式旅游景区网站模板)]
🧩 截图演示
08.png
07.png
06.png
05.png
04.png
03.png
02.png
01.png
三、💒 作品代码
🧱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;
}
四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
