簡介
此篇純屬娛樂，還望不要介懷。行外看精彩，行內看笑話。
本篇，獻給那些零基礎，想學點創意，娛樂，或者來兩行代碼去表白的人。（程序員，也可以是很浪漫的，直男，也有心中旁人無法讀懂的美。希望此篇能對你有所幫助）
概要
該篇目錄大致如下：
一 ：代碼定時關機&取消；
二 ：vbs彈窗表白&整人；
三 ：html樣式表白
四 ：小遊戲加表白
一：代碼定時關機和取消
1.1，代碼定時關機
此處我們用vsb來實現（vsb是一種腳本語言，一般系統都能支持）
CreateObject("Wscript.Shell").run "cmd.exe /c shutdown -s -t 12"
一行代碼，給你不一樣的關機體驗，上訴爲定時關機，下面講解步驟，共三步即可：
① 創建一個記事本文件
②將上訴代碼無格式張貼放進去
③保存並修改文件後綴爲.vbs
然後雙擊運行即可。時間可自行修改上訴代碼，示例如下：
//該部分末尾12 表示秒。可自行修改
//該代碼的意思是表示電腦在12秒後關機
CreateObject("Wscript.Shell").run "cmd.exe /c shutdown -s -t 12"
1.2，取消關機
在上訴12秒時間內，可用。
代碼：
CreateObject("Wscript.Shell").run "cmd.exe /c shutdown -a"
步驟如上，雙擊即可取消
贈送 **手動無鼠操作，一套走：
①Windows鍵 + R鍵
②輸入cmd
③輸入shutdown -s
二：vbs彈窗表白&整人
1.1，彈窗表白
該部分代碼依舊是vbs文件，大致是雙擊文件後彈窗，你不接受我，我就不讓你關閉不了這個彈窗（過程是比較now的，可以改爲不接受我就把你電腦轟炸掉或讓你關機，乃至植入木馬，這種就有點過分了，暫不傳授），該部分可在任務管理器中強行結束，代碼如下：
①簡單無強制彈窗（代碼如下）
msgbox("做我女朋友好嗎")
msgbox("房產證上寫你的名字")
msgbox("保大")
msgbox("我媽會游泳")
過程同上，中文部分可自行修改，每一個msgbox爲一次彈窗，上述彈窗四次，雙擊運行即可
②強制必須同意彈窗（代碼如下）
const title = "小明給小花"
const yourname = "我也愛你"
const question = "我對你愛慕已久，希望。。。。。，如果你愛我，請在下面輸入“我也愛你” "
const info ="不，這不是你的真實答案，請重新輸入"
const scend ="那我們約會把吧，地點學校小公園，明天下午四點，不見不散"
dim youranswer
do
youranswer = inputbox(question, title)
if youranswer <> yourname then msgbox info,vbinformation+vbokonly,title
loop until youranswer = yourname
msgbox scend,vbinformation+vbokonly,title
步驟同一，雙擊即可，中文部分可自行改動。（有時，放手也是一種選擇，給出兩種強行關掉的方法，①關機重啓，②任務管理器（Ctrl+Shift+~)關掉改進程—推薦該方法，③通過cmd命令殺死）
1.2，彈窗整人
同上，只是換點文字，換種玩法，代碼如下
const title = "誰是豬測試"
const yourname = "小明"
const question = "此乃機密文件，請大聲告訴我，誰是pig,請沉默三秒，並將答案填在下面"
const info ="不，這不是你的真實答案，請重新輸入"
const scend ="你說的太對了，小明你就是一坨豬，歡迎下次光臨"
dim youranswer
do
youranswer = inputbox(question, title)
if youranswer <> yourname then msgbox info,vbinformation+vbokonly,title
loop until youranswer = yourname
msgbox scend,vbinformation+vbokonly,title
三：html樣式表白
該部分如果需要修改代碼，需要一點簡單代碼基礎，不過電腦本身不需要安裝什麼支持，可直接操作和上手，介紹及效果如下
我的文件目錄：
上圖爲所需文件。以下爲部分講解：
①提問不同意便彈窗部分
不願意時，會有類似上訴詞條彈處，同意便是後面的煙花部分了，而上述彈出詞條可改
用記事本打開
tallk.js文件
代碼演示：
$(function() {
$('#yes').click(function(event) {
modal('我就知道小姐姐您一定會願意的。(^_^)', function() {
$('.page_one').addClass('hide');
$('.page_two').removeClass('hide');
// typeWrite();
fireworks();
});
});
$('#no').click(function(event) {
modal('明人不說暗話！', A);
});
});
function A() {
modal('我喜歡你！', B);
}
function B() {
modal('我知道你在等我這一句話', C);
}
function C() {
modal('請您不要拒絕我', D);
}
function D() {
modal('拒絕我，不存在的', E);
}
function E() {
modal('這輩子都不可能讓你離開我', F);
}
function F() {
modal('跟我走吧', G);
}
function G() {
modal('房產證上寫你名', H);
}
function H() {
modal('我會做飯', I);
}
function I() {
modal('愛你。麼麼噠！', J)
}
**上訴代碼表示如果沒有同意的情況下，你點確定，會重複彈處如上，不過當道方法I，及彈處愛你/麼麼噠時，後面有個j,表示調用了方法j，而j寫了結束該部分，就會直接帶你去看煙花，文字部分可改**
function J() {
modal('行，我們去民政局登記吧', function() {
fireworks();
});
}
function fireworks() {
$('.page_one').addClass('hide');
initAnimate();
}
function modal(content, callback) {
var tpl = '<div class="container">'+
'<div class="mask"></div>'+
'<div class="modal">'+
'<p>'+ content +'</p>'+
'<button type="button" id="confirm" class="confirm">確定</button>'+
'</div>'+
'</div>';
$('body').append(tpl);
$(document).on('click', '.confirm', function() {
$('.container').remove();
callback();
});
}
②煙花部分：
效果：
可用記事本打開上訴html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
body{margin:0;padding:0;overflow: hidden;} .city{width:100%;position:fixed;bottom:
0px;z-index: 100;} .city img{width: 100%;}
audio{
opacity: 0;
}
</style>
<title>
放煙花 <!--此部分爲標題，可改-->
</title>
<link href="modal.css" rel="stylesheet"/>
</head>
<body onselectstart="return false">
<!--對話部分-->
<div class="share_img"><img src="a8b.png" alt=""></div>
<div class="page_one">
<div class="content">
<div class="text_wrapper">
<img src="a8.png" alt="">
<div class="text">
小姐姐，我好喜歡你，你願意做我女朋友嗎？<!--頁面提問部分，可改-->
</div>
</div>
</div>
<div class="btn-groups">
<div class="heart-btn">
<div id="yes" class="btn btn-a"><span>願意</span></div>
</div>
<div id="no" class="btn btn-b"><span>不願意</span></div>
</div>
</div>
<!--煙花部分-->
<canvas id='cas' style="background-color:rgba(0,5,24,1)">
瀏覽器不支持canvas
</canvas>
<div class="city">
<img src="city.png" alt="" />
</div>
<img src="moon.png" alt="" id="moon" style="visibility: hidden;" />
<div style="display:none">
<!--以下爲煙花效果部分，就是煙花爆炸形成的文字，
可改，也可以自己找個文字圖像放進去。
特指裏面的文字部分，如果你想加煙花，複製一個div部分，在如下添加即可-->
<div class="shape">
520
</div>
<!--上面從<div-...../div>爲一個，裏面520可換成自己想實現的效果-->
<div class="shape">
浩浩
</div>
<div class="shape">
茫茫人海
</div>
<div class="shape">
相遇是緣
</div>
<div class="shape">
哈哈哈哈哈哈哈
</div>
</div>
<!--音樂部分-->
<audio autoplay loop id="music">
<source src="music.mp3" />
</audio>
<iframe id="iframMusic" allow="autoplay" style="display:none" src="blank.mp3"></iframe>
<script src="jquery.min.js"></script>
<script src="fire.js"></script>
<script src="talk.js"></script>
</body>
</html>
上訴爲html部分，效果如下：
③另有背景音樂music.mp3文件，可自行修改，但文件及後綴名，目錄相同必須
四：小遊戲加表白
該部分目錄結構如上，分問三個hmtl,又可分爲三個部分：
①index.html,小遊戲部分，是一個打地鼠的遊戲，純html寫的，效果嘛，試試就知道了，不過哄女孩子應該還行。只有當你拿到一百積分通關後才能看到後面的東西，當然，通關積分可控，定個幾萬分也沒問題，只要你不怕。
效果如下：
展示：
<!--<!DOCTYPE html>-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>愛的遊戲</title>
<style>
body{
background-image: url(image/bg.jpg);
cursor: url(image/cursor.png),auto;
/*cursor改變指針圖標樣式,默認樣式爲auto,當自定義圖片鼠標指針的時候,如果圖片無法加載,採用默認樣式,
"瀏覽器還怕圖片無法正常加載,必須在圖片路徑後面加,auto"*/
/*兼容性寫法:應爲有瀏覽器不支持這個屬性
谷歌和Safar瀏覽器內核:-webkit-
火狐瀏覽器:-moz-
歐朋瀏覽器:-o-*/
-moz-user-select: none;
}
table{
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 100 auto;
/*margin: x頁面邊距如果一個值表示所有邊距都爲這個值,如果兩個值表示上下
margin: xy;上下X,左右Y;
margin: xyz;上X左右y,z下
margin: abcd;分別是上右下左*/
/*定寬居中:1必須是塊級元素2必須有寬度3*/
}
td{
width: 150px;
height: 150px;
background-image: url(image/hole.png);
background-size: 120px 50px;
/*前寬後高*/
background-repeat: no-repeat;
background-position: center bottom;
/*背景的位置:前水平後數值*/
text-align: center;
/*塊級元素內的行內元素居中對齊*/
vertical-align: bottom;
/*豎直方向上靠下*/
}
img{
width: 80px;
height: 0;
position: relative;
/*相對於元素本身進行定位*/
bottom: 15px;
animation-timing-function: linear;
animation-fill-mode: both;
}
p{/*當元素設置絕對定位時會變成塊狀元素*/
background: rgba(10, 10, 10,0.5);
position:absolute;
width: 200px;
height: 60px;
color:#000;
text-align:center;
line-height:50px;
font-size:30px;
left: 0;
border-top-right-radius: 5px;
/*先上下後左右 可寫兩個值,如果兩個值一樣,可以寫一個值*/
border-bottom-right-radius: 5px;
}
/*rgb顯示器三原色取值0-255,a=alpha是透明度 默認爲1,取值0-1,0是爲隱藏*/
.up{
animation-name: up;
/*動畫名*/
animation-duration: 0.3s;
/*動畫時間*/
/*animation-timing-function: linear;*/
/*勻速上升*/
/*animation-fill-mode: both;*/
/*讓動畫保持在結束時的狀態*/
}
@keyframes up{
0%{
height: 0;
}
100%{
height: 80px;
}
}
.down{
animation-name: down;
animation-duration: 0.1s;
/*animation-timing-function: linear;
animation-fill-mode: both;*/
}
@keyframes down{
0%{
height: 80px;
}
100%{
height: 0;
}
}
</style>
</head>
<body>
<audio src="audio/music.mp3" autoplay loop></audio>
<!--插入音頻,路徑,屬性:autoplay自動播放,loop循環播放,寫在標籤裏面的都是標籤屬性-->
<audio src="" id="dazhong"></audio>
<!--可以這樣寫table>(tr>td>*4)*4就可以-->
<p id="score">得分:0</p>
<table>
<tr>
<td><img src="image/mouse.png" alt="地鼠" ></td>
<!--alt表示當圖片無法加載時alt中的內容會呈現在頁面-->
<td><img src="image/mouse.png" alt="地鼠" ></td>
<td><img src="image/mouse.png" alt="地鼠" ></td>
<td><img src="image/mouse.png" alt="地鼠" ></td>
</tr>
<tr>
<td><img src="image/mouse.png" alt="地鼠" ></td>
<!--alt表示當圖片無法加載時alt中的內容會呈現在頁面-->
<td><img src="image/mouse.png" alt="地鼠" ></td>
<td><img src="image/mouse.png" alt="地鼠" ></td>
<td><img src="image/mouse.png" alt="地鼠" ></td>
</tr>
<tr>
<td><img src="image/mouse.png" alt="地鼠" ></td>
<!--alt表示當圖片無法加載時alt中的內容會呈現在頁面-->
<td><img src="image/mouse.png" alt="地鼠" ></td>
<td><img src="image/mouse.png" alt="地鼠" ></td>
<td><img src="image/mouse.png" alt="地鼠" ></td>
</tr>
<tr>
<td><img src="image/mouse.png" alt="地鼠" ></td>
<!--alt表示當圖片無法加載時alt中的內容會呈現在頁面-->
<td><img src="image/mouse.png" alt="地鼠" ></td>
<td><img src="image/mouse.png" alt="地鼠" ></td>
<td><img src="image/mouse.png" alt="地鼠" ></td>
</tr>
</table>
<script src="./jquery.js"> </script>
</body>
</html>
<script>
// 全局變量,沒一個標籤都是一個節點,js獲取html節點,對節點進行操作的
// js獲取節點的方法:document=html文檔
// element=節點/元素
var score=0
// var im=document.getElementBYId(score)
// var p=$('#score')
// 獲取節點的簡單做法
var mouses=$('img')
// 函數 獲取隨機數show爲名 Math隨機數 向下取整
function show(){
var a=Math.random()*16
a=Math.floor(a)
var mouse=mouses.get(a)
$(mouse).addClass('up').removeClass('down')
// 添加up類刪除down類
setTimeout(function(){
$(mouse).addClass('down').removeClass('up')
},2000)
// 延遲多長時間執行
}
function play(){
show()
show()
show()
show()
// for( var i=0;i<4;i++)
// show()
}
setInterval(play,2000)
// 每隔兩秒調用以下函數
$('img').click(function(){
$('#dazhong').attr('src','audio/dazhong.wav').get(0).play()
// .attr()添加屬性
$(this).addClass('down').removeClass('up')
// 讓當前被點擊的圖片執行down動畫,
score += 10
// score=score+10
// .innerText=
//以下該部分可控積分
if(score == 100){
if (confirm('真棒恭喜你闖關成功，點擊確認開啓甜蜜之旅吧！')==true){
window.location.href="./lovenote.html"
}else{
score = 0;
}
}
$('#score').text('得分:'+score)
})
$('body').mousedown(function(){
$('body').css('cursor','url(image/cursor-down.png),auto')
}).mouseup(function(){
$('body').css('cursor','url(image/cursor.png),auto')
})
</script>
②lovenote.html,進入正題了，開始你的宣言了
效果如下：
代碼如下：
<!--<!DOCTYPE html>-->
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="王鴻基">
<title>愛的短信</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body{
margin: 0;
padding: 0;
}
div{
position: relative;
width: 60%;
height: 100%;
margin: 0 auto;
font-family: '宋體';
text-indent: 36px;
font-size: 20px;
line-height: 30px;
background-color: rgba(red, green, blue, alpha);
z-index: 1;
}
h1{
text-align: center;
margin-top: 20px;
font-size: 1.5rem;
}
.clear{clear: both;}
.img1{
position: absolute;
z-index: 100;
top: 20vw;
left: -5vw;
width: 30%;
height: 40%;
position: fixed;
}
.img2{
position: absolute;
z-index: 100;
top:45vh;
right:28vw;
width: 50%;
height: 50%;
position: fixed;
opacity: 0.5;
}
.img3{
position: absolute;
z-index: 100;
right:-5vw;
width: 30%;
height: 30%;
position: fixed;
}
</style>
</head>
<body>
<audio src="audio/1.mp3" autoplay loop></audio>
<img class="img1" src="image/1.1.png" alt="">
<img class="img2" src="image/1.2.png" alt="">
<img class="img3" src="image/1.3.png" alt="">
<div>
<section id="wrap">
<p><h1>感動中的留情，短信中的深情</h1>
<h5 style="text-align: right;color: pink;padding-right: 20%">- - 請閱讀到底部6秒鐘後有驚喜奧</h4>
親愛的還記得我們第一年相遇,那些準時的短信嗎?還記着那些<mark>甜甜蜜蜜</mark>的照片嗎?
****該部分爲煽情碼字的地方，有事沒事啥的，對話記錄啥的，多寫點，聊天記錄啥的，寫上去，對你真心的肯定會看完，不喜歡的就一笑而過，你也就看看好了** **
暖暖，希望在平安夜這個寒冷的夜晚，她能夠收到，鴻基送來暖暖祝福！ 夢傑<br>
</p>
</section>
</div>
</body>
</html>
<script>
function flake(){
// document指的就是HTML文檔
// element 代表節點
// snowFlowerFly 駝峯式命名
// 可變的是變量，不變的是常量
var f = document.createElement('img')
// 獲取HTML文檔的可視寬高
var w = document.documentElement.clientWidth
var h = document.documentElement.clientHeight
// Math.random() 表示隨機取值0~1 可以取值爲0，但是永遠不會爲1
var top = h * Math.random()
var left = w * Math.random()
var s = Math.random() / 2
// alert(typeof s)
// 在JS裏面，都是對節點進行操作
// 對標籤進行操作 要加引號
// 對變量進行操作的時候，不用引號
f.src = 'image/flow.png'
f.style.position = 'absolute'
f.style.position = 'fixed'
f.style.top = top + 'px'
f.style.left = left + 'px'
// 變量不能寫在引號裏邊
f.style.transform = 'scale(' + s + ')'
document.body.appendChild(f)
function down(){
top += 2
// top = top + 2
left += 2
f.style.top = top + 'px'
f.style.left = left + 'px'
if(left > w)left = -100
if(top > h) top = -100
}
setInterval(down,50)
}
// 調用函數
for(var i=0;i<50;i++){
flake()
}
//獲取文檔的高度
var wraptop = document.getElementById("wrap").clientHeight;
window.onscroll = function(){
//判斷滾動條的垂直位置來顯示返回頂部按鈕
if(document.body.scrollTop + document.body.clientHeight == wraptop+20){
//三秒跳轉頁面
var href = setTimeout(function(){
window.location.href="./lovespin.html"
},6000);
}
}
</script>
③lovespin.html部分，拼圖特效
之前19年抖音挺火的一個東西，今天咱用起來，效果如下：
是一個類三D的一個旋轉圖形界面，純css,其實還是比較簡單的，大小縮放也很有藝術感
代碼如下：
css:
@charset "utf-8";
*{
margin:0;
padding:0;
}
body{
max-width: 100%;
min-width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
}
li{
list-style: none;
}
.box{
width:200px;
height:200px;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: 42%;
margin-top: 22%;
-webkit-transform-style:preserve-3d;
-webkit-transform:rotateX(13deg);
-webkit-animation:move 5s linear infinite;
}
.minbox{
width:100px;
height:100px;
position: absolute;
left:50px;
top:30px;
-webkit-transform-style:preserve-3d;
}
.minbox li{
width:100px;
height:100px;
position: absolute;
left:0;
top:0;
}
.minbox li:nth-child(1){
background: url(../img/01.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../img/02.png) no-repeat 0 0;
-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(../img/03.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(../img/04.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(../img/05.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(../img/06.png) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(../img/1.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(../img/2.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(../img/3.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(../img/4.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(../img/5.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(../img/6.png) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
width: 800px;
height: 400px;
position: absolute;
left: 0;
top: -20px;
-webkit-transform-style: preserve-3d;
}
.maxbox li{
width: 200px;
height: 200px;
background: #fff;
border:1px solid #ccc;
position: absolute;
left: 0;
top: 0;
opacity: 0.2;
-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
-webkit-transform:translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(2){
-webkit-transform:rotateX(180deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(3){
-webkit-transform:rotateX(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(4){
-webkit-transform:rotateX(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(5){
-webkit-transform:rotateY(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(6){
-webkit-transform:rotateY(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
@keyframes move{
0%{
-webkit-transform: rotateX(13deg) rotateY(0deg);
}
100%{
-webkit-transform:rotateX(13deg) rotateY(360deg);
}
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>純CSS實現鼠標經過3D立體動態展示圖片特效代碼</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="box">
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
可放12張照片，在上述目錄的img目錄下，可換成女友照或生活照，還是很有效果感的
本文至此結束，也希望真心想學的人能有所成，生活是艱苦的，但陽光也總愛出現在風雨後。心向暖陽，何懼寒冬。
個人情感語錄：
愛人的手是溫暖的，當你遇到對的人時，也要學會勇敢的去表達。愛過，有過方知其珍貴。拿起，放下，方知其不易。
本文參考git開源網站及vsb,html相關學習網站（愛學者，可自行參考）
https://gitee.com/explore
http://www.vbtutor-chinese.net/
https://www.w3school.com.cn/html/index.asp