29. 大学生HTML5期末大作业 ―【我的家乡聊城响应式自适应精品网页】 Web前端网页制作 html5+css3+js-CSDN博客

本文链接：https://blog.csdn.net/2401_90084105/article/details/145670444

一、网页概述

本实例应用html5+css3+js：导航菜单、图片轮翻、Fonts、视频、layui、登录注册切换页面，账号密码登录，登录弹框提示等。响应式自适应网页，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含5个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>走进聊城 - 跟随我们了解聊城</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link rel="shortcut icon" href="img/logo.png" >



<style>
@font-face{
font-family: "中山行书百年纪念版";
src: url("fonts/中山行书百年纪念版.ttf");
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="10">

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a href="index.html" class="navbar-brand">走进聊城</a>
</div>
<div class="navbar-collapse collapse" role="naviqation">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">首页</a></li>
<li><a href="scenery.html">美景</a></li>
<li><a href="food.html">美食</a></li>
<li><a href="humanity.html">人文</a></li>
       <li><a href="login.html">注册登录</a></li>
</ul>
</div>
</div>
</nav>

<div id="myCarousel" class="carousel slide">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<a href="scenery.html">
<img src="img/banner1.png" alt="First slide">
</a>
</div>
<div class="item">
<a href="food.html">
<img src="img/banner2.png" alt="Second slide">
</a>
</div>
<div class="item">
<a href="humanity.html">
<img src="img/banner3.png" alt="Third slide">
</a>
</div>
</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

<nav id="myScrollspy">
           <ul class="nav nav-pills nav-stacked" id="sidebar">
               <li><a href="#about">了解</a></li>
<li><a href="#environment">环境</a></li>
<li><a href="#resources">资源</a></li>
<li><a href="#population">人口</a></li>
<li><a href="#celebrity">名人</a></li>
<li><a href="#honor">荣誉</a></li>
<li><a href="#">
<img src="img/go-top.png" alt="go-top">
</a></li>
           </ul>
       </nav>

...

2.CSS

代码如下（节选示例）：

*{
padding: 0;
margin: 0;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: black;
text-decoration: none;
}
ul{
list-style: none;
}
/* 导航栏 */
.navbar{
background: rgba(248, 248, 248, 0.8);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.navbar-brand{
font-family: "中山行书百年纪念版";
font-size: 33px;
}
.navbar-default .navbar-nav>.active>a{
background:none;
color: #333333;
font-weight: 800;
}
.navbar-default .navbar-nav li:hover a{
background:#e7e7e7;
color: #555555;
}
/* 轮播图 */
.carousel{
margin-top: 50px;
}
.item img{
margin: 0 auto;
width: 100%;
}
/* 侧边导航栏 */
#myScrollspy{
visibility: hidden;
position: fixed;
background-color: white;
border: 1px solid #e7e7e7;
border-radius: 8px;
top:100%;
font-size: 10px;
text-align: center;
}
#sidebar li img{
height: 10px;
}
ul.nav-pills.affix{
top: 35%;
right: 0px;
background-color: white;
border: 1px solid #e7e7e7;
border-radius: 8px;
}
#about,#environment,#resources,#population,#celebrity,#honor,#most{
position: relative;
top: -100px; /*偏移值*/
display: block;
height: 0;
overflow: hidden;
}
/* 内容 */
.body{
padding: 50px 0;
background: #F4F4F4;
}
/* 内容-了解达州 */
.about-body{
margin: 0 auto;
width: 80%;
padding: 10px 30px;
background-color: white;
border-radius: 10px;
margin-bottom: 50px;
}
.about-body-body img{
padding: 15px 0;
}
.about-body-body p{
text-indent: 2em;
padding: 10px 0;
}
/* 内容-地理环境 */
.environment-body{
margin: 0 auto;
width: 80%;
padding: 10px 30px;
background-color: white;
border-radius: 10px;
margin-bottom: 50px;
}

...

3.JS

代码如下（节选示例）：

var myVideo=document.getElementById("video");

function playPause()
{
   if (myVideo.paused)
   myVideo.play();
   else
   myVideo.pause();
}
//reurn false 禁止函数内部执行其他的事件或者方法
var vol = 0.1; //1代表100%音量，每次增减0.1
var time = 10; //单位秒，每次增减10秒
var videoElement = document.getElementById("video");
console.log(videoElement.paused);

document.onkeyup = function (event) {//键盘事件

console.log("keyCode:" + event.keyCode);
var e = event || window.event || arguments.callee.caller.arguments[0];

//鼠标上下键控制视频音量
if (e && e.keyCode === 37) {

       // 按向左键
       videoElement.currentTime !== 0 ? videoElement.currentTime -= time : 1;
       return false;

} else if (e && e.keyCode === 39) {

       // 按向右键
       videoElement.volume !== videoElement.duration ? videoElement.currentTime += time : 1;
       return false;

}
};

...