A2021-A2022年度总结项目内容。（一）-阿里云开发者社区

本项目以前端网为主.主要有你一年半的所学所感所领悟。

这一年回顾一下自己学到了什么？学习是一个过程，在这个过程中你行为的每一步都算数

自己回顾回顾吧.到现在目前为止。

学的课程有java初级 Java高级 java的面向对象 java的面向过程 java的封装继承多态 jdbc

JavaScript初级内容 Html Css

这个学期开始前端的第二部分 jquery的基础操作 jquery的选择器事件效果

Css3 Html5新的属性

JSP网络编程中分为三个部分

第一部分了解了Servlect的几个对象

第二部分学习了jsp网络编程。

第三部分进入了MVC的实战部分。

Redis数据的缓存技术，学习了对数据的基本操作，用java连接Redis数据库。

计算机网络基础，让我了解到了几个基本服务器。

第一部分代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        *{
            font-size: 40px;
            background-image: linear-gradient(to right, linen ,lavenderblush, lavender);
            font-weight: bold;
            text-decoration: none;
            font-family: font;
        }
        @font-face {
            /* 自定义字体的名字 随便取 不需要加引号 */
            font-family: font;
            /* 字体所在的路径 */
            src: url('fzld.TTF');
        }
        h1{
            border-radius: 3%;
        }
        a{
            background-image: linear-gradient(to right, linen ,lavenderblush, lavender);
        }
    </style>
    <title>2021/12/24年度总结</title>
</head>
<body>
<h1 style="text-align: center;background: #75CDF9;   background-image: linear-gradient(to right, red ,green, lavender)">今天是2021年/12月/24号</h1>
<hr>
<h1><marquee style="background: #000000;color: white;background-color: #FF0000;">
    这一年回顾一下自己学到了什么？学习是一个过程，在这个过程中你行为的每一步都算数
    自己回顾回顾吧.到现在目前为止。
    学的课程有java初级 Java高级 java的面向对象  java的面向过程  java的封装 继承 多态 jdbc
    JavaScript初级内容 Html Css
    这个学期开始前端的第二部分 jquery的基础操作 jquery的选择器 事件 效果
    Css3 Html5新的属性
    JSP网络编程中分为三个部分
    第一部分 了解了Servlect的几个对象
    第二部分 学习了jsp网络编程。
    第三部分进入了MVC的实战部分。
    Redis数据的缓存技术，学习了对数据的基本操作，用java连接Redis数据库。
    计算机网络基础，让我了解到了几个基本服务器。
</marquee></h1>
<br>
<header>
    <h1 id="res" style="
color: red;
font-weight: bold;
font-family: 方正姚体;
background-image: linear-gradient(to right, linen ,lavenderblush, lavender);
border-radius: 10%;
border: 4px solid lightskyblue;
font-size: 40px;
text-align: center;
"></h1>
    <script type="text/javascript" class="rty">
        function test(year,month,day){
            var end =new Date(year,month-1,day);
            var leftTime=end.getTime()-Date.now();
            var day  =Math.floor(leftTime/1000/60/60/24);
            var h =Math.floor(leftTime/1000/60/60%24);
            var  m =Math.floor(leftTime/1000/60%60);
            var s =Math.floor(leftTime/1000/60);
            var str="距离2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
            res.innerHTML=str
        }
        setInterval("test(2021,12,31)",1000);
    </script>
</header>
<h2 style="background-color: #00BFFF;color: black;">
    这一年你学到了什么？
    自己回顾回顾吧.到现在目前为止回顾一下大纲吧。
    学的课程有java初级 Java高级 java的面向对象  java的面向过程  java的封装 继承 多态 jdbc
    JavaScript初级内容 Html Css
    这个学期开始前端的第二部分 jquery的基础操作 jquery的选择器 事件 效果
    Css3 Html5新的属性
    JSP网络编程中分为三个部分
    第一部分 了解了Servlect的几个对象
    第二部分 学习了jsp网络编程。
    第三部分进入了MVC的实战部分。
    Redis数据的缓存技术，学习了对数据的基本操作，用java连接Redis数据库。
    计算机网络基础，让我了解到了几个基本服务器。
</h2>
<article>
    <h3 style="background-color: #ECECEC;color: rosybrown; text-align: center;">听首音乐放松放松让自己的心情更加愉快</h3>
    <audio src="img/毛毛%20-%20奇迹再现.mp3"  controls="controls" >
        <source src="img/毛毛%20-%20奇迹再现.mp3"  type="audio/mp3" ></source>
        <source src="img/毛毛%20-%20奇迹再现.mp3"  type="audio/mp3"></source>
        <h1>IE浏览器不支持</h1>
    </audio>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="img/毛毛%20-%20奇迹再现.mp3" style="background-image: linear-gradient(to right, linen ,lavenderblush, lavender);
"> 点击这里下载音乐</a>
</article>
<a href="register.html" style="background-image: linear-gradient(to right, linen ,lavenderblush, lavender);
">点击这里进入主页面的访问内容</a>
<!--这里我作为页面的主页内容-->
<script>
    var hrl=document.createElement("hr");
    document.body.appendChild(hrl);
    var hrcolor=document.createAttribute("color");
    hrcolor.value="red";
    hrl.setAttributeNode(hrcolor);
</script>
<footer style="margin: auto;">
    2021-2022自己的留言表单：<textarea name="hellow" rows="10" cols="240" placeholder="欢迎各位的留言"></textarea>
    <script type="text/javascript">
        window.onload = function(){
            var speed = 20;
            var td1 = document.getElementById("td1");
            var td2 = document.getElementById("td2");
            td2.innerHTML = td1.innerHTML;
            var div1 = document.getElementById("div1");
            function goLeft(){
                if (td1.offsetWidth - div1.scrollLeft < 0) {
                    div1.scrollLeft = div1.scrollLeft - td1.offsetWidth;
                }else {
                    div1.scrollLeft++;
                }
            }
            setInterval(goLeft,speed);
        }
    </script>
    <div id="div1" style="overflow:hidden;width:800px;height:50px;">
        <table style="width: 800px;height: 45px;background-color: silver;">
            <tr>
                <td id="td1">
                    <table style="width: 1000px;height: 45px;background-color: lightcyan;">
                        <tr>
                            <td align="center"><font size="5px" color=red>欢迎来到我自己总结的一些内容页面</font></td>
                        </tr>
                    </table>
                </td>
                <td id="td2"></td>
            </tr>
        </table>
    </div>
</footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <!--注册页面-->
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0px;
            margin: 0px;
            background-image: linear-gradient(to right, linen ,lavenderblush, lavender);
            font-size: 30px;
            font-weight: bold;
            font-family: font;
            text-shadow: #FF0000 1px 1px 1px ;
        }
        @font-face {
            /* 自定义字体的名字 随便取 不需要加引号 */
            font-family: font;
            /* 字体所在的路径 */
            src: url('fzld.TTF');
        }
        input {
            border-radius: 4%;
            width: 200px;
            height: 30px;
            cursor: pointer;
            border: 2px #428bca outset;
        }
        .a-b-c {
            cursor: pointer;
        }
    </style>
    <script src="js/gVerify.js"></script>
    <title>欢迎来到2021-2022学期总结的注册页面</title>
</head>
<body>
<h1><marquee>欢迎你进入我的注册页面这里你会学习到表单的内容</marquee></h1>
<h1 style="color:white;background: lightcoral; text-align: center;font-size: 30px; font-weight: bold; text-shadow: #00BFFF 2px 3px ;">
    欢迎来到2021-2022学期总结的注册页面</h1>
<article style="align-content: center; text-align: center;" class="a-b-c">
    <form action="login.html" method="get">
        用户名：<input type="text" autofocus="autofocus" placeholder="请输入用户名" name="usename" multiple="multiple"><br>
        </label>
        用户手机号：<input type="text" placeholder="请输入用户手机号" autocomplete="off" autofocus="autofocus" name="telepon
      enum"/><br>
        用户QQ号：<input type="text" placeholder="请输入用户QQ号" multiple="multiple" autofocus="autofocus"/><br>
        用微信号：<input type="text" placeholder="请输入用户微信号" autofocus="autofocus"/><br>
        用户身份证：<input type="text" placeholder="请输入用户身份证号"/><br>
        密码：<input type="password" placeholder="请输入密码"/><br>
        再次输入密码:<input type="password" placeholder="请再次输入密码"/><br>
        性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br>
        爱好：<input type="checkbox" checked="checked">HTML CSS JAVASCRIPT JQUERY <input type="checkbox">
        阅读书籍<input type="checkbox">看电视<br>
        <div id="v_container"
             style="width: 200px;height: 50px; background: cyan;text-align: center; margin: auto; "></div>
        <input type="text" id="code_input" value="" placeholder="请输入图形验证码" height="100"/>
        <button id="my_button">验证</button>
        <br>
        <input type="submit" value="提交按钮"/>
        <input type="reset" autocomplete="off"/><br>
    </form>
    <br>
    <select style="width: 800px; background: lightskyblue;">
        <option>本页面的学习要点</option>
        <section>
            <option>1 如何使用表格</option>
            <option>2 如何自定义字体</option>
            <option>3 如何灵活运用CSS</option>
            <option>4 如何去总结自己学过的内容</option>
        </section>
    </select>
</article>
<!--注册时间-->
<center>
    <h1 id="res" style="background-color: black;
color: white;
font-weight: bold;
font-family: 方正姚体;
font-size: 40px;
text-align: center;
"></h1>
    <script type="text/javascript" class="rty">
        function test(year,month,day){
            var end =new Date(year,month-1,day);
            var leftTime=end.getTime()-Date.now();
            var day  =Math.floor(leftTime/1000/60/60/24);
            var h =Math.floor(leftTime/1000/60/60%24);
            var  m =Math.floor(leftTime/1000/60%60);
            var s =Math.floor(leftTime/1000/60);
            var str="距离2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
            res.innerHTML=str
        }
        setInterval("test(2021,12,31)",1000);
    </script>
</center>
<footer style="margin: auto;">
    留言表单：<textarea name="hellow" rows="10" cols="240" placeholder="欢迎各位的留言"></textarea>
    <script type="text/javascript">
        window.onload = function(){
            var speed = 20;
            var td1 = document.getElementById("td1");
            var td2 = document.getElementById("td2");
            td2.innerHTML = td1.innerHTML;
            var div1 = document.getElementById("div1");
            function goLeft(){
                if (td1.offsetWidth - div1.scrollLeft < 0) {
                    div1.scrollLeft = div1.scrollLeft - td1.offsetWidth;
                }else {
                    div1.scrollLeft++;
                }
            }
            setInterval(goLeft,speed);
        }
    </script>
    <div id="div1" style="overflow:hidden;width:800px;height:50px;">
        <table style="width: 800px;height: 45px;background-color: silver;">
            <tr>
                <td id="td1">
                    <table style="width: 1000px;height: 45px;background-color: lightcyan;">
                        <tr>
                            <td align="center"><font size="5px" color=red>欢迎来到我的个人注册页面,这里我们用到了一些表单的属性与内容</font></td>
                        </tr>
                    </table>
                </td>
                <td id="td2"></td>
            </tr>
        </table>
    </div>
</footer>
</body>
<!--JavaScript语言-->
<script>
    var verifyCode = new GVerify("v_container");
    document.getElementById("my_button").onclick = function () {
        var res = verifyCode.validate(document.getElementById("code_input").value);
        if (res) {
            alert("验证正确");
        } else {
            alert("验证码错误");
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>欢迎来到2021-2022学期总结的登录页面</title>
    <style>
      *{
        padding: 0px;
        margin: 0px;
        background-image: linear-gradient(to right, linen ,lavenderblush, lavender);
        font-size: 30px;
        font-weight: bold;
        font-family: font;
      }
      @font-face {
        /* 自定义字体的名字 随便取 不需要加引号 */
        font-family: font;
        /* 字体所在的路径 */
        src: url('fzld.TTF');
      }
      input{
        width: 200px;
        height: 30px;
        cursor: pointer;
        border-radius: 2%;
      }
    </style>
  </head>
  <body>
  <h1><marquee>欢迎你进入我的登录页面这里你会学习到一些登录的内容</marquee></h1>
    <h1 style="color:white;background: lightcoral; text-align: center;font-size: 30px; font-weight: bold;">欢迎来到2021-2022学期总结的登录页面</h1>
  <article style="text-align: center;">
    <div style="text-shadow: #FF0000 1px 1px 2px ; text-align: center;">
    <form action="主页面内容.html" method="post">
      用户名:<input type="text" name="name"  placeholder="请输入用户名"  maxlength="20"/><br>
      用账号:<input type="text" name="name"  placeholder="请输入用户账号的内容"  maxlength="20"/><br>
      密码：<input type="password" name="password" placeholder="请输入用户密码 " maxlength="8"/><br>
      登录：<input type="submit" value="点击登录按钮" />&nbsp;
      <input type="reset"  autocomplete="off" /><br>
    </form>
    </div>
    <select style="width: 800px; background: lightskyblue; font-size: 30px">
      <option>本页面的学习要点</option>
      <section>
        <option>1 基本标签</option>
        <option>2 导航栏</option>
        <option>3 css的外链式</option>
        <option>4 留言</option>
        <option>5 input的其他内容</option>
      </section>
    </select>
  </article>
  <center>
    <h1 id="res" style="background-color: black;
color: white;
font-weight: bold;
font-family: 方正姚体;
font-size: 40px;
text-align: center;
"></h1>
    <script type="text/javascript" class="rty">
            function test(year,month,day){
                var end =new Date(year,month-1,day);
                var leftTime=end.getTime()-Date.now();
                var day  =Math.floor(leftTime/1000/60/60/24);
                var h =Math.floor(leftTime/1000/60/60%24);
                var  m =Math.floor(leftTime/1000/60%60);
                var s =Math.floor(leftTime/1000/60);
                var str="距离2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
                res.innerHTML=str
            }
            setInterval("test(2021,12,31)",1000);
    </script>
  </center>
    <footer style="margin: auto;">
      <a href="input.html">点击这里进入input内容的学习</a>
      <br>
      <strong>留言表单：</strong><br>
  <textarea name="hellow" rows="10" cols="240" placeholder="欢迎各位的留言"></textarea>
      <script type="text/javascript">
                window.onload = function(){
                    var speed = 20;
                    var td1 = document.getElementById("td1");
                    var td2 = document.getElementById("td2");
                    td2.innerHTML = td1.innerHTML;
                    var div1 = document.getElementById("div1");
                    function goLeft(){
                        if (td1.offsetWidth - div1.scrollLeft < 0) {
                            div1.scrollLeft = div1.scrollLeft - td1.offsetWidth;
                        }else {
                            div1.scrollLeft++;
                        }
                    }
                    setInterval(goLeft,speed);
                }
      </script>
      <div id="div1" style="overflow:hidden;width:800px;height:50px;">
        <table style="width: 800px;height: 45px;background-color: silver;">
          <tr>
            <td id="td1">
              <table style="width: 1000px;height: 45px;background-color: lightcyan;">
                <tr>
                  <td align="center"><font size="5px" color=red>欢迎来到我的个人登录页面,这里我们用到了一些表单的属性与内容</font></td>
                </tr>
              </table>
            </td>
            <td id="td2"></td>
          </tr>
        </table>
      </div>
    </footer> 
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      * {
        background-image: linear-gradient(to right, linen ,lavenderblush, lavender);
        /*background-image: linear-gradient(0deg, deepskyblue, whitesmoke);*/
        font-size: 28px;
        font-weight: bolder;
        border: lavender 1px;
        color: black;
        text-decoration: none;
        list-style: none;
        font-size: 30px;
      }
      ul,
      li {
        list-style: none;
        margin: 0px;
        padding: 0px;
      }
      li {
        border: 2px solid #D4D4D4;
        text-align: center;
        border-radius: 20px;
      }
      ul {
        display: flex;
      }
      li {
        flex-grow: 1;
      }
      .rty{
        color: red;
      }
      .tyu{
        color: #C71585;
      }
    </style>
  </head>
  <body>
  <h1><marquee>欢迎你进入我的导航栏内容的学习这里是我的学习页面的主框架</marquee></h1>
    <h1 style="color:white;background: lightcoral; text-align: center;font-size: 30px; font-weight: bold;">欢迎来到主页面页面展示内容</h1>
    <!--导航栏-->
    <nav id="top">
      <ul class="topList">
        <li>
          <a href="Html的内容.html">HTML5的案例</a>
        </li>
        <li>
          <a href="Css的内容.html">CSS的学习</a>
        </li>
        <li>
          <a href="JAVAScript的内容.html">JavaScript的学习</a>
        </li>
        <li>
          <a href="Jquery的内容.html">Jquery的选择器</a>
        </li>
        <li>
          <a href="下拉菜单.html">下拉菜单主页面页面</a>
        </li>
        <li>
          <a href="register.html">注册页面</a>
        </li>
      </ul>
    </nav>
<!--中部内容-->
<iframe  src="../AAA2021年度总结/课件PPT的应用/Css文件.html" width="100%" height="400px;"></iframe>
<a>点击这里开始对CSS的学习</a>
  <hr>
  <iframe  src="../AAA2021年度总结/课件PPT的应用/JS.html" width="100%" height="400px;"></iframe>
  <a>点击这里开始对JAVASCRIPTANDJQUERY的学习</a>
  <hr>
  <iframe  src="../AAA2021年度总结/课件PPT的应用/后端.html" width="100%" height="400px;"></iframe>
  <a>点击这里开始对JSP的学习</a>
  <hr>
  <iframe  src="../AAA2021年度总结/课件PPT的应用/计算机网络基础.html" width="100%" height="400px;"></iframe>
  <a>点击这里开始对计算机网络的学习</a>
    <article>
      <!--倒计时-->
      <h1 id="res"></h1>
      <script type="text/javascript" class="rty">
                function test(year,month,day){
                    var end =new Date(year,month-1,day);
                    var leftTime=end.getTime()-Date.now();
                    var day  =Math.floor(leftTime/1000/60/60/24);
                    var h =Math.floor(leftTime/1000/60/60%24);
                    var  m =Math.floor(leftTime/1000/60%60);
                    var s =Math.floor(leftTime/1000/60);
                    var str="距2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
                    res.innerHTML=str
                }
                setInterval("test(2021,12,31)",1000);
      </script>
    </article>
  <center>
    <h1 id="res" style="background-color: black;
color: white;
font-weight: bold;
font-family: 方正姚体;
font-size: 40px;
text-align: center;
"></h1>
    <script type="text/javascript" class="rty">
            function test(year,month,day){
                var end =new Date(year,month-1,day);
                var leftTime=end.getTime()-Date.now();
                var day  =Math.floor(leftTime/1000/60/60/24);
                var h =Math.floor(leftTime/1000/60/60%24);
                var  m =Math.floor(leftTime/1000/60%60);
                var s =Math.floor(leftTime/1000/60);
                var str="距离2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
                res.innerHTML=str
            }
            setInterval("test(2021,12,31)",1000);
    </script>
  </center>
  <footer>
    <script type="text/javascript">
            window.onload = function(){
                var speed = 20;
                var td1 = document.getElementById("td1");
                var td2 = document.getElementById("td2");
                td2.innerHTML = td1.innerHTML;
                var div1 = document.getElementById("div1");
                function goLeft(){
                    if (td1.offsetWidth - div1.scrollLeft < 0) {
                        div1.scrollLeft = div1.scrollLeft - td1.offsetWidth;
                    }else {
                        div1.scrollLeft++;
                    }
                }
                setInterval(goLeft,speed);
            }
    </script>
    <div id="div1" style="overflow:hidden;width:800px;height:50px;">
      <table style="width: 800px;height: 45px;background-color: silver;">
        <tr>
          <td id="td1">
            <table style="width: 1000px;height: 45px;background-color: lightcyan;">
              <tr>
                <td align="center"><font size="5px" color=red>欢迎来到我的主页面,这里我们用到了一些表单的属性与内容</font></td>
              </tr>
            </table>
          </td>
          <td id="td2"></td>
        </tr>
      </table>
    </div>
  </footer>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
<style>
  * {
    /*background-image: linear-gradient(0deg, deepskyblue, whitesmoke);*/
    background-image: linear-gradient(to right, linen ,lavenderblush, lavender);
    font-size: 28px;
    font-weight: bolder;
    border: lavender 1px;
    color: black;
    text-decoration: none;
    list-style: none;
    font-size: 30px;
    font-family: "楷体";
  }
  ul,
  li {
    list-style: none;
    margin: 0px;
    padding: 0px;
  }
  li {
    border: 2px solid #D4D4D4;
    text-align: center;
    border-radius: 20px;
  }
  ul {
    display: flex;
  }
  li {
    flex-grow: 1;
  }
  .div1{
    width: 400px;
    height: 150px;
    overflow: hidden;
    border: 1px solid #A9A9A9;
    margin: 30px auto;
  }
  .ul1{
    position: relative;
    left: 0px;
    width: 1200px;
  }
  .ul1>li{
    position: relative;
    list-style: none;
    float: left;
    width: 200px;
    height: 150px;
    background: #3388FF;
  }
  .ul1>li>div{
    position: absolute;
    left: 0;
    top: 0;
    background: #A9A9A9;
    width: 200px;
    height: 150px;
    opacity: 0;
  }
  img{
    height: 100%;
  }
  @keyframes a {
    0%{
      transform: scale(1);
    }
    30%{
      transform: scale(0.5);
    }
    60%{
      transform: scale(1.7);
    }
    100%{
      transform: scale(2);
    }
  }
  div {
    width: 300px;
    height: 300px;
    border: lightblue solid 12px;
    margin: auto;
    background-size: 200px 200px;
    -webkit-animation-name: a;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 3;
    -webkit-animation-duration: 10s;
  }
</style>
  </head>
  <body>
    <h1 style="color:white;background: black; text-align: center;font-size: 30px; font-weight: bold;">欢迎来到HTML5页面展示内容</h1>
    <select style="width: 800px; background: lightskyblue;">
      <option>本项目的学习要点</option>
      <section>
      <option>1 基本标签</option>
      <option>2 导航栏</option>
      <option>3 css的外链式</option>
      <option>4 留言</option>
      </section>
    </select>
    <!--导航栏-->
    <nav id="top">
      <ul class="topList">
        <li>
          <a href="Html.html">Html基本内容的回顾一</a>
        </li>
        <li>
          <a href="WEB前端作业一.html">WEB前端作业一</a>
        </li>
        <li>
          <a href="WEB前端作业二.html">WEB前端作业二</a>
        </li>
        <li>
          <a href="new.html">案例一新闻网站</a>
        </li>
        <li>
          <a href="goshoping.html" >案例二购物网站</a>
        </li>
        <li>
          <a href="choujiang.html">抽奖游戏</a>
        </li>
        <li>
          <a href="weib.html">案例四微博网站</a>
        </li>
        <li>
          <a href="课程管理系统.html">案例五课程信息管理系统</a>
        </li>
        <li>
          <a href="天气网站.html">案例六天气网站</a>
        </li>
        <li>
          <a href="房屋设计.html">案例七房屋设计网站</a>
        </li>
          <li>
          <a href="myname.html">个人简历表</a>
        </li>
        <li>
          <a href="学院门户网站.html">案例10学院门户网站</a>
        </li>
        <li>
          <a href=" register.html">注册页面</a>
        </li>
        <li>
          <a href="com.html5-2.html">5-2</a>
        </li>
        <li>
          <a href="com.html5-3.html">5-3</a>
        </li>
        <li>
          <a href=" com.html5-5.html">5-5</a>
        </li>
      </ul>
    </nav>
    <center>
      <h1 id="res" style="background-color: black;
color: red;
border-radius: 30%;
border: solid 3px skyblue;
font-weight: bold;
font-family: 方正姚体;
font-size: 40px;
text-align: center;
"></h1>
      <script type="text/javascript" class="rty">
                function test(year,month,day){
                    var end =new Date(year,month-1,day);
                    var leftTime=end.getTime()-Date.now();
                    var day  =Math.floor(leftTime/1000/60/60/24);
                    var h =Math.floor(leftTime/1000/60/60%24);
                    var  m =Math.floor(leftTime/1000/60%60);
                    var s =Math.floor(leftTime/1000/60);
                    var str="距离2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
                    res.innerHTML=str
                }
                setInterval("test(2021,12,31)",1000);
      </script>
    </center>
    <center>
      <h1 style="text-align: center;padding-bottom: 20px;">PS的学习生涯一</h1>
      <div class="div1">
        <ul class="ul1">
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(41).jpg"  alt="" width="100%"/><div></div></li>
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(42).jpg"  alt="" width="100%"/><div></div></li>
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(43).jpg"  alt="" width="100%"/><div></div></li>
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(44).jpg"  alt="" width="100%"/><div></div></li>
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(45).jpg"  alt="" width="100%"/><div></div></li>
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(46).jpg"  alt="" width="100%"/><div></div></li>
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(47).jpg"  alt="" width="100%"/><div></div></li>
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(48).jpg"  alt="" width="100%"/><div></div></li>
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(49).jpg"  alt="" width="100%"/><div></div></li>
          <li><img  src="../AAA2021年度总结/图片自动轮换/img/A%20(50).jpg"  alt="" width="100%"/><div></div></li>
        </ul>
      </div>
      <script>
                $(function(){
                    var $time = '';
                    var mi = 0;
                    gundong();
                    function gundong(){
                        $time = setInterval(function(){
                            mi += -10;
                            if (mi<-800) {
                                mi = 0
                            }
                            $('.ul1').css({
                                marginLeft: mi+'px'
                            });
                        },100);
                    }
                    $('li').mouseover(function(){
                        window.clearTimeout($time);
                        $('li').not($(this)).contents('div').css({
                            opacity:1
                        });
                    });
                    $('li').mouseout(function(){
                        gundong();
                        $('li').not($(this)).contents('div').css({
                            opacity:0
                        });
                    });
                });
      </script>
    </center>
    <center style="text-align: center;">
      <audio src="../AAA2021年度总结/音频视频网站/img/as.mp3"  controls="controls" >
        <source src="../AAA2021年度总结/音频视频网站/img/as.mp3"  type="audio/mp3" ></source>
        <source src="../AAA2021年度总结/音频视频网站/img/as.mp3"   type="audio/mp3"></source>
        当前浏览器不支持audio
      </audio>
    </center>
    <footer style="margin: auto;">
    留言表单：<textarea name="hellow" rows="10" cols="240" placeholder="欢迎各位的留言"></textarea>
    </footer>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="CSS学习文件/twoname.css"/>
<body>
<h1 style="color:white;background: lightcoral; text-align: center;font-size: 30px; font-weight: bold;">
    欢迎来到CSS3的学习页面展示内容</h1>
<!--导航栏-->
<nav id="top">
    <ul class="topList">
        <li><a href="../WWeb项目/CSS学习文件/CSS学习内容一.html">CSS学习内容第一模块</a></li>
        <li><a href="../WWeb项目/CSS学习文件/CSS学习内容二.html">CSS学习内容第二模块</a></li>
        <li>
            <a href="../WWeb项目/CSS学习文件/圆角边框.html">圆角边框</a>
        </li>
        <li>
            <a href="../WWeb项目/CSS学习文件/圆角属性一.html">圆角属性</a>
        </li>
        <li>
            <a href="../WWeb项目/CSS学习文件/渐变.html">CSS3的渐变</a>
        </li>
        <li>
            <a href="../WWeb项目/CSS学习文件/动画的旋转.html">动画的旋转</a>
        </li>
        <li>
            <a href="../WWeb项目/CSS学习文件/动画打字机.html">Css3的动画打字机</a>
        </li>
        <li>
            <a href="../WWeb项目/CSS学习文件/动画来回循环.html">CSS3动画来回循环</a>
        </li>
        <li>
            <a href="../WWeb项目/CSS学习文件/属性选择器.html">属性选择器</a>
        </li>
        <li>
            <a href="../WWeb项目/CSS学习文件/弹性布局1.html">弹性布局</a>
        </li>
            <a href="register.html">注册</a>
        </li>
    </ul>
</nav>
    <iframe src="图片自动轮换/图片轮换二.html" width="100%"></iframe>
<article>
    <center>
        <h1 id="res" style="background-color: black;
color: white;
font-weight: bold;
font-family: 方正姚体;
font-size: 40px;
text-align: center;
"></h1>
        <script type="text/javascript" class="rty">
            function test(year,month,day){
                var end =new Date(year,month-1,day);
                var leftTime=end.getTime()-Date.now();
                var day  =Math.floor(leftTime/1000/60/60/24);
                var h =Math.floor(leftTime/1000/60/60%24);
                var  m =Math.floor(leftTime/1000/60%60);
                var s =Math.floor(leftTime/1000/60);
                var str="距离2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
                res.innerHTML=str
            }
            setInterval("test(2021,12,31)",1000);
        </script>
    </center>
</article>
<footer style="margin: auto;">
    留言表单：<textarea name="hellow" rows="10" cols="240" placeholder="欢迎各位的留言"></textarea>
</footer>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JQUERY的学习</title>
    <style>
      * {
        /*background-image: linear-gradient(0deg, deepskyblue, whitesmoke);*/
        background: paleturquoise;
        font-size: 28px;
        font-weight: bolder;
        border: lavender 1px;
        color: black;
        text-decoration: none;
        list-style: none;
        font-size: 30px;
        font-weight: bolder;
        font-family: Candara;
      }
      ul,
      li {
        list-style: none;
        margin: 0px;
        padding: 0px;
      }
      li {
        border: 2px solid #D4D4D4;
        text-align: center;
        border-radius: 20px;
      }
      ul {
        display: flex;
      }
      li {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <h1 style="color:white;background: lightcoral; text-align: center;font-size: 30px; font-weight: bold;">欢迎来到JAVASCRIPT的案例学习页面展示内容</h1>
    <!--导航栏-->
    <nav id="top">
      <ul class="topList">
        <li><a href="../WWeb项目/JavaScript案例/2021年倒计时.html">2021年倒计时</a></li>
        <li><a href="../WWeb项目/JavaScript案例/BOM%20与%20ROM.html">BOM%20与%20ROM</a></li>
        <li><a href="../WWeb项目/JavaScript案例/E--7.html">E--7</a></li>
        <li><a href="../WWeb项目/JavaScript案例/function.html">function</a></li>
        <li><a href="../WWeb项目/JavaScript案例/javascript3.html">javascript3</a></li>
        <li><a href="../WWeb项目/JavaScript案例/javascript4.html">javascript4.</a></li>
        <li><a href="../WWeb项目/JavaScript案例/javascript5.html">javascript5</a></li>
        <li><a href="../WWeb项目/JavaScript案例/parseFloat与parseInt.html">parseFloat与parseInt</a></li>
        <li><a href="../WWeb项目/JavaScript案例/String.html">String</a></li>
        <li><a href="../WWeb项目/JavaScript案例/函数.html">函数</a></li>
      </ul>
    </nav>
<br>
    <nav id="top1">
      <ul class="topList">
        <li><a href="../WWeb项目/JavaScript案例/函数二.html">函数二</a></li>
        <li><a href="../WWeb项目/JavaScript案例/动态窗口橱窗.html">动态窗口橱窗</a></li>
        <li><a href="../WWeb项目/JavaScript案例/动态表格.html">动态表格</a></li>
        <li><a href="../WWeb项目/JavaScript案例/图片的效果.html">图片的效果</a></li>
        <li><a href="../WWeb项目/JavaScript案例/圆的计算.html">圆的计算.</a></li>
        <li><a href="../WWeb项目/JavaScript案例/字符串对象.html">字符串对象</a></li>
        <li><a href="../WWeb项目/JavaScript案例/弹窗.html">弹窗</a></li>
        <li><a href="../WWeb项目/JavaScript案例/循环语句.html">循环语句</a></li>
        <li><a href="../WWeb项目/JavaScript案例/成绩管理.html">成绩管理</a></li>
      </ul>
    </nav>
    <br>
    <nav id="top2">
      <ul class="topList">
      <li><a href="../WWeb项目/JavaScript案例/数据的练习题.html">数据的练习题</a></li>
      <li><a href="../WWeb项目/JavaScript案例/数组Array.html">数组Array</a></li>
      <li><a href="../WWeb项目/JavaScript案例/数组Array2.html">数组Array2</a></li>
      <li><a href="../WWeb项目/JavaScript案例/日期.html">日期.</a></li>
      <li><a href="../WWeb项目/JavaScript案例/本地存储.html">本地存储</a></li>
      <li><a href="../WWeb项目/JavaScript案例/注册.html">注册</a></li>
      <li><a href="JavaScript案例/五.html">登录居中</a></li>
      <li><a href="../WWeb项目/JavaScript案例/简易选项卡.html">简易选项卡</a></li>
      <li><a href="../WWeb项目/JavaScript案例/表格的删除.html">表格的删除</a></li>
        <li><a href="../WWeb项目/JavaScript案例/5-2.html">5-2</a></li>
        <li><a href="../WWeb项目/JavaScript案例/5-16.html">5-16</a></li>
      <li><a href="../WWeb项目/Jquery效果文件学习/Jquery效果主窗口.html">Jquery效果主窗口</a></li>
      <li><a href="../WWeb项目/Jquery事件文件的学习/Jquery事件主窗口.html">Jquery事件主窗口</a></li>
      </ul>
    </nav>
    <article>
      <center>
        <h1 id="res" style="background-color: black;
color: white;
font-weight: bold;
font-family: 方正姚体;
font-size: 40px;
text-align: center;
"></h1>
        <script type="text/javascript" class="rty">
                    function test(year,month,day){
                        var end =new Date(year,month-1,day);
                        var leftTime=end.getTime()-Date.now();
                        var day  =Math.floor(leftTime/1000/60/60/24);
                        var h =Math.floor(leftTime/1000/60/60%24);
                        var  m =Math.floor(leftTime/1000/60%60);
                        var s =Math.floor(leftTime/1000/60);
                        var str="距离2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
                        res.innerHTML=str
                    }
                    setInterval("test(2021,12,31)",1000);
        </script>
      </center>
    </article>
    <footer style="margin: auto;">
      留言表单：<textarea name="hellow" rows="10" cols="240" placeholder="欢迎各位的留言"></textarea>
    </footer>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="CSS学习文件/twoname.css" />
  <body>
    <h1 style="color:white;background: lightcoral; text-align: center;font-size: 30px; font-weight: bold;">欢迎来到JQUERY选择器的案例学习页面展示内容</h1>
    <!--导航栏-->
    <nav id="top">
      <ul class="topList">
        <li><a href="../WWeb项目/Jquery选择器学习文件/选择器主窗口.html">选择器主窗口</a></li>
        <li><a href="../WWeb项目/Jquery事件文件的学习/Jquery事件主窗口.html">Jquery事件主窗口</a></li>
        <li><a href="../WWeb项目/Jquery效果文件学习/Jquery效果主窗口.html">Jquery效果主窗口</a></li>
        <li><a href="../WWeb项目/jqueryAPL.html">jqueryAPL.html</a></li>
      </ul>
    </nav>
    <article>
      <center>
        <h1 id="res" style="background-color: black;
color: white;
font-weight: bold;
font-family: 方正姚体;
font-size: 40px;
text-align: center;
"></h1>
        <script type="text/javascript" class="rty">
                    function test(year,month,day){
                        var end =new Date(year,month-1,day);
                        var leftTime=end.getTime()-Date.now();
                        var day  =Math.floor(leftTime/1000/60/60/24);
                        var h =Math.floor(leftTime/1000/60/60%24);
                        var  m =Math.floor(leftTime/1000/60%60);
                        var s =Math.floor(leftTime/1000/60);
                        var str="距离2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
                        res.innerHTML=str
                    }
                    setInterval("test(2021,12,31)",1000);
        </script>
      </center>
    </article>
<iframe src="../AAA2021年度总结/课件PPT的应用/JS.html" width="100%" height="400px">
</iframe>
    <br>
    <iframe src="../AAA2021年度总结/课件PPT的应用/Css文件.html " width="100%" height="400px">
    </iframe>
    <footer style="margin: auto;">
      留言表单：<textarea name="hellow" rows="10" cols="240" placeholder="欢迎各位的留言"></textarea>
    </footer>
  </body>
</html>

A2021-A2022年度总结项目内容。（一）

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

A2021-A2022年度总结项目内容。（一）

热门文章

最新文章

相关电子书