492.大学生HTML5期末大作业 —【传统文化生肖老虎主题网页(页)】 Web前端网页制作 html5+css3+js-优快云博客

本文链接：https://blog.youkuaiyun.com/VX_L_5201314168/article/details/146534613

欢迎来到我的优快云主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-优快云博客

5000+网页案例完整代码，主题涵盖30+种类型:

一、网页简介

本实例应用html5+css3+js：导航菜单、图片轮翻、视频等。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含4个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" type="text/css" href="css/style.css"/>
       <script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script>
       <title>中国传统文化--虎</title>
   </head>
   <body>
       <div class="top1">
           <ul class="auto clearfix">
               <li style="background-color: rgba(253,253,253,.5);"><a href="index.html">首页</a></li>
               <li><a href="list.html">传统文化--虎</a></li>
               <li><a href="shengxiao.html">十二生肖--虎</a></li>
               <li><a href="shanshui.html">山水画--虎</a></li>
           </ul>
       </div>
       <div class="box clearfix">
           <div class="images">
               <img class="pimg" src="./images/banner.jpg" alt="">
               <img class="addimg pimg" src="./images/banner2.jpg" alt="">
               <img class="pimg" src="./images/banner3.jpg" alt="">
               <img class="pimg" src="./images/banner4.jpg" alt="">
               <img class="pimg" src="./images/banner5.jpg" alt="">
               <div class="left"></div>
               <div class="right"></div>
           </div>
           <ul class="list">
               <li class="oli">1</li>
               <li class="addli oli">2</li>
               <li class="oli">3</li>
               <li class="oli">4</li>
               <li class="oli">5</li>
           </ul>
       </div>
       <div class="video auto clearfix">
           <video width="800" height="450" controls="controls" autoplay="autoplay" loop="loop" src="video/1.mp4"></video>
       </div>
       <div class="con2 auto clearfix">
           <div>
               <img src="./images/1.jpg" alt="">
               <p>虎一直受到汉民族的崇拜，是正义、勇猛无适度、威严的象征。据考证，虎的形象在古羌戎族也有出现，但在我国西南地区最为流行。新石器时代良渚文化中的玉琮的兽面和殷商青铜器上的兽面都与虎的形象相似，直到今天我国的彝族、白族、布依族、土家族等民族仍称虎是其祖先。汉代人把虎看作是百兽之王。</p>
           </div>
           <div>
               <img src="./images/2.jpg" alt="">
               <p>白虎是上古四大神兽之一，而且仙人往往也乘白虎虎升天，是镇西之兽。自汉代以后虎一直成为劳动人民喜爱的保护神，而没有成为帝王的象征，经过漫长的历史演化与发展，崇虎的文化意识，已成为中华民族的共同的文化观念。 </p>
           </div>
           <div>
               <img src="./images/3.jpg" alt="">
               <p>虎符最早出现于春秋战国时期，当时采用铜制的虎形作为作为中央发给地方官或驻军首领的调兵凭证，称为虎符。虎符的背面刻有铭文，分为两半，右半存于朝廷，左半发给统兵将帅或地方长官，并且从来都是专符专用</p>
           </div>
       </div>
       <div class="fooeter">
           <p>
               Copyright © 2022 中国传统文化--虎--
           </p>
       </div>
   </body>
</html>

...

2.CSS

代码如下（节选示例）：

html{
   font-family: "microsoft yahei,arial, helvetica, sans-serif";
   font-size: 16px;
}
*{
   margin: 0;
   padding: 0;
   list-style: none;
}
a{
   text-decoration: none;
   color: #000;
}
.auto{
   margin: 0 auto;
}
.clearfix::after{
   content: '';
   display: block;
   clear: both;
}
.top1{
   width: 100%;
   height: 60px;
   background-color: #a65b18;
}
.top1 ul{
   width: 1200px;
   height: 60px;
}
.top1 ul li{
   width: 200px;
   height: 60px;
   float: left;
   line-height: 60px;
   text-align: center;
}
.top1 ul li:hover{
   background-color: rgba(253,253,253,.5);
}
.top1 ul li a{
   color: #fff;
   display: block;
}
.box{
   position: relative;
   width: 1200px;
   height: 500px;
   margin: 0 auto;
}
.images {
   position: absolute;
   width: 1200px;
   height: 500px;
}
.pimg {
   z-index: 0;
   position: absolute;
   width: 1200px;
   height: 500px;
   opacity: 0;
   transition: opacity 1s ;
}
.list {
   position: absolute;
   bottom: 15px;
   right: 15px;
   width: 220px;
   height: 40px;
   z-index: 3;
}
.oli {
   float: left;
   width: 40px;
   height: 40px;
   user-select: none;
   text-align: center;
   line-height: 40px;
   box-sizing: border-box;
   border: 1px solid #000;
   color: #000;
}
.oli~.oli{
   margin-left: 5px;
}
.oli:hover {
   cursor: pointer;
}
.addimg {
   z-index: 1;
   opacity: 1;
}
.addli {
   background-color: rgba(255,0,0,.5);
   color: #000;
}
.left,
.right {
   z-index: 2;
   position: absolute;
   top: 50%;
   margin-top: -18px;
   width: 25px;
   height: 36px;
   cursor: pointer;
   user-select: none;
   background-color: rgba(0,0,0,.4);
   text-align: center;
   line-height: 36px;
   color: #fff;
   transition: background-color 1s, color 1s ;
}
.left {
   left: 0;
   overflow: hidden;
}
.right {
   right: 0;
   overflow: hidden;
}