第二次作业------仿制网站

码云链接:https://gitee.com/eiumc123/12.git

百度云链接:链接:https://pan.baidu.com/s/1ej-JvlRfRYe8KzGje-ULOQ
提取码:fnmv
(文件中有视频,过大无法上传到码云,所以。。。)

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title> 仿制网站</title>
  
 <style type="text/css"> 
  ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   border: 1px solid #e7e7e7;
   background-color: #000000;
  }
  li {
   float: left;
  }
  li a {
   display: block;
   color: #FFFFFF;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
  }
  li a:hover:not(.active) {
   background-color: #6C6C6C;
  }
  li a.active {
   color: white;
   background-color: #4CAF50;
  }
  </style>
  
   <style type="text/css">
   @import "2.css";
  </style>
  
  
 </head>
  <body  bgcolor="
#A0A0A0 ">
  <ul>
    <li><a class="active" href="https://www.ubisoft.com.cn/">首页</a></li>
    <li><a href="https://www.ubisoft.com.cn/games">游戏</a></li>
    <li><a href="http://ubi.li/e4emt">商城</a></li>
    <li><a href="https://www.ubisoft.com.cn/uplay">支持</a></li>
  </ul>

<script type="text/javascript" src="2.js"></script>
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 5</div>
    <div align="center"><img src="1.jpg"  width="100%" height="600" style="width:100%"></div>
    <div class="text"></div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">2 / 5</div>
    <div align="center"><img src="2.jpg"  width="100%" height="600" style="width:100%"></div>
    <div class="text"></div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">3 / 5</div>
    <div align="center"><img src="3.jpg" width="100%" height="600"  style="width:100%"></div>
    <div class="text"></div>
  </div>
 
   <div class="mySlides fade">
    <div class="numbertext">4 / 5</div>
    <div align="center"><img src="4.jpg" width="100%" height="600"  style="width:100%"></div>
    <div class="text"></div>
  </div>
 
    <div class="mySlides fade">
    <div class="numbertext">5 / 5</div>
    <div align="center"><img src="5.jpg" width="100%" height="600"  style="width:100%"></div>
    <div class="text"></div>
  </div>
 
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
  <script>
   var slideIndex = 0; 
   showSlides();
   
   function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}   
    for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 4000);
   }
  </script>
  
  <p><center><h1>全人物CG<h1></center></p>
  
  <p align="center">
  <video width="1000" height="900" muted loop controls autoplay="autoplay" >
  <source src="全人物.mp4" type="video/mp4">
  <source src="全人物.ogg" type="video/ogg">
  <source src="全人物.webm" type="video/webm">
  <object data="全人物.mp4" width="1000" height="900">
  <embed src="全人物.swf" width="1000" height="900">
  </object>
  </p>
  </video>
  
  <p><center><h1>起源<h1></center></p>
  <p align="center">
   <video width="1000" height="900" muted loop controls autoplay="autoplay">
  <source src="开始.mp4" type="video/mp4">
  <source src="开始.ogg" type="video/ogg">
  <source src="开始.webm" type="video/webm">
  <object data="开始.mp4" width="1000" height="900">
  <embed src="开始.swf" width="1000" height="900">
  </object>
  </p>
 </body>
 
</html>
 
 
主要实现了幻灯片轮换和水平导航栏,最后插入了两个彩虹六号的视频,添加了控制按钮和图标。
 
 

猜你喜欢

转载自www.cnblogs.com/eiumc123456/p/10632126.html