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

news/2024/5/21 0:14:34/文章来源:https://blog.csdn.net/aulbhlb313016/article/details/101396801

码云链接: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>
主要实现了幻灯片轮换和水平导航栏,最后插入了两个彩虹六号的视频,添加了控制按钮和图标。

转载于:https://www.cnblogs.com/eiumc123456/p/10632126.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_899864.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么在树莓派上搭建web网站,并发布到外网可访问?

系列文章 怎么在树莓派上搭建web网站&#xff0c;并发布到外网可访问&#xff1f;怎么在树莓派上搭建WordPress博客网站&#xff0c;并发布到外网可访问&#xff1f;如何为树莓派上的WordPress博客网站配置自己的域名&#xff0c;并且外网可访问&#xff1f;如何在局域网外SSH…

怎么在树莓派上搭建WordPress博客网站,并发布到外网可访问?

系列文章 怎么在树莓派上搭建web网站&#xff0c;并发布到外网可访问&#xff1f;怎么在树莓派上搭建WordPress博客网站&#xff0c;并发布到外网可访问&#xff1f;如何为树莓派上的WordPress博客网站配置自己的域名&#xff0c;并且外网可访问&#xff1f;如何在局域网外SSH…

如何为树莓派上的WordPress博客网站配置自己的域名,并且外网可访问?

系列文章 怎么在树莓派上搭建web网站&#xff0c;并发布到外网可访问&#xff1f;怎么在树莓派上搭建WordPress博客网站&#xff0c;并发布到外网可访问&#xff1f;如何为树莓派上的WordPress博客网站配置自己的域名&#xff0c;并且外网可访问&#xff1f;如何在局域网外SSH…

如何在树莓派上搭建网站,并发布上线(1)

系列文章 如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;1&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;2&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;3&#xff09;如何在树莓派上搭建网站&#xff0c;并发布…

如何在树莓派上搭建网站,并发布上线(2)

系列文章 如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;1&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;2&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;3&#xff09;如何在树莓派上搭建网站&#xff0c;并发布…

如何在树莓派上搭建网站,并发布上线(3)

系列文章 如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;1&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;2&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;3&#xff09;如何在树莓派上搭建网站&#xff0c;并发布…

如何在树莓派上搭建网站,并发布上线(4)

系列文章 如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;1&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;2&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;3&#xff09;如何在树莓派上搭建网站&#xff0c;并发布…

如何在树莓派上搭建WordPress网站 3-5

系列文章 如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;1&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;2&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;3&#xff09;如何在树莓派上搭建网站&#xff0c;并发布…

如何在树莓派上搭建WordPress网站 4-5

系列文章 如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;1&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;2&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;3&#xff09;如何在树莓派上搭建网站&#xff0c;并发布…

如何在树莓派上搭建WordPress网站 5-5

系列文章 如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;1&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;2&#xff09;如何在树莓派上搭建网站&#xff0c;并发布上线&#xff08;3&#xff09;如何在树莓派上搭建网站&#xff0c;并发布…

如何为搭建的网站配置自己的域名 1-2

系列文章 如何为搭建的网站配置自己的域名 1-2如何为搭建的网站配置自己的域名 2-2cpolar内网穿透如何配置自定义域名访问 在之前的系列文章中&#xff0c;我们向大家介绍了如何在本地树莓派上搭建属于自己的网站&#xff0c;并让这个网站能被公众互联网的用户安全访问。虽然这…

如何为搭建的网站配置自己的域名 2-2

系列文章 如何为搭建的网站配置自己的域名 1-2如何为搭建的网站配置自己的域名 2-2cpolar内网穿透如何配置自定义域名访问 上一篇&#xff1a; 如何为搭建的网站配置自己的域名 1-2 在上一篇文章中&#xff0c;我们通过在服务器上设置新的域名&#xff0c;并将新域名的指向引导…

如何在Ubuntu上搭建WordPress网站,并公网可访问 1-17

系列文章 如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 1-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 2-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 3-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 4-17如何在…

如何在Ubuntu上搭建WordPress网站,并公网可访问 2-17

系列文章 如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 1-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 2-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 3-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 4-17如何在…

如何在Ubuntu上搭建WordPress网站,并公网可访问 3-17

系列文章 如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 1-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 2-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 3-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 4-17如何在…

如何在Ubuntu上搭建WordPress网站,并公网可访问 4-17

系列文章 如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 1-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 2-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 3-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 4-17如何在…

如何在Ubuntu上搭建WordPress网站,并公网可访问 5-17

系列文章 如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 1-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 2-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 3-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 4-17如何在…

如何在Ubuntu上搭建WordPress网站,并公网可访问 6-17

系列文章 如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 1-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 2-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 3-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 4-17如何在…

如何在Ubuntu上搭建WordPress网站,并公网可访问 7-17

系列文章 如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 1-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 2-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 3-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 4-17如何在…

如何在Ubuntu上搭建WordPress网站,并公网可访问 8-17

系列文章 如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 1-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 2-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 3-17如何在Ubuntu上搭建WordPress网站&#xff0c;并公网可访问 4-17如何在…