【部落格CSS】製作簡單的部落格表格、描點標記
【部落格CSS】製作簡單的部落格表格、描點標記，方便瀏覽者可以立即點擊前往想要看到的地方。
看一下下圖，我用黑色方框框起來的地方，是通往每個導覽處的【連結】
如上圖所示，我要做一個【快速導覽】，方便瀏覽者可以點擊導覽處的連結，去連接下面的內容，直接前往想要看的地方。
以及在每個內容的右下角，生成一個【回到頂部】標籤，讓瀏覽者可以看完之後，馬上又點回來。
程式碼
<!--整體標題-->
<h2 id="champ-skins" style="font-size: 22px; margin: 0px 0px 8px;">英雄聯盟世界賽 歷年冠軍造型總覽（S1–S14）</h2> //大標題，我用字型加大、黑色粗體去完成
<p style="color: #666666; margin:
0px 0px 16px;">整理：各路位（MID / TOP / JG / AD / SUP）</p> //副標題，我用灰色，字型小一號去呈現
<!--目錄-->
<div style="background: rgb(238, 243, 247); border-radius: 8px; border: 1px solid rgb(217, 227, 234); margin: 10px 0px 16px; padding: 10px 12px;"> //目錄用藍色的底框將內容框起來；border-radius: 8px是指圓角方框8px；border: 1px是指邊框粗細、solid實心的框（虛線可以用dashed）、rgb設定顏色；
<strong>快速導覽：</strong>
<a href="#mid" style="margin-right: 12px;">中路（MID）</a>
<a href="#top" style="margin-right: 12px;">上路（TOP）</a>
<a href="#jg" style="margin-right: 12px;">打野（JG）</a>
<a href="#ad" style="margin-right: 12px;">射手（AD）</a>
<a href="#sup">輔助（SUP）</a>
//這裡面的herf後面，往往接的是網址，而這裡接的是待會定義的變數，比如待會我在其他描點處設定#mid，那麼點擊中路（MID）這個藍色的超連結時，就會直接連結到我設定的描點處。
</div>
<!--內容區塊-->
<div style="background: rgb(247,
247, 247); border-radius: 8px; font-size: 15px; line-height: 1.8; padding: 14px
18px;">
//這其實就是設定部落格常用的灰色底框
<!--MID-->
<h3 id="mid" style="background: rgb(34, 34, 34);
border-radius: 6px; color: white; margin-top: 0px; padding: 6px 10px;">中路（MID）歷年冠軍造型</h3> //我在這裡定義id="mid"，連結導覽的地方
<span style="color: red; font-weight:
bold;">2011</span> Fnatic Shushei 酒桶<br />
<span style="color: red; font-weight:
bold;">2012</span> TPA Toyz 球女<br />
<span style="color: red; font-weight:
bold;">2013</span> SKT T1 Faker 劫<br />
<span style="color: red; font-weight:
bold;">2014</span> SSW Pawn 塔隆<br />
<span style="color: red; font-weight:
bold;">2015</span> SKT T1 Faker / Easyhoon 雷茲 / 沙皇<br />
<span style="color: red; font-weight:
bold;">2016</span> SKT T1 Faker 星朵拉<br />
<span style="color: red; font-weight:
bold;">2017</span> SSG Crown 塔莉雅<br />
<span style="color: red; font-weight:
bold;">2018</span> iG Rookie 勒布朗<br />
<span style="color: red; font-weight:
bold;">2019</span> FPX Doinb 墨菲特<br />
<span style="color: red; font-weight:
bold;">2020</span> DWG ShowMaker 逆命<br />
<span style="color: red; font-weight:
bold;">2021</span> EDG Scout 柔依<br />
<span style="color: red; font-weight:
bold;">2022</span> DRX Zeka 阿卡莉<br />
<span style="color: red; font-weight:
bold;">2023</span> T1 Faker 球女<br />
<span style="color: red; font-weight:
bold;">2024</span> T1 Faker 犽凝 / 賽勒斯（FMVP）<br />
<div style="margin: 6px 0px 14px; text-align:
right;"><a href="#champ-skins">回到頂部↑</a></div>
//設定回到頂部的按鈕，讓瀏覽者可以看完直接回到導覽處。#champ-skins是上面在瀏覽處設定的
留言
張貼留言