Web前端网页制作湖南旅游网页设计实例html+css +js轮播图

悠闲的咸鱼小白

于 2024-07-31 12:54:56 发布

阅读量313

点赞数 4

文章标签： html5 css3

本文链接：https://blog.csdn.net/2301_76942182/article/details/140819142

版权

文章目录

一、网页介绍

二、网页效果

三、代码展示
1.HTML代码
2.CSS代码

一、网页介绍

湖南旅游网页带JavaScript轮播图

主要分为首页、历史介绍、景点介绍、湖南美食

本人是一枚新手小白，网页比较简单，适合初学者。

感兴趣的可以参考~

二、网页效果

三、代码展示

网站代码制作部分
（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~


  <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>湖南旅游网站</title>
	<link rel="stylesheet"  href="css/1.css">
</head>

<body>
     <div class="logo">
     <h2>湖南旅游网</h2>
      </div>
	 <div class="nav">
	<ul class="navlist">
	<li><a href="shouye.html">首页</a></li>
	<li><a href="lishi.html">历史介绍</a></li>
	<li><a href="jingdian.html">热门景点</a></li>
	<li><a href="meishi.html">美食推荐</a></li>
	</ul>
	</div>

<div id="ban">
<ul id="imgs">
<li><img src="img/5.webp" alt=""></li>
<li><img src="img/4.webp" alt=""></li>
<li><img src="img/1.jpeg" alt=""></li>
<li><img src="img/2.jpeg" alt=""></li>
<li><img src="img/5.webp" alt=""></li>
</ul >
<div class="prev">《</div>
<div class="next">》</div>
</div>

<div class="text">
<h2>关于湖南</h2>
<p>
湖南省，简称“湘”，隶属中华人民共和国省级行政区。位于中国中部、长江中游，省会为长沙市，全省辖13个地级市、1个自治州，共14个地级行政区划，总面积21.18万平方公里，占全国国土面积的2.2%。湖南省方言包括湘方言、西南官话、赣方言、客家方言。2023年末，湖南省常住人口6568万人。省会位于长沙市。湖南东临江西，西连贵州，南邻广东、广西相，北接壤湖北、重庆。位于云贵高原向江南丘陵和南陵山脉向江汉平原过渡地带，地势起伏大，地形崎岖 。境内南岭山脉呈东西走向，水网密布，以湘、资、沅、澧四水为骨架，属长江流域洞庭湖水系。属于亚热带季风气候，四季分明，光热充足，降水丰沛，雨热同期 。湖南省，最早出现在夏、商和西周时期。随着历史的变迁，经历了春秋战国、秦朝等多个朝代的更迭。直到唐朝时期，湖南开始有了相对稳定的行政设置，成为湖南观察使辖区，清朝将湖广省分为湖南省，完成了湖南作为独立省份的设立。新中国成立后,建立了人民政权,设立了10个专员公署,到现在仍沿用着清朝时期的省名。</p>
</div>

<div class="cont">
<div class="box">
<div class="imgb">
<img src="img/3.jpg">
</div>
<div class="content">
<h2>历史介绍</h2>
<p>湖南历史上的行政区划自秦朝至民国经历了多次变革。秦朝开始实行郡县制，设立了黔中郡和长沙郡。随着历代政权更迭，湖南的行政区划逐渐演变为多级制度，如西汉引入的州、郡、县三级制度，以及唐朝后期的道州制。宋朝时期，湖南归属于荆湖南路和荆湖北路。至元朝时期，湖南属湖广行省，设有多个路和府州。明清时期，湖南归属湖广布政使司，行政区划较为稳定。民国初期，湖南经历了道制的变化，最终确定为省、县二级制。总体而言，湖南的行政区划在历史长河中不断调整与完善，反映了政治权力和地方行政管理的演变与发展。</p>
</div>
</div>

<div class="box">
<div class="imgb">
<img src="img/1.jpg">
</div>
<div class="content">
<h2>热门景点</h2>
<p>橘子洲是湘江名洲，由南至北，纵贯江心，西瞻岳麓，东临古城。橘子洲景区是全国文明风景旅游区示范点、全国首批“红色旅游”经 典景点之一，省级文明单位、湖南百景单位、潇湘八景之一、长沙“山、水、洲、城”旅游格局的核心要素。主要景点有洲头颂橘亭、汉白玉诗词碑、铜像广场、藤架广场、揽岳亭、枕江亭、盆景园、大门广场等。新景区景点建设紧紧围绕“生态、文化、旅游”这一主题，充分利用、保留和保护建筑，进一步突出历史文化特色，积极营造出“红色旅游”的浓厚气氛，把历史背景、特色园林和人文景观相结合，突出人与自然的和谐。</p>
</div>
</div>

<div class="box">
<div class="imgb">
<img src="img/2.jpg">
</div>
<div class="content">
<h2>美食推荐</h2>
<p>在湖南的美食世界里，有着众多令人垂涎欲滴的经典菜品。湘菜，作为中国八大菜系之一，以其辣味浓烈、色泽鲜艳、酸辣香鲜的独特风味，成为了中国乃至世界美食界的一朵奇葩。其中，剁椒鱼头便是最具代表性的一道。这道菜以鳙鱼鱼头为主料，配以剁椒、豉油、姜丝、葱花等辅料烹制而成。色泽鲜艳的剁椒与鲜嫩的鱼头相结合，酸辣香鲜的味道让人回味无穷。在湖南的餐馆里，剁椒鱼头几乎是必点菜之一，其独特的口感和味道深受食客喜爱。</p>
</div>
</div>
</div>
<div class="dibu"></div>


<script src="js/1.js"></script>

</body>
</html>

2.CSS代码

*{
 
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  background-color: #D3D3D3
  
}
.nav{
  height: 40px;
  width: auto;
  background: linear-gradient(#add8e6,#e60);
}
 .navlist li{
 
  float: left;
  height: 40px;
  width: 100px;
  line-height: 40px;
  text-align: center;
  margin-left:85px;
}
.navlist a{
 
  color: #000;
 
  display: block;
  background: linear-gradient(#add8e6,#e60);
}
.navlist{

  width: 800px;
  margin: auto;

}
.navlist a:hover{

  background: #fa0;
} 

.logo{
  background:#C0C0C0;
}
.logo h2{
  width: 150px;
  height: 40px;
  margin-left: 35px;
  background:#C0C0C0;

}

#ban{
  width: 800px;
  height: 400px;
  border:2px solid #999;
  overflow: hidden;
  position: relative;
}
#imgs{
  width: 4000px;
  height: 400px;
}
#imgs img{
  width: 800px;
  height: 400px;
}
#imgs li{
  float: left;
}
.prev{
  background: #666;
  width: 30px;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  position: absolute;
  left: 5px;
  top: 45%;
  cursor: pointer;
}
.next {
  background: #666;
  width: 30px;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  position: absolute;
  right: 5px;
  top: 45%;
  cursor: pointer;
}

.text {
  margin-top: -400px;
  margin-left: 820px;
}
.text h2{
  text-align: center;
  margin-bottom: 10px;

}

.dibu{
  height: 40px;
  
  background: linear-gradient(#add8e6,#e60);
  margin-top: 30px;


}