main

分支 (1)

管理

管理

main

iyoahs_site
/
about.html

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <link rel="stylesheet" href="style/about.css">
</head>
<body>
    <div class="main-content">
        <div class="box-back">
            <img src="pic/back.png" onclick="backHome()">
        </div>
        <div class="content-top">
            <img src="pic/shaoyi.png">
            <div class="dialogue-box">
                <p>很高兴您能看到这里，感谢您对本站的探索！</p>
            </div>
            <div class="dialogue-box-2">
                <p>这是邵艺，你也可以叫我iyoahs(shaoyi逆序输出结果)。</p>
            </div>
        </div>

        <div class="section">
            <h2>关于本站</h2>
            <p>这是一个初学者制作的像素风格的个人主题网站。主题灵感源自日本乐队zutomayo的官方网站。网站主要使用HTML、CSS和JavaScript实现，旨在展示个人介绍并作为本次网站建设与管理课程的大作业。</p>
            <p>在网站设计中，我使用了来自Google Fonts、素材中国和阿里的iconfont作为主要字体和图像资源，插画则主要来自推特画师ななみ雪（@yuki77mi）和Kreum（@GuttyKreum）。背景音乐选自乐队yorushika和zutoamyo等。</p>
            <p>本网站将通过GitHub和Gitee进行静态网页托管。有关网站链接和使用的资源，查看文末或者代码仓库。</p>
        </div>

        <div class="section">
            <h2>灵感、想法</h2>
            <p>在构思这个网站的初期，我参考了zutomayo乐队的官方网站设计，并决定结合像素游戏风格来打造这个网站，以此为主题寻找相关素材。</p>
            <p>在主页的设计中，我选择了不同的主题颜色搭配不同的gif背景，通过消息框的形式来呈现主要内容。留言框和个人介绍框则是复刻了zutomayo官网上可拖动的复古消息提示框，我个人认为这个设计非常有趣。</p>
            <p>对于个人介绍框，我采用了信封交互的方式，通过弹出的信件来增强网站的交互性。而留言框则借鉴了聊天室的设计思路，以提升用户之间的交流体验。</p>
            <p>照片墙和动画推荐部分的设计理念是一致的，点击相应的图片可以改变背景，以适应不同的主题。最后的音乐推荐则是灵感来源于手机音乐播放器的设计。</p>
        </div>

        <div class="section">
            <h2>资源以及相关链接</h2>
            <ul>
                <li><a href="font/IPix-Chinese.ttf">像素字体下载（中文）</a> IPix-Chinese</li>
                <li><a href="font/PressStart2P-Regular.ttf">像素字体下载（英文）</a> PressStart2P</li>
                <li><a href="https://iyoahs314.github.io" target="_blank">github</a> 静态网页托管</li>
                <li><a href="https://iyoahs.gitee.io" target="_blank">gitee</a> 静态网页托管</li>
            </ul>
        </div>
    </div>
    <script src="script/about.js"></script>
</body>
</html>