Web前端课程设计-好客山东欢迎你（附源码）
这是一个关于山东省介绍的网页。这个网页不仅展示了山东的美丽风光和丰富文化，还提供了交通情况和旅游攻略，让游客更好地规划山东之行。以下是网页的详细设计和功能介绍。同时给读者大大们提供了源码以及图片样式可供参考。
页面设计
1. 页面布局
- 导航栏：使用HTML和CSS创建了一个响应式的导航栏，包含首页、山东简介、交通情况、旅游打卡和联系我们等板块。
- 轮播图：使用HTML和CSS实现了一个简单的轮播图效果，展示山东的美丽图片。
- 内容区：每个板块对应一个内容区，通过JavaScript中的函数
showPage来控制显示和隐藏。 - 轮播图设计代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好客山东欢迎您 - 主页轮播图</title>
<style>
/* 轮播图样式 */
.banner {
position: relative;
width: 100%;
height: 500px; /* 可以根据需要调整高度 */
overflow: hidden;
}
.banner ul {
position: absolute;
width: 100%;
height: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.banner ul li {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.banner ul li.active {
opacity: 1;
}
/* 轮播图控制按钮样式 */
.banner .controls {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
}
.banner .controls span {
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
cursor: pointer;
user-select: none;
}
/* 轮播图指示器样式 */
.banner ol {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
list-style: none;
padding: 0;
}
.banner ol li {
background-color: white;
border-radius: 50%;
width: 10px;
height: 10px;
margin: 0 5px;
cursor: pointer;
}
.banner ol li.active {
background-color: orange;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li class="active" style="background-image: url('img/1.jpg');"></li>
<li style="background-image: url('img/2.jpg');"></li>
<li style="background-image: url('img/3.jpg');"></li>
<!-- 更多图片 -->
</ul>
<div class="controls">
<span class="prev">❮</span>
<span class="next">❯</span>
</div>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<!-- 更多指示器 -->
</ol>
</div>
<script>
// 轮播图JavaScript控制
let currentSlide = 0;
const slides = document.querySelectorAll('.banner ul li');
const dots = document.querySelectorAll('.banner ol li');
const totalSlides = slides.length;
function updateSlidePosition() {
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
dots[i].classList.remove('active');
}
slides[currentSlide].classList.add('active');
dots[currentSlide].classList.add('active');
}
function nextSlide() {
currentSlide = (currentSlide + 1) % totalSlides;
updateSlidePosition();
}
function prevSlide() {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
updateSlidePosition();
}
document.querySelector('.banner .next').addEventListener('click', nextSlide);
document.querySelector('.banner .prev').addEventListener('click', prevSlide);
// 自动轮播
setInterval(nextSlide, 3000); // 3秒切换一次
</script>
</body>
</html>
2. 样式设计
- 背景：使用了渐变色背景，让页面更加美观。
- 字体：主要使用楷体字体，以符合中文内容的显示习惯。
- 图片：为图片添加了hover效果，放大展示。
3. 功能实现
- JavaScript：通过JavaScript控制内容的显示和隐藏，使得用户体验更加流畅。
<script>
function showPage(page) {
document.querySelector('.home').style.display = 'none';
document.querySelector('.history').style.display = 'none';
document.querySelector('.culture').style.display = 'none';
document.querySelector('.driving').style.display = 'none';
document.querySelector('.traffic').style.display = 'none';
document.querySelector('.strategy').style.display = 'none';
document.querySelector('.food').style.display = 'none';
document.querySelector('.us').style.display = 'none';
document.querySelector('.' + page).style.display = 'block';
}
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="tou">
<audio controls autoplay>
<source src="img/33.mp3" type="audio/mpeg">
</audio>
<h1 class="tou1">好客山东欢迎您</h1>
</div>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>页面内容
1. 首页
首页包含一个欢迎语和一个图片展示区，通过轮播图展示山东的美丽图片。
2. 山东简介
- 历史文化：展示了山东的历史文化，可以通过图片和文字了解。
- 传统文化：介绍了山东的传统文化，包括节日、习俗等。
3. 交通情况
- 公共交通：提供了山东省内的公共交通信息。
- 自驾路线：提供了自驾路线的建议。
4. 旅游打卡
- 网红打卡：推荐了山东省内的网红打卡地点。
- 美食推荐：介绍了山东的特色美食。
5. 联系我们
提供了联系方式，方便游客咨询和反馈。
代码展示
1. style代码展示
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(45deg,palegoldenrod,palevioletred);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color:pink;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
nav li {
float: left;
}
nav a {
display: block;
padding: 10px;
color:aqua;
font-weight: bold;
text-decoration: none;
font-family:'楷体';
}
nav a:hover {
background-color: paleturquoise;
}
p{
font-size: 0.7cm;
font-family:'楷体';
}
.subnav {
display: none;
position: absolute;
z-index: 1;
background-color: plum;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
nav li:hover .subnav {
display: block;
}
.subnav a {
float: none;
display: block;
padding: 10px;
color:papayawhip;
font-weight: bold;
text-decoration: none;
}
.subnav a:hover {
background-color: palegreen;
}
main {
padding: 20px;
height: calc(100vh - 120px);
background-color: #FFF;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.history {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.home{
background: linear-gradient(45deg,aqua, plum);
height: 11px;
}
.history .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.culture {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.culture .img-container {
float: left;
margin-right: 20px;
width: 50%;
height: 500px;
background-image: url('img/000.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sight {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.sight .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/000.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.traffic {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.traffic .img-container {
float: left;
margin-right: 20px;
width: 50%;
height: 500px;
background-image: url('img/17.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.driving {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.driving .img-container {
float: left;
margin-right: 20px;
width: 50%;
height: 500px;
background-image: url('img/12.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.strategy {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.strategy .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/5.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.food {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.food .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/18.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.us{
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.us .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/6.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
h1{
font-family: '楷体';
text-shadow: 10px 10px black; /* 为标题添加阴影效果 */
}
h2 {
margin-top:-10px;
font-family:'楷体';
color:black;
}
ul,ol,li{
list-style-type: none;
}
.aaa{
width: 100%;
height: 100%;
display: block;
}
.banner{
height: 500px;
width: 100%;
margin: 50px 0;
position: relative;
}
.banner ul{
width: 100%;
height: 100%;
}
.banner ul li{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top:0;
left: 0;
transition: opacity 2s linear;
}
.banner ul li.active{
opacity: 1;
}
.banner ol{
width: 200px;
height: 30px;
position: absolute;
left:30px;
bottom: 30px;
background-color: rgba(0,0,0,0.5);
border-radius: 15px;
display: flex;
justify-content: space-around;
align-items: center;
}
.banner ol li{
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
.banner ol li.active{
background-color: orange;
}
.banner div{
width: 40px;
height: 40px;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 30px;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
}
.left{
left: 30px;
}
.right{
right: 30px;
}
audio{
background-color:pink;
height: 50px;
width: 200px;
opacity: 0.15;
}
.tou{
background-image: url('img/15.jpg');
height: 500px;
width: 100%;
background-size: cover;
position: relative;
}
.tou1{
position: absolute; /* 设置为绝对定位 */
top: 40%;
left: 50%; /* 将文字水平居中 */
transform: translate(-50%, -50%); /* 将文字向左上角移动，使之居中 */
font-size: 100px; /* 设置字体大小 */
color:red;
z-index: 1; /* 将标题设置为最上层 */
}
.container {
}
.container img {
height: 250px;
width: 250px;
padding: 10px;
}
.container img:hover {
transform: scale(1.3);
}
.fl{
float: left;
}
.tou1:hover{
color:blue;
}
</style>2. main代码展示
<main class="home">
<h2>欢迎来到山东<i class="fa fa-hand-peace-o" style="font-size:36px"></i></h2>
<p>这是一个关于山东省的介绍页面。您可以通过二级导航来了解山东的历史文化、传统文化、景点推荐，以及交通情况和旅游攻略。希望这个页面能够帮助您更好地了解山东，为您的山东之行提供参考。</p>
<div class="container" fl>
<img src="img/1.png" alt="">
<img src="img/3.png" alt="">
<img src="img/7.png" alt="">
<img src="img/2.png" alt="">
<img src="img/13.jpg" alt="">
</div>
<div class="container" fl>
<img src="img/14.jpg" alt="">
<img src="img/4.png" alt="">
<img src="img/2.png" alt="">
<img src="img/12.jpg" alt="">
<img src="img/6.png" alt="">
</div>
</main>
<main class="history">
<div class="img-container"></div>
<h2>历史文化</h2>
<p>山东省位于中国东部沿海地区，拥有悠久的历史和丰富的文化遗产。自古以来，山东一直是政治、经济、文化和军事的重要中心。以下是关于山东省历史文化的简要介绍：
1. 古代文明：新石器时代晚期，山东地区就有人类在此繁衍生息。距今约6000年，山东龙山文化的出现标志着山东进入了文明史阶段。春秋战国时期，齐国、鲁国等诸侯国在山东地区崛起，成为当时的重要政治力量。
2. 文化遗产：山东省内拥有众多历史文化遗产，如孔庙、孔林、曲阜三孔、泰安天下第一泉、济南趵突泉等。这些景点见证了山东在中国历史进程中扮演的重要角色，也是中华文明的重要组成部分。
3. 历史名人：山东出产了许多杰出的历史名人，如孔子、曾子、孟子、墨子、荀子等。他们的学说和思想对后世产生了深远的影响，塑造了山东作为文化名城的形象。
4. 传统文化：山东传统文化源远流长，如儒家文化、道家文化、兵家文化等。这些文化传统在山东地区得到了广泛传承和发展，成为山东独特的文化特色。
总之，山东省凭借其优越的地理位置、丰富的历史文化遗产和杰出的历史名人，成为了中华文明的重要组成部分。在长期的历史发展过程中，山东留下了丰富的历史文化底蕴，为后人提供了宝贵的精神财富。</p>
</main>
<main class="culture">
<div class="img-container"></div>
<h2>传统文化</h2>
<p>山东省位于中国东部沿海地区，拥有丰富的传统文化。自古以来，山东就是礼仪之邦，儒家文化在这里有着深厚的根基。孔子、孟子等儒家圣人都曾在此游历讲学，对山东的文化产生了深远的影响。此外，山东还有悠久的文学传统，诸如《诗经》、《楚辞》等名篇都诞生于这片土地。山东的书法、绘画、雕塑等艺术形式也得到了蓬勃发展。</p>
<p>山东的传统民间艺术独具特色，如泰山皮影、龙泉青瓷、章丘铁锅等。这些传统手工艺品代表了山东人民的智慧和勤劳精神。山东的民间音乐、舞蹈、戏剧等表演艺术同样丰富多彩，如莱芜秧歌、潍坊评话等传统剧种深受当地民众喜爱。山东的节庆活动也非常丰富，如春节的祭灶、元宵节的闹花灯、端午节的龙舟比赛等，都是当地民俗文化的瑰宝。</p>
<p>总之，山东省凭借其深厚的历史底蕴和独特的地理特点，形成了丰富多样的传统文化。这些传统文化既体现了山东人民的精神风貌，也为中华文明的发展做出了贡献。</p>
</main>
<main class="traffic">
<div class="img-container"></div>
<h2>交通情况</h2>
<p>山东省位于中国东部沿海地区，东临黄海，西靠黄河，南接江苏、安徽两省，北濒渤海。山东省地理位置优越，交通发达，资源丰富，是中国重要的交通枢纽和经济大省。
1. 铁路：山东省内拥有京沪高速铁路、京福高速铁路、胶济高速铁路、青盐高速铁路等多条干线铁路。山东省的济南火车站是中国著名的铁路枢纽之一，连接着全国各地。
2. 高速公路：山东省内的高速公路网络发达，包括青银高速、京沪高速、济广高速、滨莱高速、荣乌高速等。这些高速公路连接了山东省与周边省份以及国内其他重要城市。
3. 航空：山东半岛地区拥有青岛流亭国际机场、烟台莱山机场等主要机场。这些机场为山东省内外的航班提供了便利，连接着全国各地及亚洲其他国家和地区。
4. 港口：山东省地处黄海之滨，拥有多个重要港口，如青岛港、烟台港、日照港、潍坊港等。这些港口是中国北方和东北亚地区的重要物流通道，货物运输便捷。
5. 国道和省道：山东省内有多条国道和省道贯穿全境，连接着各个城市和县区。虽然在现代交通中可能相对次要，但它们在乡村地区仍然具有重要作用。
总之，山东省交通便利，公路、铁路、航空和港口等多种交通方式相互衔接，形成了一个便捷的交通网络。这使得山东省成为了一个重要的经济区域和物流中心。</p>
</main>
<main class="driving">
<div class="img-container"></div>
<h2>自驾路线</h2>
<p>山东省地域辽阔，旅游资源丰富，有很多适合自驾游的路线。以下是一些推荐：
1. 济南至泰山：从济南市出发，沿G20高速公路前往泰安市。在泰山脚下停车后，可以徒步或乘坐缆车登上泰山，欣赏壮观的山景。下山后，可前往天街、大观园等景点游览。
2. 青岛至威海：从青岛市出发，沿S32高速公路前往威海市。途经石岛风景区、刘公岛景区等地，可以欣赏美丽的海滨风光。到达威海后，可以游览威海市区的著名景点，如国际海水浴场、荣成石岛等。
3. 烟台至蓬莱：从烟台市区出发，沿S205省道前往蓬莱市。途经养马岛、芝罘岛等风景名胜区，可以欣赏到烟台独特的海岸风光。到达蓬莱后，可以游览蓬莱阁、长岛渔家乐等景点。
4. 潍坊至临沂：从潍坊市区出发，沿G327国道前往临沂市。途经孟良崮战役遗址、沂蒙山等景点，可以了解到山东地区的历史文化和自然风光。到达临沂后，可以游览沂蒙山风景区、红嫂故里等景点。
5. 德州至泰山：从德州市出发，沿G327国道前往泰安市。在途中可以游览临邑县的九华山风景区、宁津县的黄河湿地公园等景点。到达泰安市后，可按照前面提到的泰山自驾游路线进行游览。
以上仅为山东省内部分自驾游路线推荐，具体行程可根据自身兴趣和时间安排进行调整。在行驶过程中，请注意安全驾驶，遵守交通规则。同时，尊重当地的风俗习惯和自然环境，保护好旅游资源。</p>
</main>
<main class="strategy">
<div class="img-container"></div>
<h2>网红打卡</h2>
<p>山东省位于中国东部沿海地区，拥有丰富的自然景观和人文景点。以下是一些建议的山东省旅游打卡攻略：
1. 青岛：青岛是山东省的一个著名海滨城市，以其美丽的海滩、红瓦绿树的德国建筑风格和啤酒文化而闻名。在青岛，您可以游览栈桥、小鱼山、德国总督府等景点，品尝当地的海鲜美食，还可以参观青岛啤酒厂了解啤酒酿造过程。
2. 济南：济南是山东省的省会，被誉为“泉城”。济南以趵突泉、大明湖、千佛山等景点著称。在济南，您可以欣赏美丽的泉水景观，游览历史文化名胜，品尝地道的山东美食。
3. 泰山：泰山是中国五岳之一，位于泰安市。登上泰山，您可以欣赏到壮观的山景，感受古人留下的文化遗产。此外，泰安市还有岱庙、天街等景点值得游览。
4. 烟台：烟台是山东省的一个沿海城市，以金沙滩、蓬莱阁等景点而闻名。在烟台，您可以欣赏到美丽的海景，游览蓬莱阁景区，了解神话传说。
5. 曲阜：曲阜是孔子故里，位于济宁市。在这里，您可以游览孔庙、孔林、周公庙等景点，了解孔子及儒家文化的历史。
6. 威海：威海是山东省的一个沿海城市，以刘公岛、成山头等景点著称。在威海，您可以欣赏美丽的海景，游览刘公岛风景区，了解甲午海战的历史。
这些仅仅是山东省众多旅游景点中的一部分。在制定行程时，请根据您的兴趣和时间安排选择合适的目的地。同时，注意查询各个景点的开放时间和门票价格，以便做好出行准备。</p>
</main>
<main class="food">
<div class="img-container"></div>
<h2>美食推荐</h2>
<p>山东省是中国的一个美食之乡，有许多著名的山东美食。以下是一些值得推荐的山东美食：
1. 煎饼果子：煎饼果子是一种流行的早餐食品，由薄饼和各种馅料组成，如鸡蛋、油条、豆腐等。山东各地都有自己的独特版本，比如济南的“大汉煎饼”、青岛的“海鲜煎饼”等。
2. 烤肉：烤肉是山东人喜欢的美食之一。烤肉串有羊肉串、牛肉串、鸡肉串等多种口味，配上啤酒或饮料非常爽口。
3. 葱油饼：葱油饼是一种传统的山东小吃，以酥脆的口感和浓郁的葱香味闻名。它通常是由面粉、葱花和油制成的。
4. 孔府菜：孔府菜是山东曲阜孔府内的菜肴，以其清淡、鲜美、精细而著称。其中最有名的菜品包括“八宝鸭”、“四喜丸子”等。
5. 烟台海鲜：烟台是一个海滨城市，拥有丰富的海产资源。烟台海鲜以新鲜、味美著称，尤其是螃蟹、虾、贝类等。
6. 泰山烧饼：泰山烧饼是泰安市的传统小吃，以酥脆的外皮和香甜的味道而闻名。它通常是由面粉、芝麻、糖、油等制成的。
以上是一些值得推荐的山东美食，希望您有机会尝试一下！</p>
</main>
<main class="us">
<div class="img-container"></div>
<h2>联系我们</h2>
<p>如果您需要联系我们，您可以添加QQ3403432186，我们会在第一时间与您取得联系，并尽快回复您的问题和需求。
通过联系我们，您不仅可以得到及时的帮助和支持，还能够分享您的想法和建议，帮助我们不断提升服务质量和用户体验。因此，如果您有任何问题或建议，请不要犹豫，随时联系我们。我们将竭诚为您服务，让您感受到最好的体验和服务，同时，欢迎来到山东旅游，好客山东欢迎您！</p>
</main>3. 总体框架展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>山东省简介</title>
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(45deg,palegoldenrod,palevioletred);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color:pink;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
nav li {
float: left;
}
nav a {
display: block;
padding: 10px;
color:aqua;
font-weight: bold;
text-decoration: none;
font-family:'楷体';
}
nav a:hover {
background-color: paleturquoise;
}
p{
font-size: 0.7cm;
font-family:'楷体';
}
.subnav {
display: none;
position: absolute;
z-index: 1;
background-color: plum;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
nav li:hover .subnav {
display: block;
}
.subnav a {
float: none;
display: block;
padding: 10px;
color:papayawhip;
font-weight: bold;
text-decoration: none;
}
.subnav a:hover {
background-color: palegreen;
}
main {
padding: 20px;
height: calc(100vh - 120px);
background-color: #FFF;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.history {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.home{
background: linear-gradient(45deg,aqua, plum);
height: 11px;
}
.history .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.culture {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.culture .img-container {
float: left;
margin-right: 20px;
width: 50%;
height: 500px;
background-image: url('img/000.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sight {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.sight .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/000.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.traffic {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.traffic .img-container {
float: left;
margin-right: 20px;
width: 50%;
height: 500px;
background-image: url('img/17.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.driving {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.driving .img-container {
float: left;
margin-right: 20px;
width: 50%;
height: 500px;
background-image: url('img/12.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.strategy {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.strategy .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/5.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.food {
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.food .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/18.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.us{
display: none;
background: linear-gradient(50deg,greenyellow,pink 70%);
}
.us .img-container {
float: right;
margin-left: 20px;
width: 50%;
height: 500px;
background-image: url('img/6.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
h1{
font-family: '楷体';
text-shadow: 10px 10px black; /* 为标题添加阴影效果 */
}
h2 {
margin-top:-10px;
font-family:'楷体';
color:black;
}
ul,ol,li{
list-style-type: none;
}
.aaa{
width: 100%;
height: 100%;
display: block;
}
.banner{
height: 500px;
width: 100%;
margin: 50px 0;
position: relative;
}
.banner ul{
width: 100%;
height: 100%;
}
.banner ul li{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top:0;
left: 0;
transition: opacity 2s linear;
}
.banner ul li.active{
opacity: 1;
}
.banner ol{
width: 200px;
height: 30px;
position: absolute;
left:30px;
bottom: 30px;
background-color: rgba(0,0,0,0.5);
border-radius: 15px;
display: flex;
justify-content: space-around;
align-items: center;
}
.banner ol li{
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
.banner ol li.active{
background-color: orange;
}
.banner div{
width: 40px;
height: 40px;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 30px;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
}
.left{
left: 30px;
}
.right{
right: 30px;
}
audio{
background-color:pink;
height: 50px;
width: 200px;
opacity: 0.15;
}
.tou{
background-image: url('img/15.jpg');
height: 500px;
width: 100%;
background-size: cover;
position: relative;
}
.tou1{
position: absolute; /* 设置为绝对定位 */
top: 40%;
left: 50%; /* 将文字水平居中 */
transform: translate(-50%, -50%); /* 将文字向左上角移动，使之居中 */
font-size: 100px; /* 设置字体大小 */
color:red;
z-index: 1; /* 将标题设置为最上层 */
}
.container {
}
.container img {
height: 250px;
width: 250px;
padding: 10px;
}
.container img:hover {
transform: scale(1.3);
}
.fl{
float: left;
}
.tou1:hover{
color:blue;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<script>
function showPage(page) {
document.querySelector('.home').style.display = 'none';
document.querySelector('.history').style.display = 'none';
document.querySelector('.culture').style.display = 'none';
document.querySelector('.driving').style.display = 'none';
document.querySelector('.traffic').style.display = 'none';
document.querySelector('.strategy').style.display = 'none';
document.querySelector('.food').style.display = 'none';
document.querySelector('.us').style.display = 'none';
document.querySelector('.' + page).style.display = 'block';
}
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="tou">
<audio controls autoplay>
<source src="img/33.mp3" type="audio/mpeg">
</audio>
<h1 class="tou1">好客山东欢迎您</h1>
</div>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<i class="fa fa-connectdevelop fa-spin" style="font-size:48px;color:deeppink"></i>
<nav>
<ul>
<li><a href="#" onclick="showPage('home')">首页</a></li>
<li>
<a href="#">山东简介</a>
<div class="subnav">
<a href="#" onclick="showPage('history')">历史文化</a>
<a href="#" onclick="showPage('culture')">传统文化</a>
</div>
</li>
<li>
<a href="#">交通情况</a>
<div class="subnav">
<a href="#" onclick="showPage('traffic')">公共交通</a>
<a href="#" onclick="showPage('driving')">自驾路线</a>
</div>
</li>
<li>
<a href="#">旅游打卡</a>
<div class="subnav">
<a href="#" onclick="showPage('strategy')">网红打卡</a>
<a href="#" onclick="showPage('food')">美食推荐</a>
</div>
</li>
<li>
<a href="#">联系我们</a>
<div class="subnav">
<a href="#" onclick="showPage('us')">联系我们</a>
</div>
</li>
</ul>
</nav>
<main class="home">
<h2>欢迎来到山东<i class="fa fa-hand-peace-o" style="font-size:36px"></i></h2>
<p>1</p>
<div class="container" fl>
<img src="img/1.png" alt="">
<img src="img/3.png" alt="">
<img src="img/7.png" alt="">
<img src="img/2.png" alt="">
<img src="img/13.jpg" alt="">
</div>
<div class="container" fl>
<img src="img/14.jpg" alt="">
<img src="img/4.png" alt="">
<img src="img/2.png" alt="">
<img src="img/12.jpg" alt="">
<img src="img/6.png" alt="">
</div>
</main>
<main class="history">
<div class="img-container"></div>
<h2>历史文化</h2>
<p>2</p>
</main>
<main class="culture">
<div class="img-container"></div>
<h2>传统文化</h2>
<p>3</p>
<p>4</p>
<p>5</p>
</main>
<main class="traffic">
<div class="img-container"></div>
<h2>交通情况</h2>
<p>6</p>
</main>
<main class="driving">
<div class="img-container"></div>
<h2>自驾路线</h2>
<p>7</p>
</main>
<main class="strategy">
<div class="img-container"></div>
<h2>网红打卡</h2>
<p>8</p>
</main>
<main class="food">
<div class="img-container"></div>
<h2>美食推荐</h2>
<p>9</p>
</main>
<main class="us">
<div class="img-container"></div>
<h2>联系我们</h2>
<p>10</p>
</main>
</body>
</html>最后，感谢观看，如果有帮助，给个三连吧，感谢感谢！
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
