鳴黎的筆記: HTML

顯示具有 HTML 標籤的文章。顯示所有文章

2025年2月9日星期日

Firebase - Hosting 建立自己的簡易網站 By GitHub

各位大大想如果有網頁開發基礎( Html JavaScript Css )
但是不太懂要如何買伺服器去架設
那 Firebase Hosting 是你的好選擇
但是要注意會有容量限制請自行注意

為什麼要有 GItHub 的存在
因為 Firebase 部署上去
是無法把所有的資源下載檔案( 壓縮檔 )下來的
除非自己線上一個一個抓
所以過了一段時間自己電腦程式碼遺失就容易造成無法挽回悲劇

前置準備

本地端要有 Node、Firebase-Tool 工作環境
Firebase 帳號
Github 帳號

操作步驟

Firebase 建立( 新 )專案( hosting-deploy-by-github )
Github 建立 Firebase 對應的專案 Repository( hosting-deploy-by-github )
從 Github Clone Repostory 到本地端
開啟命令提示字元
登入 Firebase
PS: 要先登出的原因在於避免暫存影響到後續操作
firebase logout
firebase login
firebase init
選擇建立好的專案項目
是否建立對外公用資料夾及是否建立首頁
是否使用 GitHub 設定自動建置和部署？
輸入對應的 Repository 名稱 ( AAA/hosting-deploy-by-github )
啟動工作時候是否要執行 Script? No( 常用於 Vue、Angular 等專案前置作業)
是否設定提出 PR 合併後自動部署並確認對應分支名稱
PS: 此分支是直接上正式環境，如要模擬請開分支於本機驗證
最後只要對此 Github Reporsitory 進行操作的部署即可
PS: 必須對應到您設定的監聽分支為主
git add .
git commit
git push
登入 Github Action 確認分支完成後狀態是否為綠色打勾
登入 Firebase Hosting 建立網站網址內容是否已經更新，如果有就代表成功囉

PS: 設定 firebase.json

參考資源：

Deploying Your Website to Firebase Hosting from GitHub

[ 筆記 ] Firebase Deploy (Hosting) Part 2: GitHub Actions

開箱28:新手搭建～Vue+Vite+GitHub部署到Firebase Hosting

歡迎轉載，請註明出處。

2024年10月15日星期二

Html - Padding 和 Margin 有什麼差異 What's different Padding and Margin ?

目的

在開發前端頁面時候，我們常常會遇到 Padding 或是 Merge，功能都是間距不是嗎？
為了能夠讓各位能夠理解這兩個屬性我們就來分析吧

分析表

Feature	Padding (內邊距)	Margin (外邊距)
功能	控制內容與邊框之間的距離	控制元素與其他元素之間的距離
位置	在邊框內部，包圍內容	在邊框外部，包圍整個元素
影響背景顏色	會繼承元素的背景顏色	不影響（完全透明）
是否改變元素尺寸	是，會讓元素變大	否，不會改變元素本身的尺寸
應用範例	加文字與邊框的間距，避免內容擁擠	增加元素之間的距離，讓佈局更整齊
CSS 語法範例	`padding: 20px;`	`margin: 10px;`
影響其他元素布局	不會影響周圍元素	會影響相鄰元素的距離

結論

Padding：對內間距

Margin：對外間距

歡迎轉載，請註明出處。

2024年7月13日星期六

Git - Git 和 GitHub 有什麼差異 What's different Git and GitHub - 2?

目的

我們常常聽到 Git 和 GitHub 在我們的工作環境，但這兩個時常讓我們搞不清楚各個功用到底是什麼？就像是 Java 和 JavaScript 有什麼關係，這是一樣的嗎？以下就讓我們了解其中的差異吧！

分析表

名詞說明

本機：個人電腦主機

雲端平台：線上硬碟( Google Drive、DropBox... etc )

協作：同時多人對同一個專案開發

特性	Git	GitHub
基本概念	版本控制系統用來跟蹤和管理程式碼的變更	雲端平台用來存放和分享使用 Git 管理的程式碼庫
功能	基本功能提交、分支、合併和回退等操作	除了 Git 的基本功能外還有遠端操作項目管理工具
範圍	本機安裝的軟件管理本機程式碼	雲端平台可以在任何地方通過網絡訪問和管理倉庫
協作方式	本機版本控制通過本機網絡協作	提供網絡上的協作功能，如 pull requests、code reviews 和 issues
例子	小明在自己的電腦上使用 Git 來管理程式碼	小明和小紅通過 GitHub 在不同地方一起開發項目

總結

Git：是一個版本控制工具，幫助開發者在本機管理程式碼的變更。
GitHub：是一個基於 Git 的雲端平台，提供協作和項目管理功能，使得團隊開發更加方便。

歡迎轉載，請註明出處。

Git - 為什麼要用 Git 進行版控 Why use to Git by Source Code control - 1?

目的

因為各軟體公司都把 Git 的使用都列為加分的依據，但是與其說加分，倒不如說這是在開發上的良藥，對開發者來說是有益的。

所以利用這機會寫下自己對 Git 的想法，能有機會讓分享給各位也是一個福音。

用途

在開發過程因為有可能會遇到多人共同維護同一個專案，檔案內容會因為需求、拋錯...等很多種情況而異動程式碼，但是但是，如果遇到以下的窘境，你們該怎麼做？

1. 開發完成一個需求後，過半年後，要如何和新的程式碼哪裡有差異？

2. 同一個專案有多個需求要開發，但是要分批在不同的時間上線？

3. 有問題的程式碼是誰開發的，怎麼追蹤開發紀錄？

4. 我這次開發的內容和已經上線的差異？和不同環境的程式碼差異？

5. 我和其他兩位共同開發同一份程式碼，我要如何確認對方寫的如何和我的沒衝突？

以上當然只是比較常見的案例，其實還有很多例外可循。

你 / 妳也是用檔案複製和貼上進行保存等動作嗎？其實也可以用以上的範例進行測試，看能不能是用以上的情境。

所以我們就會有一個版控工具，讓我們在開發上更加的有利也能掌握狀態。

歡迎轉載，請註明出處。

2024年7月6日星期六

目的

隨著開逐漸頻繁，我們就會產生非常多的程式碼內容，之後要如何將程式碼做有效的留存？如何要轉交給下一位同仁時能夠更快能夠更快上手。

爲什麼要排版

提高可讀性

清晰的程式碼結構和一致的格式可以讓程式碼更容易理解。良好的排版使得程式碼邏輯一目了然，減少理解程式碼的時間和精力。

減少錯誤

良好的排版有助於發現和避免錯誤。整潔的程式碼可以讓潛在的錯誤更容易被發現，例如缺失的括號或錯誤的縮排。

便於合作

在團隊合作中，一致的程式碼風格能夠讓團隊成員更容易閱讀和理解彼此的程式碼，減少溝通成本和程式碼衝突。

提高維護

程式碼在維護過程中需要頻繁地被閱讀和修改。良好的排版可以使得維護人員更容易理解程式碼邏輯，從而提高維護效率。

實際範例

修改前

public class Example {
public static void main(String[] args) {
int a = 10;
int b = 20;

if (a > b) {
System.out.println("a is greater");
} else {
System.out.println("b is greater");
}
}
}

修改後

public class Example {
    public static void main(String[] args) {
        int a = 10;
        int b = 20;
        
        if (a > b) {
            System.out.println("a is greater");
        } else {
            System.out.println("b is greater");
        }
    }
}

歡迎轉載，請註明出處。

2017年7月18日星期二

Html-CheckBox 多選選單操作

我們要如何製作一個簡單的單選選單？
要如何取到選單對應的參數？
此篇文章會提到如何使用 JS (JavaScript), JQ (JQuery)

<form>
    <input type="checkbox" name="vehicle" value="0">A<br>
    <input type="checkbox" name="vehicle" value="1">B<br>
    <input type="checkbox" name="vehicle" value="2">C<br>
</form>

如何取出 select radioBox value ?

var valuelist = ''; 

$('input[name="vehicle"]:checked').each(function() {
    valuelist += this.value + ',';
});

Html-RadioBox 單選選單操作

我們要如何製作一個簡單的單選選單？
要如何取到選單對應的參數？
此篇文章會提到如何使用 JS (JavaScript), JQ (JQuery)

<form>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other
</form>

如何取出 select radioBox value ?

var radioVar = $('input[name=gender]:checked').val();

Html-Option 下拉選單操作

我們要如何製作一個簡單的下拉選單？

要如何取到選單對應的參數？文字？

此篇文章會提到如何使用 JS (JavaScript), JQ (JQuery)

以下是範例：

<select id="selectId" onchange="changeOption();">
  <option value="0">請選擇</option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
  <option value="4">d</option>
</select>

如何取出 select option value ?

var optionVar = $('#selectId').val();

如何取出 select option text ?

var optionText = $('#selectId option:selected').text();

如何設置被選擇的參數 ?

$("#selectId").val("2").change();

2017年5月1日星期一

Website-FireBase Hosting 靜態網頁部屬

此篇會從如何安裝、連結、部屬專案開始

會寫此篇的目的在於因為網路資訊過多
想整理出自己較能理解的版本
官方文件說明 : 連結

步驟概要
- 下載 Node.js
- 用 npm 串接 FireBase
- 將專案部屬到 FireBase

1 . 下載 Node js : 連結

2 .開啟命令提示字元，確認 NPM 是否確實安裝
npm -version

3 . 安裝相關套件，以便於後續使用
npm install -g firebase-tools

4 . 新增專案檔案夾
並且要有 public
還有 index.html( 放置在 public 底下 )

6 . 命令提示字元指向此路徑
cd C:\Users\BluePC\Desktop\Test\public ( 建議用複製 )

4 . 執行 FireBase ，並且執行程序
firebase init ( 不用加 npm )

這邊可能會出現需要權限的需求，所以必須串接你的帳號

輸入 Login 指令，成功後再次執行 firebase init
firebase login

5 .選擇 Hosting 選項

6 . 選擇 Firebase 底下的指定專案

7 .

參考資料 : Firebase Hosting 靜態網站部署試用
參考資料 : Firebase 架站
參考資料 : Get Started with Hosting

Mac
參考資料：Firebase Hosting 靜態網站部署
參考資料：https://andy6804tw.github.io/2017/12/14/npm-tutorial/
參考資料：【備忘録】npm -g install に失敗する

歡迎轉載，請註明出處。

2017年2月18日星期六

身分證
http://liaosankai.pixnet.net/blog/post/24165900-%E8%BA%AB%E4%BB%BD%E8%AD%89%E9%A9%97%E8%AD%89%E7%A8%8B%E5%BC%8F-for-javascript-(%E7%B2%BE%E7%B0%A1%E7%89%88)

checkbox radio 參數 (name : Jaskaran singh Rajal)
http://stackoverflow.com/questions/2834350/get-checkbox-value-in-jquery

Two listBox
http://esausilva.com/2016/01/29/move-items-between-two-listbox-using-jquery-html-select-tag/

日期元件
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_input_date_value2
日期檢查
http://www.jquerybyexample.net/2011/10/validate-date-format-using-jquery.html

2016年11月15日星期二

Website-FireBase Realtime Database

近期更新

orderByKey 有對應放置
參考資料 : firebase.database.DataSnapshot

2016年10月31日星期一

Website-FireBase 的前置作業

Google 的 FireBase 不僅提供行動裝置的服務
也提供在網頁端的服務
讓我們在開發上又省了許多麻煩事

這篇帶來的是如何在網頁上添加 FireBase基本參數
1 . 切換到專案管理

2 . 新增項目為 ?

3 . 生成對應參數，並且將參數複製

將剛剛複製出來的參數寫入程式碼內

<!DOCTYPE HTML>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<html> 
  <script>
    // Initialize Firebase
    // 請自行更改下方的參數
    var config = {
      apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaa",
      authDomain: "bbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
      databaseURL: "ccccccccccccccccccccccccccccc",
      storageBucket: "dddddddddddddddddddddddd",
      messagingSenderId: "eeeeeeeeeeeeeeeeeeee"
    };
    firebase.initializeApp(config);
    
  </script>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>標題</title>
  </head>
  <body>
    Hello World
    
  </body>
</html>

參考資料 : Add Firebase to your JavaScript Project
歡迎轉載，請註明出處。

2016年8月5日星期五

Css-基本認知( 四 )_佈局方法

我們在上一篇有介紹 : 基本樣式

接下來要如何去佈局您的畫面
通常我們比較常拿 Div ( 塊狀模型 ) 來做區塊
然後再去排 Div 的位置與大小
如下圖 :

什麼是 Div ( 塊狀模型 ) ?
通常我們用來做不同的區塊特性
通常 Div 預設是直接佔用一整行

在網頁中，我們有幾種佈局的方法 ;

流動模型 ( Flow )
浮動模型 ( Float )
層次模型 ( Layout )

浮動模型

剛剛有提到 Div 是直接佔用一整行

那如果我們要呈現像上方的圖( 樣式 )就可以用浮動模型 ( Float )

( * 如果有兩個以上的塊狀，要被調整的前一個塊狀要設定 )
例如上圖 : Div_2 要靠 Div_1 右邊，所以要對 Div_1 設置

用法	說明	備註
float:left;	調整 Div 區塊對應位置	left ( 靠左 )、right ( 靠右 )

層次模型

模型層	用法	說明
絕對位置	position:absolute;	模塊移動到對應的座標位置
相對位置	position:relative;	模塊移動到對應的座標位置但實際是占用到原本的空間
固定位置	position:fixed;	模塊移動到對應的座標位置但不隨網頁的滾動產生移動

<!DOCTYPE html>
<html>
<style>
#box1{
    width:150px;
    height:150px;
    border:2px red solid;
    position:absolute; // 可更改參數看這三種的差異
    left:50px;
    top:50px;
}
</style>
<body>
    <div id="box1"></div>
    <div>Hello world !!!</div> 
</body>
</html>

歡迎轉載，請註明出處。

2016年8月4日星期四

Css-基本認知( 三 )_基本樣式

前幾篇我們有介紹甚麼是 Css 、宣告樣式

這一篇最主要是最常用到的樣式
比如說是 : 文字、粗細、顏色...等。

List :

文字
邊框
填充 ( Padding )
邊界 ( Margin )
填充和邊界的差異 ?

1 . 常用於文字系列

用法	說明	備註
font-family:"Microsoft Yahei";	文字字體
font-size:"12px";	文字大小
color:"#555";	文字顏色
font-weight:bold;	粗體字
font-style:italic;	斜體字
text-decoration:underline;	底線
text-decoration:line-through;	刪除線
text-indent:2em;	字句空兩字
line-height:2em;	上下行間距
letter-spacing:20px;	文字間距
text-align:center;	對齊方式	felt、right、center 模塊也適用

2 . 邊框系列

用法	說明	備註
border-width:3px;	線寬
border-style:solid;	邊框形狀	dashed( 虛線 )、 dotted( 點線 ) solid( 實線 )
border-color:yellow;	邊框顏色

一般邊框

div{
    border : 3px solid yellow;
}
等於
div{
    border-width:3px;
    border-style:solid;
    border-color:yellow;
}

特殊邊框

border-top:1px solid red; // 上方
border-right:1px solid red; // 置右
border-left:1px solid red; // 置左

3 . 填充

上右下左
div{padding:10px;}

上下 、 左右
div{padding:10px 20px;}

上右下左( 順時針 )
div{padding:20px 10px 15px 30px;}
等於
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

4 . 邊界

上右下左
div{margin:10px;}

上下 、 左右
div{margin:10px 20px;}

上右下左( 順時針 )
div{margin:20px 10px 15px 30px;}
等於
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

5 . 填充和邊界的差異

padding 和 margin 最大的差別是 :
padding : 在邊框內。
margin : 在邊框外。

歡迎轉載，請註明出處。

2016年7月24日星期日

Css-基本認知( 二 )_樣式宣告、選擇器

前一篇 :

那我們要如何去宣告 ?
那宣告的格式為何 ?

1 . 宣告樣式方法

選擇器 {
    <!-- 屬性 : 參數 ; -->
    樣式
}

2 . 我們知道公式後，要怎麼套用 ?

選擇器 : 簡單來說，我要把這樣式套用在哪裡。
樣式 : 字體大小、顏色...等。

接下來這篇介紹選擇器 :

Html 標籤
物件名稱
ID 名稱
子項選擇器
後代選擇器
通用選擇器
多組選擇器

1 ) Html 標籤

p{
   color:red;
}

2 ) 物件名稱 : 選擇器前面有加 "."

.setColor{
   color:red;
}
<span class="setColor">Tom</span>

3 ) ID 名稱 : 選擇器前面有加 "#"，但是 ID 多用於辨識元件或讀取參數

#setColor{
    <!-- 屬性 : 參數 ; -->
   color:red;
}
<span id="setColor">Tom</span>

4 ) 子項選擇器 : 某元件底下一層的元件 ( 只對一層 )，中間會用 : >

.ttable>li {
    <!-- 屬性 : 參數 ; -->
   border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

5 ) 後代選擇器 : 某元件底下所有被選擇到的元件 : 中間會用 : _ ( 空白 )

.ttable li {
    border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

為了讓大家更能了解到 4 、 5 的差異

6 ) 通用選擇器 : 全部的標籤都會被套用到樣式，會使用 : *

*{
    border:1px solid red;
}

<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

7 ) 多組選擇器 : 共用相同的樣式，減少重複的風格樣式，會使用 : ，

h1,span{color:red;}

3 . 樣式權重

p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/

同選擇器具權重 : 標籤遠近

<style>
p{color:red;}
p{color:green;} V
</style>

最重要 !important

<style>
p{color:red!important;} V
p{color:green;} 
</style>

歡迎轉載，請註明出處。

2016年7月20日星期三

Css-基本認知( 一 )_CSS?

建議 : 此篇要有一些些 Html 的基礎會比較容易懂。

CSS 在網頁的角色定位 ?

可以參考此篇 : Html、Css、JavaScript是什麼關係?

回歸正題，我們在這裡就先統稱"樣式"

CSS 最大的功用是來幫我們網頁添加色彩

有時候也可以幫我們解決客戶一些奇怪的需求

( 咳咳... )

首先，我們要在哪裡宣告 ? ( 哪裡放置我們的樣式? )
有三種方式可用( 三選一；也可三種一起宣告同名，但會受到優先權影響 )

1 . 直接在標籤內宣告，要添加 : "" 和 ; ，

<p style="font-size:12px; color:red;">大家好...</p>

2 . 在 Style 區塊宣告

</head>
<style type="text/css">
p{
   font-size:12px;
   color:red;
   font-weight:bold;
}
</style>
<body>

3 . 外部文件 : 指定檔案位置 ( .css )

<head>
    .
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

剛剛有提到，如果標籤 <p></p> 三種宣告方法都有設定樣式怎辦 ?
他會依照優先權 : 標籤內 > Style 區塊 > 外部文件

歡迎轉載，請註明出處。

Html-基本認知(五)_資料格式標籤簡介

前幾篇有簡單介紹過頁面的設定
接下來是如何將資料傳送到後端的前置元件

<form></form>	將在 form 內的參數送至目標服務器	method = GET、POST action = 服務端位置	<form method="post" action="main.jsp"> . . . </form>
<textarea></textarea>	文字區塊	rows : 行數 cols : 列數	<textarea rows="20" cols="20">請輸入文字</textarea>
<select><option></option></select>	下拉選單	select : 選擇器 name : 元件名稱 option : 選項 value : 向後台提出的值	<select name="selected"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select>
<input></input>	輸入元件	type : 輸入元件的型態 name : 輸入元件的名稱，用於後端辨別 value : 預設參數 placeholder : 文字框提醒文字	<input type="text" name="inputAcc" value=""></input>
		hidden : 隱藏輸入元件 image : 圖像按鈕 number : 數字控制器 password : 密碼格式 radio : 單選按鈕 range : 左右滑動扭 reset : 重置按鈕 search : 搜索文字字段 submit :提交按鈕 text 文字。預設20字元 . 因為屬性很多，請上W3c 搜尋。

2016年7月18日星期一

Html-基本認知(五)_連結標籤簡介

這篇介紹有關連結會用到的標籤
比如 : 超連結、第三方元件的連線位置、圖片...等。

標籤	功能	說明	用法
<a></a>	超連結	href : Hypertext Reference 超文本引用 title : 滑鼠移至文字後，出現的浮動提醒文字 target : 視窗 _bank = 新視窗 _parent = 當前視窗 _self = 預設	<a href="www.yahoo.com.tw" target="_blank" title="Yahoo">Yahoo</a>
<a></a>	電子郵件	mailto : 電子信箱 cc : 副本 bbc : 密件副本 subject : 主旨 body : 內容	<a href="mailto:aa@yahoo.com;bb@yahoo.com ?cc=cc@yahoo.com &bbc=dd@yahoo.com &subject=今天會議。 &body=大家對今天會議的看法。">大家對今天會議的看法。</a>
<img></img>	圖片	src : 來源 alt : 載入失敗 title : 滑鼠移動到此元件後，浮出的提醒	<img src="http://img.mukewang.com/52172.jpg" alt="" title="电影介绍">

1 ) <a></a>

2 ) <a></a>

3 ) <img></img>

4 ) <img></img>

Html-基本認知(四)_Table標籤簡介

20161112 更新 : 新增 Div + Css 範例連結

看到Table表格標籤不知不覺就想到表格( 廢話
此 Table 標籤可以參考看看
如果資料異動、UI需求不大在使用
不然建議使用 Div + Css 方法

標籤	功能	說明	用法
<table><tbody><tr><th><td>	表格	table : 表格框架 tbody : 可不加入。加入，載入完後顯示。不加，邊載邊顯示。 tr( table row ) : 列 th( table head ) : 標頭 td( table data ) : 資料 th 和 td 差異? th 會把標頭文字邊粗體	因程式碼無法對齊，所以放置於下方
<caption></caption>	表格標題	放置在 table 下方

<table>
    <caption>班級人數</caption>
    <tbody>
        <tr>
            <th>班級</th>
            <th>人數</th>
        </tr>
        <tr>
            <td>101</td>
            <td>36</td>
        </tr>
        <tr>
            <td>102</td>
            <td>39</td>
        </tr>
    </tbody>
</table>

參考資料：Div+Css Table
參考資料：HTML Table 表格

訂閱：文章 (Atom)

2025年2月9日 星期日

2024年10月15日 星期二

目的

分析表

結論

2024年7月13日 星期六

目的

分析表

總結

目的

用途

2024年7月6日 星期六

目的

爲什麼要排版

提高可讀性

減少錯誤

便於合作

提高維護

實際範例

修改前

修改後

2017年7月18日 星期二

2017年5月1日 星期一

2017年2月18日 星期六

2016年11月15日 星期二

2016年10月31日 星期一

2016年8月5日 星期五

浮動模型

層次模型

2016年8月4日 星期四

1 . 常用於文字系列

2 . 邊框系列

3 . 填充

4 . 邊界

5 . 填充和邊界的差異

2016年7月24日 星期日

2016年7月20日 星期三

2016年7月18日 星期一

2025年2月9日星期日

2024年10月15日星期二

2024年7月13日星期六

2024年7月6日星期六

2017年7月18日星期二

2017年5月1日星期一

2017年2月18日星期六

2016年11月15日星期二

2016年10月31日星期一

2016年8月5日星期五

2016年8月4日星期四

2016年7月24日星期日

2016年7月20日星期三

2016年7月18日星期一