文章目录
一、网页介绍
二、网页效果
三、代码展示
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;
}