【公益项目】阳光小站开发日记-优快云博客

本文链接：https://blog.youkuaiyun.com/klc114514/article/details/145301087

一、灵感的来源

几个月前，我突然在B站看到一个活动，是有关心理健康的，现在活动已经结束，但是通过活动，我似乎看出，我们周围，真的很多人存在这方面问题，也很多人需要帮助。于是，我计划做一个网站，帮助那些有心理问题的人。

二、准备工作

在正式编写之前，我先进行了简单的设计。

首先，网站标题“阳光小站”应该以h1标签居中。

下一行要用table标签和a标签写一个导航栏，方便用户转跳到不同页面。

为了传递正能量，我选择把我的联系方式放到网站上，方便大家投稿文章，分享快乐事（主要是我不会用js）

由于目前资金不足，我选择使用github-page的免费功能，把网站托管到上面。

所以，我们的域名是：阳光小站

在同一个项目下上传一个主页面和多个文件夹，这样就可以创建多个路由，尽可能充分利用有限的资源，创造更大价值。

为了让用户感到温馨，网页背景计划设为粉色。到这里，准备工作基本完成。

三、开始编写

经过一段时间的编写，网站第一个版本诞生：

但是，这样的版面，显得很不美观，于是，经过改进，第二个版本诞生，全部代码如下。

sun.html（主页）

<html style="background-color: pink;">
<head>
<meta charset="utf-8"/>
<title>阳光小站</title>
</head>

<body style="background-color: rgba(225,225,225,0.7);">
<h1 style="color:blue;text-align: center;">阳光小站Sunny Website</h1>
<table border='0' width='100%' style="background-color: pink;">
<tr style="font-size: 22px;text-align: center;">
<td><a href='sun.html'>快乐文章</a></td>
<td><a href='https://a.056h.cn/Index/yiyu_b_03.html?sid=MTMwXzE2NDA1NzU5OTU=&bd_vid=10390060769249863768'>心理测评</a></td>
<td><a href='atc.html'>文章投稿</a></td>
</tr>
</table>
<table border='0' width='100%'>
<tr style="font-size: 22px;text-align: center;">
<td><img src="1.png"></td>
<td><img src="2.png"></td>
<td><img src="3.png"></td>
<td><img src="4.png"></td>
<td><img src="5.png"></td>
<td><img src="6.png"></td>
<td><img src="7.png"></td>
<td><img src="8.png"></td>
<td><img src="9.png"></td>
<td><img src="10.png"></td>
</tr>
</table>
<h2 style="text-align: center;">期待你的文章！</h2>
<p style="text-align: center;"><a href='atc.html'>如果你有一些快乐的事，可以到这投稿，我们欢迎你的稿件~</a></p>
<table border='1' width='100%'>
<tr style="font-size: 20px;">
<td width='40%'><a href='1.html'><h3>这是测试文章，没有内容</h3></a></td>
<td>作者：雨中</td>
</tr>
</table>
</body>

</html>

代码中10张图片分别是网站主题“照亮每一个黑暗的角落”10个字的文字设计

1.html（测试文章）

<html style="background-color: pink;">
<head>
<meta charset="utf-8"/>
<title>阳光小站</title>
</head>

<body style="background-color: rgba(225,225,225,0.7);">
<h1 style="color:blue;text-align: center;">阳光小站Sunny Website</h1>
<table border='0' width='100%'>
<tr style="font-size: 22px;text-align: center;">
<td><a href='sun.html'>快乐文章</a></td>
<td><a href='https://a.056h.cn/Index/yiyu_b_03.html?sid=MTMwXzE2NDA1NzU5OTU=&bd_vid=10390060769249863768'>心理测评</a></td>
<td><a href='atc.html'>文章投稿</a></td>
</tr>
</table>
<table>
<tr>
<td><h1>测试文章</h1><p>作者：雨中</p></td>
<td><p>文字</p><p>正文内容</p></td>
</tr>
</table>
</body>

</html>

atc.html（投稿页面）

<html style="background-color: pink;">
<head>
<meta charset="utf-8"/>
<title>阳光小站</title>
</head>

<body style="background-color: rgba(225,225,225,0.7);">
<h1 style="color:blue;text-align: center;">阳光小站Sunny Website</h1>
<table border='0' width='100%'>
<tr style="font-size: 22px;text-align: center;">
<td><a href='sun.html'>快乐文章</a></td>
<td><a href='https://a.056h.cn/Index/yiyu_b_03.html?sid=MTMwXzE2NDA1NzU5OTU=&bd_vid=10390060769249863768'>心理测评</a></td>
<td><a href=''>文章投稿</a></td>
</tr>
</table>
<h1>投稿给我们：</h1>
<h2>投稿邮箱：klczyh@qq.com</h2>
<h2>QQ：2378817523</h2>
<h2>微信：klc114514</h2>
<h2 style='color:blue;'>你可以在这里分享你一切的快乐的事、郁闷中释然的经历或你认为优秀的影视作品等</h2>
<h2 style='color:blue;'>各位作者注意：投稿的文章需要含有标题、作者笔名、正文</h2>
</body>

</html>

最后一步：放github上！

github-page的使用这里不多解释，关于使用方法的文档很多。