Lessons-Website/index.html at master · Aceap/Lessons-Website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web网站-教学大纲</title>
    <link href="image/web.png" rel="icon">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/change.js"></script>
    <style>
        @font-face {
        //导入字体
        font-family: 'Quicksand';
            src: url("font/Quicksand-VariableFont_wght.ttf");
        }

        #item {
            font-weight: 800;
            font-family: 'Quicksand', sans-serif;
            font-size: 100px;
            letter-spacing: .2rem;
            text-align: left;
            margin: 0 30px;
            color: transparent;
            text-shadow: 0 0 1px rgba(255, 255, 255, .6),
            0 4px 4px rgba(0, 0, 0, .05);
        }

        .Box {
            width: 100%;
            height: 135px;
            margin: 0 auto;
        }

        .row {
            margin: 10px;
            background-color: rgba(255, 255, 255, 0.4);
            padding: 10px;
            overflow: auto;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        .row a {
            /*display: block;*/
            /*float: left;*/
            width: 400px;
            height: 200px;
            margin: 20px;
            padding: 0 30px;
            border-radius: 6px;
            background-color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            color: black;
        }

        .row a img {
            width: 100px;
            border-radius: 50px;
            float: left;
        }

        .row a:hover {
            background-color: rgb(255, 255, 255);
            position: relative;
            bottom: 5px;
        }
    </style>
</head>

<body>
<div class="header"><a href="index.html" title="返回首页"><img alt="东华理工大学" src="image/logo.png"></a></div>

<ul class="topmenu">
    <li><a class="active" href="index.html">首页</a></li>
    <li><a href="html/html.html">课程介绍</a></li>
    <li><a href="html/ppt.html">教学课件</a></li>
    <li><a href="html/video.html">视频资料</a></li>
    <li><a href="html/liuyan.html">留言板</a></li>
</ul>

<hr color="white">

<div class="Box">
    <p id="item">HTML5</p>
</div>

<div class="row">
    <h2 style="text-align: center;width: 100%">全部教程</h2>
    <a href="html/html.html"><h2>【学习HTML】</h2><img src="image/html.jpg"><br>HTML即超文本编辑语言(Hyper Text Markup Language)</a>
    <a href="html/css.html"><h2>【学习CSS】</h2><img src="image/css.jpg"><br>层叠样式表(Cascading StyleSheet)</a>
    <a href="html/js.html"><h2>【学习JavaScript】</h2><img src="image/js.jpg"><br>JavaScript是web的编程语言</a>
</div>
<hr color="white">
<div class="foot" style="display: block">
    <h3 align="center" class="sign">陈龙的Web课程学习网站</h3>
    <h3 align="center" class="time"></h3>
</div>
</body>
<script type="text/javascript">
    let index = 0;
    let b = document.getElementsByClassName("Box");
    let pItem = document.getElementById("item");
    b[0].style.backgroundColor = 'rgba(228,77,39,0.5)';

    function changeItem() {
        index++;
        if (index >= 3) index = 0;
        for (let i = 0; i < 3; i++) {
            if (index == 0) {
                pItem.innerText = "HTML5";
                pItem.style.textAlign = "left";
                b[0].style.backgroundColor = 'rgba(228,77,39,0.5)';
            }
            if (index == 1) {
                pItem.innerText = "CSS";
                pItem.style.textAlign = "center";
                b[0].style.backgroundColor = 'rgba(10,113,170,0.5)';
            }
            if (index == 2) {
                pItem.innerText = "JavaScript";
                pItem.style.textAlign = "right";
                b[0].style.backgroundColor = 'rgba(103,169,105,0.8)';
            }
        }
    }

    setInterval(changeItem, 3500);//设置定时器0
</script>
</html>