跳到主要內容

CSS小技巧：製作「標籤選單(tab menu)」，完全沒用javascript

部落格文章或是網頁要提升使用者體驗，可以試試加上「標籤選單(tab menu)」。使用標籤選單可以將文章內容分類，然後依不同點選的分類顯示內容。範例如下：

第1頁 第2頁 第3頁

第1頁

這個是第1頁的內容

第2頁

這個是第2頁的內容

第3頁

這個是第3頁的內容

問題

當內容夠多時，按一下標籤標題時，瀏覽器會向下捲動，標籤選項就會看不到，必須向上捲動視窗才能繼續導覽，非常不方便。

會有這種效果是因為CSS的標籤選單是用<a>標籤的hash來控制的，瀏覽器預設功能中，點選hash的目標就會跳到相對應id的標籤(<tag>)，這種視窗捲動的行為也可以用來製作目錄。


解決方案

將標籤標題欄移到內容下方，設定固定內容高度及捲動功能。

第1頁

第1頁內容...dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, efficitur sagittis mauris. Cras nec egestas arcu, ac tincidunt ipsum. Phasellus tincidunt auctor purus, vel convallis tortor condimentum quis. Aliquam pharetra convallis posuere. Phasellus hendrerit massa sit amet diam condimentum, viverra sodales velit placerat. In hac habitasse platea dictumst. Duis eu massa et sapien consequat pretium. Curabitur dui ante, molestie tempor sem sed, facilisis condimentum augue. Etiam at volutpat mi, maximus convallis diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur lorem. Quisque eget dapibus mi, quis eleifend orci. Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus. Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, eu facilisis mi velit id leo. Nullam ut ante erat. Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur. Suspendisse augue turpis, vestibulum vel ipsum eu, feugiat cursus metus. Donec tempus risus lorem, id blandit ipsum rhoncus in. Cras ac elit ligula. Nam efficitur ex ut iaculis venenatis. Mauris vitae metus imperdiet eros tincidunt tincidunt eu ac turpis. Nunc aliquam gravida orci, id hendrerit mi condimentum et. Ut vestibulum tempor lectus, sit amet viverra ligula posuere ac. Quisque vel hendrerit urna, sed efficitur orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi in mauris commodo, convallis urna non, posuere eros. Sed ante leo, sodales non diam ut, dignissim mattis dui. Suspendisse leo dolor, porttitor id purus sed, pretium varius mi. Maecenas interdum lacus non ante faucibus egestas quis et risus. Curabitur vel mauris velit. Cras hendrerit fringilla felis, feugiat semper orci eleifend a. Vivamus pharetra ante vel nulla cursus, quis tristique leo tristique. Nunc pharetra lorem erat. Mauris gravida, odio in laoreet convallis, nibh sapien convallis ligula, sit amet convallis orci urna ut mauris. Aenean efficitur vitae ligula finibus luctus. Integer ultricies eleifend laoreet. Nullam aliquet felis quis elit venenatis, ac ultricies diam porttitor. Proin luctus, orci pretium tempus consequat, sapien purus cursus tortor, vitae consectetur metus risus sed justo. Phasellus maximus tempus ipsum. Praesent aliquet viverra erat, et vestibulum massa pellentesque ut. Nulla facilisi. Nullam volutpat erat in lacus vestibulum luctus. Ut lacinia metus eu rutrum aliquet. Etiam in auctor lectus.

第2頁

第2頁內容...Lorem ipsum dolor sit amet, Sed elit arcu, tincidunt at elit sed, efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum. Donec ut eros eget urna eleifend vestibulum. mus convallis diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur lorem. Quisque eget dapibus mi, quis eleifend orci. Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus. Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, eu facilisis mi velit id leo. Nullam ut ante erat. Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur. Suspendisse augue turpis, vestibulum vel ipsum eu, feugiat cursus metus. Donec tempus risus lorem, id blandit ipsum rhoncus in. Cras ac elit ligula. Nam efficitur ex ut iaculis venenatis. Mauris vitae metus imperdiet eros tincidunt tincidunt eu ac turpis. Nunc aliquam gravida orci, id hendrerit mi condimentum et. Ut vestibulum tempor lectus, sit amet viverra ligula posuere ac. Quisque vel hendrerit urna, sed efficitur orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi in mauris commodo, convallis urna non, posuere eros. Sed ante leo, sodales non diam ut, dignissim mattis dui. Suspendisse leo dolor, porttitor id purus sed, pretium varius mi. Maecenas interdum lacus non ante faucibus egestas quis et risus. Curabitur vel mauris velit. Cras hendrerit fringilla felis, feugiat semper orci eleifend a. Vivamus pharetra ante vel nulla cursus, quis tristique leo tristique. Nunc pharetra lorem erat. Mauris gravida, odio in laoreet convallis, nibh sapien convallis ligula, sit amet convallis orci urna ut mauris. Aenean efficitur vitae ligula finibus luctus. Integer ultricies eleifend laoreet. Nullam aliquet felis quis elit venenatis, ac ultricies diam porttitor. Proin luctus, orci pretium tempus consequat, sapien purus cursus tortor, vitae consectetur metus risus sed justo. Phasellus maximus tempus ipsum. Praesent aliquet viverra erat, et vestibulum massa pellentesque ut. Nulla facilisi. Nullam volutpat erat in lacus vestibulum luctus. Ut lacinia metus eu rutrum aliquet. Etiam in auctor lectus.

第3頁

第3頁內容...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, efficitur sagittis utate neque non quam posuere fermentum. Donec ut eros eget urna eleifend vestibulum. Cras nec egestas arcu, ac tincidunt ipsum. Phasellus tincidunt auctor purus, vel convallis tortor condimentum quis. Aliquam pharetra convallis posuere. Phasellus hendrerit massa sit amet diam condimentum, viverra sodales velit placerat. In hac habitasse platea dictumst. Duis eu massa et sapien consequat pretium. Curabitur dui ante, molestie tempor sem sed, facilisis condimentum augue. Etiam at volutpat mi, maximus convallis diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur lorem. Quisque eget dapibus mi, quis eleifend orci. Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus. Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, eu facilisis mi velit id leo. Nullam ut ante erat. Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur. Suspendisse augue turpis, vestibulum vel ipsum eu, feugiat cursus metus. Donec tempus risus lorem, id blandit ipsum rhoncus in. Cras ac elit ligula. Nam efficitur ex ut iaculis venenatis. Mauris vitae metus imperdiet eros tincidunt tincidunt eu ac turpis. Nunc aliquam gravida orci, id hendrerit mi condimentum et. Ut vestibulum tempor lectus, sit amet viverra ligula posuere ac. Quisque vel hendrerit urna, sed efficitur orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi in mauris commodo, convallis urna non, posuere eros. Sed ante leo, sodales non diam ut, dignissim mattis dui. Suspendisse leo dolor, porttitor id purus sed, pretium varius mi. Maecenas interdum lacus non ante faucibus egestas quis et risus. Curabitur vel mauris velit. Cras hendrerit fringilla felis, feugiat semper orci eleifend a. Vivamus pharetra ante vel nulla cursus, quis tristique leo tristique. Nunc pharetra lorem erat. Mauris gravida, odio in laoreet convallis, nibh sapien convallis ligula, sit amet convallis orci urna ut mauris. Aenean efficitur vitae ligula finibus luctus. Integer ultricies eleifend laoreet. Nullam aliquet felis quis elit venenatis, ac ultricies diam porttitor. Proin luctus, orci pretium tempus consequat, sapien purus cursus tortor, vitae consectetur metus risus sed justo. Phasellus maximus tempus ipsum. Praesent aliquet viverra erat, et vestibulum massa pellentesque ut. Nulla facilisi. Nullam volutpat erat in lacus vestibulum luctus. Ut lacinia metus eu rutrum aliquet. Etiam in auctor lectus.

第1頁 第2頁 第3頁

程式碼參考

<style>
.wrap{
  height:200px;
  overflow:scroll;
  }
.tab div {
  display: none;
}

.tab div:target {
  display: block;
}
</style><div class="tab">
<div class="wrap" id="l1">
  <h3>第1頁</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit 
  sed, efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum. Donec ut eros 
  eget urna eleifend vestibulum. Cras nec egestas arcu, ac tincidunt ipsum. 
Phasellus tincidunt auctor purus, vel convallis tortor condimentum quis. Aliquam pharetra convallis posuere. 
Phasellus hendrerit massa sit amet diam condimentum, viverra sodales velit placerat. In hac habitasse platea 
dictumst. Duis eu massa et sapien consequat pretium. Curabitur dui ante, molestie tempor sem sed, facilisis 
condimentum augue. Etiam at volutpat 
mi, maximus convallis diam.Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, 
eu porttitor arcu pretium eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. 
In posuere, magna ut lacinia placerat, erat 
nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas ante nec, 
varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur
lorem. Quisque eget dapibus mi, quis eleifend 
orci.Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non 
metus. Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui 
imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum 
a finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, 
eu facilisis mi velit id leo. Nullam ut ante erat. 
Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In </p>
 </div>
<div class="wrap" id="l2">
  <h3>第2頁</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, 
  efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum. Donec ut eros eget urna 
  eleifend vestibulum. Cras nec egestas arcu, ac tincidunt ipsum. Phasellus tincidunt auctor purus, vel convallis
  tortor condimentum quis. Aliquam pharetra convallis posuere. Phasellus hendrerit massa sit amet diam 
  condimentum, viverra sodales velit placerat. In hac habitasse platea dictumst. Duis eu massa et 
  sapien consequat pretium. Curabitur dui ante, molestie 
  tempor sem sed, facilisis condimentum augue. Etiam at volutpat mi, maximus convallis diam.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium
eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia 
placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas 
ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur 
lorem. Quisque eget dapibus mi, quis eleifend orci.
Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus. 
Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui 
imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a 
finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, 
eu facilisis mi velit id leo. Nullam ut ante erat. Ut sit amet risus viverra diam venenatis pretium. 
Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur.
</p>
  </div>
<div class="wrap" id="l3">
  <h3>第3頁</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, 
  efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum. Donec ut eros eget 
  urna eleifend vestibulum. Cras nec egestas arcu, ac tincidunt ipsum. Phasellus tincidunt auctor purus, 
  vel convallis tortor condimentum quis. Aliquam pharetra convallis posuere. Phasellus hendrerit massa sit 
  amet diam condimentum, viverra sodales velit placerat. In hac habitasse platea dictumst. Duis eu massa et 
  sapien consequat pretium. Curabitur dui ante, molestie tempor sem sed, facilisis condimentum augue. Etiam at 
  volutpat mi, maximus convallis diam.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium 
eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia 
placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas 
ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur 
lorem. Quisque eget dapibus mi, quis eleifend orci.
Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus.
Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui imperdiet,
scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a finibus mauris, 
sed maximus tortor. In feugiat, 
dolor id maximus lobortis, nibh quam pellentesque lorem, eu facilisis mi velit id leo. Nullam ut ante erat.
Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In </p>
   </div>
<a href="#l1">第1頁</a>   
<a href="#l2">第2頁</a>
<a href="#l3">第3頁</a>
</div>

標籤

Labels:

留言

張貼留言

這個網誌中的熱門文章

母體變異數(population variance)、樣本變異數(sample variance)及自由度(degrees of freedom)

母體指的是所有的數據，樣本指的是從母體抽樣的數據，舉例來說，一個班級有40人，它們的身高，40個身高數據，若只針對這個班，就是母體，但是，卻只是代表全校學生身高的一部分，也就是樣本。 回到「機率統計」頁面 樣本平均數(mean)不是母體平均數，樣本變異數(variance)也不是母體變異數，一個班40個人身高的平均數很難剛好是全校學生的身高平均數。 一個班40個人的身高變異數也不會是全校學生的身高變異數。 變異數計算 母體變異數的定義如下： 而樣本變異數的定義如下： 奇怪的地方 平均數 雖然樣本平均數不是母體平均數，不過，如果不斷重複從同一個母體抽樣平均，會得到一個近似母體平均數的數字。舉例來說，從一個學校所有學生中，不斷隨機選出40個學生取平均數，再將這些平均數平均，結果會接近直接算全校學生的身高平均數。 也就是說樣本平均數的期望值就是母體平均數： 變異數 樣本變異數跟母體變異數就沒這麼單純了。奇怪的地方是，為什麼樣本變異數公式的除術是n-1，而不是像平均數計算一樣用n？ 為何樣本變異數要除的是(n-1)？ 除數為n的話，變異數會太小 如果樣本變異數的除數是n，樣本變異數就會常常比母體變異數小。為什麼呢？ 因為，樣本是從母體抽取的，抽樣的數據算出平均，並且抽樣的數據會相對的接近抽樣的平均，總不會剛好抽出的樣本平均數剛好是母體平均數，且樣本數據離樣本平均數就像母體數據離母體平均數一樣分散吧？ 假設母體數據為0-99的整數，共100個數據，從中選出10個數字，然後計算樣本的平均數，分別用n及n-1當作除數算出變異數，連續執行200次，並將200個樣本平均數及200個樣本變異數平均。 也就是取得樣本平均數及樣本變異數的期望值，結果如下： 母體平均數 = 49.5 ...
張貼留言
Read more »

Blogger文章在Google搜尋引擎找不到，怎麼辦？

剛開始經營部落格，最令人不解及懊惱的其中一件事就是為什麼我的文章發布了，在Google搜尋引擎不管怎麼搜尋都找不到；文章找不到就沒辦法建立自然流量了。 回到「部落格經營血淚史」頁面 Google Search Console無法為Blogger建立索引，出現伺服器錯誤(5XX)⇨ 這是因為Google搜尋引擎還沒將新的文章或網頁放進去索引(index)裡。 可以用手動的方式，將新文章或網頁加入Goolge搜尋引擎索引裡。 首先，在Google搜尋「google search console」。 進去後，輸入網站網址如下圖，兩者選其一。 輸入網站網址並點點擊「繼續後」後，選擇「前往資源」。 視窗上側，找到「檢查XXX中的任何網址」，輸入要加入Google搜尋引擎索引的網頁(文章)網址。 如果該網頁不在Google搜尋引擎索引內，結果會出現「網址不在 Google 服務中」，這時需點擊「要求建立索引」。 這樣就完成了；大概過4-6天就會編入Google搜尋引擎索引了，不過，不需要一直重新提出建立索引的要求，因為這樣不會比較快編入索引。 如何提交Blogger Sitemap？ 到Google Search Console的Sitemap，填入落格網址並加上 /sitemap.xml ，舉例來說，我的部落格就是https://quanist.blogspot.com/sitemap.xml，送出即可。 送出之後要等大約10分鐘，正常來說就會從「Couldn't fetch 」轉為顯示「成功」。 如何提交Blogger Atom Sitemap？ 文章數少於500篇：到Google Search Console的Sitemap，填入部落格網址並加上 /atom.xml?redirect=false&start-index=1&max-results=500 ，舉例來說，我的部落格就是https://quanist.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500，送出即可。 文章數少於1000篇：到Google Search Cons...
張貼留言
Read more »

【美式口音訓練】連音(word linking)

美式英文發音大部分都不是一字字念出來的，一句話通常都會有連音，而連音的發生的狀況有很多，以下一一介紹。 回到「英文口說訓練」頁面 子音結尾搭配母音開頭 這是最容易理解的連音發式。這種連音方式發生在一個字以子音結尾，下一個字則以母音開頭。舉例來說， turn on the light - tur non the light turn off the light - tur noff the light come again another day - cu magay nu nuther day Yes, I do - Yes sIai do 母音結尾搭配母音開頭 這種連音方式發生在一個字以母子音結尾如ow、o，這個連音方式比較容易被忽略，舉例來說 How are you - how ware you：are 的前面要加 w 的音 No, I don't - No wI don't：I 的前面要加 w 的音 I ate it - I yate it：I 結尾有一個 y 的音 I will wear it - I'll wear rit 子音結尾搭配子音開頭 算是相當困難的連音，或者說不算是連音，但是遇到兩個子音連在一起，都要記得發出來 month - mo n th：n 跟 th 都要發 recognize - re kgnize：k 跟g 都要發，美國人聽得出來 子音同化(assimilation) 子音同化發生相似子音被另一個子音取代，舉例來說 Handbag - hanmbag：nd 後面接 b，所以很可以用 m 取代。 有無聲子音轉換 I have to go -I haft go：v 變成 f I have to go to the bathroom - I haft go dthe bathroom：v 變成 f、to the 變成 d the 不該使用連音的時候 如果在說話時要特別強調一個字，這個字前後就不要連音，可以稍微停頓，把這個字念清楚。 回到「英文口說訓練」頁面
張貼留言
Read more »

中央極限定理(central limit theorem)證明

中央極限定理(central limit theorem )指的是從一個獨立同分布(Independent and identically distributed, i.i.d)取出之變數數量趨近無限多時，其平均數(mean)將趨近常態分布(normal distribution)。 回到「機率統計」頁面 目錄： 動差母函數(moment generating function) 常態分布的動差母函數 中央極限定理證明 中央極限定理模擬 中央極限定理應用 動差母函數(moment generating function) 動差母函數為機率密度函數(probability density fFunction, PDF）及累積分佈函數(cumulative distribution function CDF)之外，另一種描述機率分布模型的一種方式。 定義 M X (t) = E[e tx ] 而 e tx 的泰勒級數(Taylor series)為 e tx  = 1 + tx + t 2 x 2 /2! +  t 3 x 3 /3! + ... 則 M X (t) 的泰勒級數為 M X (t) = E[e tx ]  = 1 + tE[x] +  t 2 /2! E[x 2 ] +  t 3 /3! E[x 3 ] + ... 因此，當t = 0時，以t取 動差母函數m次微分，就可以找到其分布模型的第m動差。 特性 M X+Y (t) = E[e t(x+y) ] =  E[e tx+ty ] =  E[e tx e ty ]  =  E[e tx ]  E...
張貼留言
Read more »

一體成形式馬桶馬桶蓋怎麼拆及上裝式馬桶蓋膨脹螺絲原理介紹

家裡有主臥室廁所馬桶的馬桶蓋緩降有點壞掉，也就是沒有緩降功能，蓋馬桶蓋不小心會「碰」的一聲，關起來。 為了省錢，想要自己買馬桶蓋來換就好，就開始了馬桶蓋茶拆除研究之旅。 一看到主臥馬桶馬桶蓋才發現，原來沒有我想像的簡單，原因如下： 馬桶蓋兩側的空隙非常小，手要伸進去都很困難，何況是要轉鬆裡面的螺絲。 費盡千辛萬苦，終於從馬桶左側下方把手伸進去，也頂多只能摸到一邊的螺絲。 馬桶右側有一些水管，也就是說我根本不可能把手伸進去，摸到另一側的螺絲。 最後，花費了2-3天的偵探式思考，終於想到，說不定馬桶蓋向上拔起就拆除了，果真，只要將馬桶蓋立起來，往上拔就拆掉了。 附記：我家主臥廁所馬桶型號為：Derek C693NA 照片及拆除影片 馬桶前側照 馬桶蓋後側照 馬桶上方照 馬桶蓋拆除 上裝式馬桶蓋膨脹螺絲介紹 後來我另外買了上裝式馬桶蓋，包裹拆開來看到零件，附的膨脹螺絲我還是第一次看到，研究許久才知道怎麼裝。 原理 首先，拿出以下配件，可以看到上面有四個突出部 這個配件是用來裝在膨脹螺絲裡面的，它的突出部要跟膨脹螺絲相對應的開口及縫結合 然後，將螺絲從另一邊裝入 將螺帽從第一步驟介紹的配件端鎖上，直到螺帽進入該配件，與其吻合，接下來塞進安裝馬桶蓋的孔洞中，轉緊螺絲，這時，因為第一步驟的配件4個突出部已經卡住膨脹螺絲，膨脹螺絲已被孔洞夾住，且螺帽也被第一步驟的配件卡住，旋轉螺絲時，配件就會順著螺帽被往上鎖，擠開膨脹螺絲，最後把馬桶蓋安裝座鎖緊。  從正面將組裝好的膨脹螺絲塞進馬桶蓋安裝孔中，鎖緊即可
張貼留言
Read more »

LQD 與 TLT 風險報酬比較

現在美國 10 年期公債殖利率站上 4%，算是站在近 20 年來的高水位，因此我有大筆買進的衝動，不過，經過一系列研究，美國長年期公債在殖利率上升時，風險還是蠻高的，我就轉向研究公司債。 今天我研究的 ETF 是 LQD，iShares iBoxx $ Inv Grade Corporate Bond ETF，也就是投資級公司債的代表。比較標的是 TLT，原因是 TLT 算是長債的代表，而且歷史平均報酬率容易勝過短債，適合用作與 LQD 相比，作為投資參考。 首先，先來技術分析。 LQD 上次低點在 2020/10/14 的 100.38 附近，與目前的 105.01 相差 4.612%。 TLT 上次低點在 2022/11/4 的 94.22 附近，與目前的 95.16相差 1%。 技術上 技術上，兩者都在近 10年低點，技術上算是有吸引力。 殖利率上升時，公司債的表現 TLT 2003-05-23 到 2004-05-21 跌了 10.254% TLT 2009-01-06 到 2010-01-05 跌了 16.364% 這段期間美國 30 年期公債殖利率從 3.04% 漲到  3.74%，漲了 0.7%。 TLT 2012-11-14 到 2013-11-13 跌了 15.701% 這段期間 美國 30 年期公債殖利率從 2.73% 漲到  3.83%，漲了 1.1%。 TLT 2016-07-29 到 2017-07-28 跌了 10.307% 這段期間 美國 30 年期公債殖利率從 2.18% 漲到  2.89%，漲了 0.71%。 TLT 2021-11-18 到 2023-8-15 跌了 32.695% 這段期間美國 30 年期公債殖利率從 1.97% 漲到  4.35%，漲了 2.38%。 結論 LQD 現在也很便宜，在公債殖利率還有可能持續上漲狀況下，表現可能勝過公債。
張貼留言
Read more »

HYG、LQD 與 TLT 風險報酬比較

10 年期公債除了站上 4%，再撰寫這篇文章時，已經在 4.3% 徘迴，上次在 這篇文章 研究了現在是否應該要買 LQD 而不是 TLT，本篇文章我想研究非投資等級債是否更適合。 買點 HYG 現在 HYG 價格為 74.04，距離近一次低點 2020/3/20 的 69.75，差別為 5.794% LQD 上次低點在 2020/10/14 的 100.38 附近，與目前的 105.01 相差 4.612%。 TLT 上次低點在 2022/11/4 的 94.22 附近，與目前的 95.16相差 1%。 殖利率上升時，公司債的表現 TLT 2009-01-06 到 2010-01-05 跌了 16.364% 這段期間美國 30 年期公債殖利率從 3.04% 漲到  3.74%，漲了 0.7%。 TLT 2012-11-14 到 2013-11-13 跌了 15.701% 這段期間 美國 30 年期公債殖利率從 2.73% 漲到  3.83%，漲了 1.1%。 TLT 2016-07-29 到 2017-07-28 跌了 10.307% 這段期間 美國 30 年期公債殖利率從 2.18% 漲到  2.89%，漲了 0.71%。 TLT 2021-11-18 到 2023-8-15 跌了 32.695% 這段期間美國 30 年期公債殖利率從 1.97% 漲到  4.35%，漲了 2.38%。 結論 HYG 現在也很便宜，在公債殖利率還有可能持續上漲狀況下，表現可能勝過公債及投資等級公司債。
張貼留言
Read more »

Google Search Console無法為Blogger建立索引，出現伺服器錯誤(5XX)

這幾天，我把我Blogger的網址改了幾次，為了測試Google是否有把我的網頁加進搜尋索引，我到了Google Search Console做了測試，結果出現錯誤，伺服器錯誤（5xx）！ 回到「部落格經營」頁面 ⇦Blogger文章在Google搜尋引擎找不到，怎麼辦？ Google AdSense要幾篇文章才能通過之審查甘苦談⇨ 我非常驚訝，我用的是Google自家的部落格平台，怎麼可能被Google封鎖；我想可能是我剛改網址，系統還不允許排入谷歌搜尋引擎。 官方網站「Google Search Console說明(註1)」出現的解釋是 當 Googlebot 無法存取網址、要求逾時，或是網站處於流量高峰狀態時，就會出現伺服器錯誤。在此情況下，Googlebot 便不得不放棄要求。 我能找誰詢問，解決「Googlebot便不得不放棄要求」的問題？我就滿心憂慮地去睡覺了。 隔天一早起來，我第一件事就是重新在Google Search Console測試我的網頁，還好過了。真是虛驚一場。 另外，如過要查詢伺服器狀態可以到Google Search Console的「設定」去看。 點選「設定」。 點選「檢索統計資料」的「開始報表」。 點選「主機狀態」，即可查看伺服器各種數據。 註1擷取自「Google Search Console說明」，https://support.google.com/webmasters/answer/7440203?hl=zh-Hant#zippy=%2C%E4%BC%BA%E6%9C%8D%E5%99%A8%E9%8C%AF%E8%AA%A4，2021/6/13 回到「部落格經營」頁面 ⇦Blogger文章在Google搜尋引擎找不到，怎麼辦？ Google AdSense要幾篇文章才能通過之審查甘苦談⇨
6 則留言
Read more »

何謂有效利率(effective interest rate)？

有效利率(effective interest rate)就是將名目利率分割領息週期後，將複利效果納入計算後的利率。 回到「金融分析」頁面 每季領息 舉利來說，存款1年，名目年利率為6%，如果每季發利息，名目季利率就是6%/4 = 1.5%，再把每季的配息拿去定存，形成複利效果，一年後的本金加利息是100(1 + 0.015)^4= 106.14元，減去本金100元(106.14 - 100 = 6.14)，賺得利息6.14元，除以本金100元，等於0.0614，因此，考量每季將利息投入定存產生的複利效果後，實際利率應為6.14%，不是6%。 換成每月領息 如果每月發利息，名目月利率就是6%/12 = 0.5%，再將配息定存，形成複利效果，一年後的本金加利息是100(1 + 0.005)^12 = 106.17元，減去本金100元(106.17 - 100 = 6.17)，賺得利息6.17元，除以本金100元，等於0.0617，因此，考量每月將利息投入定存產生的複利效果後，實際利率應為6.17%。 將領息間距切割到無限小 名目年利率不變，領息次數越多，有效年利率就越高。假設名目年利率為6%，各領息次數的有效年利率如下表： 領息次數 有效年利率(%) 1 6 2 6.09 4 6.14 6 6.15 12 6.17 120 6.18 無限次 6.18 連續複利(compounded continuously) 將領息次數增加到無限多次，就像每秒都領一點利息，稱為連續複利(compounded continuously)。公式如下： FV = PV*e^rt FV = 終值、  PV = 現值、r = 有效利率、t = 時間長度 公式證明： 連續複利公式有趣的地方是，有效利率跟時間長度的乘積(rt)就是計算終值的參數，舉例來說，用5%有效年利率存2年結果等於用10%有效年利率存1年。 這種特性可以用在許多金融數學的算式裡，算是變動利率下債券價格評估及股價走勢預測等。 可參考： 利率變動下，終值(future value)...
張貼留言
Read more »

中央極限定理 (central limit theorem)之用均勻分布(uniform distribution)模擬常態分布(normal distribution)

中央極限定理 (central limit theorem)指的是只要從任何一個分布取出樣本後平均，樣本數量越多，這個平均會越接近常態分布(normal distribution)。 數學證明可參考： 中央極限定理(central limit theorem )證明 中央極限定理好用的地方在模擬現實生活中的很多現象，就算不確定某個事件的機率分布，只要取其平均，就可以用常態分布模擬。 舉例來說，股價可以用對數常態分布(log-normal distribution)來模擬，也就是說，股票報酬可以用常態分布模擬。 可參考： 股票走勢模擬 假設從某個數據庫，隨機選取4個樣本叫做X1、X2、X3、X4，然後將樣本平均，也就是 ( X1 + X2 + X3 + X4) / 4 = Xi，然後不斷重複選取4個樣本取平均，Xi會遵循常態分布；其平均值(mean)就是原數據庫的平均值，標準差(standard deviation)就是原數據庫的標準差除以每次樣本數開根號(根號4 = 2)。 電腦應用 中央極限定理其中一個應用就是可以用別的已知分布模型來模擬常態分布，舉例來說程式語言javascript沒有用常態分布取得隨機參數的方式。 但是可以藉由javascript原生產製的數據，藉由平均樣本來模擬。 舉例來說，我可以用javascript產至1000組範圍0到10的隨機數字，再從其中選5個數字作為樣本，然後看看樣本平均(為了方便做圖，皆四捨五入)是否遵循常態分布。 回到「工具」頁面 模擬計算 javascript程式碼分享 有需要用js來產生常態分布樣本的人可以參考這邊的程式碼。 首先設定常態分步的標準差及平均值，得到相對應均勻分布的上下限： 假設常態分步的平均值為x，標準差為y 則相對應的均勻分布的上下限分別為：上限則為x+y*√12/2，上限則為x-y*√12/2。 有了均勻分布的上下限，就可以求得其散步範圍 (range)，也就是上限減去下限： y*√12。 假設要模擬的常態分步平均值為10，標準差為...
張貼留言
Read more »