跳到主要內容

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 »

如何在Chart.js的圖上加上X軸或Y軸名稱

 Chart.js可以幫助網頁顯示各類圖表，要在X軸及Y軸上標示名稱方法如下： 找到Chart物件。 在Chart物件內找到options。 在options內找到scales，若無，自行加上scales。 即可在scales下設定X軸及Y軸的標示。 程式碼範例 <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const labels = [ '1', '2', '3', '4', '5', '6', ]; const data = { labels: labels, datasets: [{ label: '數據', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] }; const config = { type: 'line', data, options: {scales:{ x:{ title:{ display:true, text:"月" } }, y:{ title:{ display:true, text:"unit" } } } } }; var myChart = new Chart( document.ge...
張貼留言
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 »

中央極限定理(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 »

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 »

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

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

賭徒破產理論(Gambler's ruin)機率公式證明

賭徒破產理論(Gambler's ruin)指指的是兩位賭徒，每局賭1元，A賭徒有i元，B賭徒有n-i元，兩人不斷的賭，直到一人輸光為止。 回到「機率統計」頁面 前言 假設A賭徒勝率為p，輸的機率就是1-p，稱為q，我們要求算A贏光所有錢的機率。 讓p(i)代表A賭徒擁有i元的時候，獲得最後勝利的機率。 p(0) = 0，因為已經輸光所有錢並且賭局已結束。 p(n) = 1，因為已經贏光所有錢並且賭局已結束。 那麼p(i)呢？ 遞迴公式(recursive formula) 假設A有i元，它下一局有可能贏，有可能輸。贏的機率為p，輸的機率為1-p = q。 不論這一局是贏還是輸，A要贏光所有錢的機率還是沒有算出來。 這局贏了，接下來贏光所有錢的機率為p(i+1)。 這局輸了，接下來贏光所有錢的機率為p(i-1)。 因此，p(i) = p*p(i+1) + q*p(i-1)，且可以繼續延伸，例如p(i+1) = p*p(i+2) + q*p(i)、p(i-1) = p*p(i-) + q*p(i-2)... 每個公式需要套用原本的公式，稱為遞迴公式公式，而遞迴公式解法可以像解微分方程(differential equation)一樣，可以先用猜的！ 例如dx/dt = rx，微分之後x還是在公式裡，可以先猜測x = e^y。 猜測 假設，p(i) = x i ，並帶入p(i) = p*p(i+1) + q*p(i-1)，得到  x i   = p* x i+1  + q * x i-1 x = p* x 2  + q p* x 2  - x + q = 0 解一元二次方程式得 x = 1 或 x = q/p 微分方程 p(i) = x i ， x = 1 或 x = q/p，且有兩已知數 p(0) = 0 及 p(n) = 1。 而x i 的x有兩個根(root)，必須都帶入線性組合(linear combination)公式求解。 p(i) = A(1) i  + B ( q/p ) i  =  A +  B ( q/p ) i  p(0) = A + B = 0 ， A = -B p(n) = A + B ( q/p ) n   = 1 ...
張貼留言
Read more »