Moolmool114.github.io/index.html at main · Moolmool114/Moolmool114.github.io · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站设计</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4795659_hpkhcyk1jf.css">
    <link rel="stylesheet" href="style.css"></link>
    <style>

    </style>
</head>

<body>
    <header class="header">

        <div class="top-left-text">
            <a href="#">
                <h1>欢迎光临</h1>
                <!-- 返回团队主页a标签 -->
                <a class="return-teampage" href="#team-page">返回团队主页</a>
            </a>

        </div>
        <nav class="nav">
            <a href="#home" id="nav-home" style="--delay:1">首页</a>
            <a href="#info" id="nav-info" style="--delay:2">个人信息</a>
            <a href="#picture" id="nav-picture" style="--delay:3">相册</a>
            <a href="#sharlin" id="nav-sharlin" style="--delay:5">链接分享</a>
            <i class='iconfont icon-close close'></i>
        </nav>

        <i class='iconfont icon-menu ham' style="--delay:7"></i>
    </header>
    <section class="section home" id="home">
        <!-- 主页背景 -->
        <div class="bgc">
            <div class="bg" style="--delay:0">
                <div class="overlay"></div>
            </div>
        </div>

        <div class="cont">
            <!-- 头像 -->
        </div>
        <div class="wrapt tbg">
            <div class="tbg-avatar"></div>
        </div>

        <!-- 介绍 -->
        </div>
        <p class="sub-title" style="--delay:8">大学 信息与智能工程学院 技术</p>
        <p class="desc" style="--delay:9">
            “我常会想那些原子,穿越140亿年的事件和空间来创造我们,为的是让我们彼此相遇,完整对方.就像地球上的一切，我们产生于早已灭绝的天体遗骸。一切的元素都产生于恒星内部氢原子与氦原子的核聚变。”</p>
        <div class="link">
            <div class="icon" style="--delay:11"> <i class='iconfont icon-weixin'></i></div>
            <div class="icon" style="--delay:12"> <i class='iconfont icon-QQ'></i></div>
            <div class="icon" style="--delay:13"><i class='iconfont icon-youxiang'></i></div>
        </div>
        <button class="btn" style="--delay:14">↓ 查看 ↓</button>
        </div>
    </section>
    <section class="section info" id="info">
        <h2>个人信息</h2>
        <table>
            <tr>
                <th>信息项</th>
                <th>详情</th>
            </tr>
            <tr>
                <td>姓名</td>
                <td>desheng liu</td>
            </tr>
            <tr>
                <td>年龄</td>
                <td>21岁</td>
            </tr>
            <tr>
                <td>大学</td>
                <td>大学</td>
            </tr>
            <tr>
                <td>专业</td>
                <td>技术/td>
            </tr>
            <tr>
                <td>微信</td>
                <td>15855899962</td>
            </tr>
            <tr>
                <td>电子邮箱</td>
                <td>15855896632@QQ.com</td>
            </tr>
        </table>

    </section>
    <section class="section picture" id="picture">
        <h2>相册</h2>
        <p>留住记忆的光,快来看看吧</p>
        <div class="gallery-slider">
            <!-- 轮播图容器 -->
            <div class="slider-wrapper">
                <div class="slide">
                    <img src="./img/呼之欲出.jpg" alt="图片不见啦">
                    <div class="caption">《呼之欲出》 一个夏日午后</div>
                </div>
                <div class="slide">
                    <img src="./img/雨后雾霭.jpg" alt="图片不见啦">
                    <div class="caption">《雨后雾霭》 国恩寺雨后</div>
                </div>
                <div class="slide">
                    <img src="./img/虹霞之下.jpg" alt="图片不见啦">
                    <div class="caption">《虹霞之下》 湖对岸的晚霞</div>
                </div>
            </div>
            <!-- 左右切换按钮 -->
            <button class="prev-button"><i class='iconfont icon-left-copy'></i></button>
            <button class="next-button"><i class='iconfont icon-right-copy'></i></button>
            <!-- 小圆点指示器容器 -->
            <div class="indicator-container">
                <span class="indicator active"></span>
                <span class="indicator"></span>
                <span class="indicator"></span>
                <!-- 根据图片数量动态添加更多小圆点 -->
            </div>
        </div>
    </section>

    <section class="section sharlin" id="sharlin">
        <h2 class="sharlin-title">链接分享</h2>
        <p class="sharlin-subtitle">一些有意思的链接，不妨点击去看看哦</p>
        <ul class="link-list">
            <li class="link-item">
                <a href="https://huaban.com/" target="_blank">
                    <div class="link-title">设计灵感网站</div>
                </a>
            </li>
            <li class="link-item">
                <a href="https://www.runoob.com/" target="_blank">
                    <div class="link-title">技术学习网站</div>
                </a>
            </li>
            <li class="link-item">
                <a href="https://pixabay.com/" target="_blank">
                    <div class="link-title">免版权图片网站</div>
                </a>
            </li>
        </ul>
    </section>
    <script src="javascript.js"></script>
</body>

</html>