HomeWork_2.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Домашняя работа №2</title>
</head>
<body>
    
    <style>
        .grain {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            background-color: rgb(100 100 100);
        }

        ol {
            padding-left: 20px;
            width: 130px;
            background-color: rgb(0,0,0,0.1);
        }

        li {
            color: white;
            font-size: 15px;
            font-family: Segoe UI;
            font-weight: 100;
        }

        ul {
            width: 130px;
            padding-left: 40px;
            margin-top: 1em;
            margin-bottom: 1em;
            background-color: rgb(0,0,0,0.1);
        }

        .innerUL {
            width: 90px;
            background-color: rgb(255, 0, 0,0.1);  
        }

        table {
            position: absolute;
            top: 50px;
            left: 250px;
        }
    </style>
    <table id="tbl"></table>
   <script>
      
       var table = document.getElementById("tbl");
       table.setAttribute("style", "position: absolute;  top: 30px; left: 170px;  width: 90px; height: 90px;");
       this.c = 1;
       g = 1;
       setTimeout(clr, 0);
       function clr() {
           while (table.firstChild) {
               table.removeChild(table.firstChild);
           } 
           for (i = 0; i < 4; i++) {
               var tr = document.createElement("tr");
               for (j = 0; j < 4; j++) {
                   var td = document.createElement("td");
                   var color = (j + i) % 2 == 0 ? "rgb(" + c + " " + c + " " + c + ")" : "rgb(" + (255 - c) + " " + (255 - c) + " " + (255 - c) + ")";
                   
                   td.setAttribute("style", " background-color:" + color);
                   tr.appendChild(td);
               }
               table.appendChild(tr);  
           }

           c = c + g;
           if (c > 254 || c < 1) g = -g;
           
           setTimeout(clr,10);
       }
              
   </script>

    <button onclick='location.replace("index.html")' style=" font-size: 15px; font-family: Segoe UI; font-weight: 100; position: relative; top: 10px; left: 10px;">Вернуться</button>
    <ol>
        <li>Я первый</li>
        <li>\/Он третий</li>
        <li>Согласен с ним/\</li>
        <li>Четвёртый(</li>
    </ol>
    <ul>
        <li>
            1
            <ul class="innerUL">
                <li>1.1</li>
                <li>1.2</li>
            </ul>
        </li>
        <li>
            2
            <ul class="innerUL">
                <li>2.1</li>
                <li>2.2</li>
            </ul>
        </li>
        <li>3</li>
    </ul>


    <canvas id="BackNoise" class="grain"></canvas>
    <script src="BackGroundNoise.js"></script>
</body>
</html>