分類彙整：css

響應式圖片（Responsive Images）作法

參考文章：https://cythilya.github.io/2018/08/24/responsive-images/

google 的文章：https://support.google.com/webmasters/answer/114016?hl=zh-Hant

最基本的用法
<img src=”small.jpg”
srcset=”small.jpg 640w, medium.jpg 960w, large.jpg 1024w”
/>

裡面的640w，960w，1024w，就是
螢幕寬度640px時，顯示small.jpg
螢幕寬度960px時，顯示medium.jpg
螢幕寬度1024px時，顯示large.jpg

table的表頭固定，內容可捲動的解法

參考文章：HTML table 表格 thead 表頭固定，tbody 滾動

css解法可用，以下是改良，他原本用 > 主要是避免表格內又包表格。但我需要用捲軸的通常不會再包表格，所以可以直接用空格就好。

thead tr{
display: table;
width: 100%;
table-layout: fixed;
}
tbody{
display: block;
height: 271px;
overflow-y: scroll;
}
tbody tr{
display: table;
width: 100%;
table-layout: fixed;}

然後table-layout的說明看這篇：善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

裡面提到
「CSS 的 table-layout 屬性有兩個可以設定的值：
automatic 表格的總寬度決定於每一個儲存格(Cell)的最大值。( 此為預設值 )
fixed 表格的總寬度決定於表格 width 屬性的定義，以及各欄位(Column) width 屬性的定義」

簡單來說預設值 automatic  要整個表格讀完，瀏覽器才能確認總寬度。
fixed 代表如果你有定義寬，那就直接用定義的寬度。

所以後者顯示速度會比較快。這個有沒有加不影響上述css把表格變成有捲軸。但可以加快網頁成像的速度。

然後讓表格底下有捲軸而且正常顯示的關鍵是要針對tr下 display: table;跟width: 100%;

感覺應該是把tr模擬成表格

總之真的是蠻神奇的設定，可以用就對了。

用css自訂radio btn / checkbox 與 css選擇器

實做技巧參考這篇

重點摘要：

  1. html內radio btn對應的要加上label，裡面可以加入span比較好做後續設定
  2. 用這段隱藏原本的樣式（單選type就改radio）
    input[type="checkbox"] {
        display:none;
    }
  3. 用這段設定新樣式（未選擇），搭配after跟before就可以做到替換框框的效果。
    input[type="checkbox"] + label span
  4. 用這段設定已選擇時的樣式
    input[type="checkbox"]:checked + label span

然後第一次看到+，使用上他就是可以選擇他第一個接觸那個元件。所以找了一下現在css到底有哪些選擇器，css選擇器可以參考這篇

然後我終於搞清楚 > 是什麼意思了。簡單來說 .aaa > ul  跟 .aaa ul 的差異是：

後者只要被 .aaa 包的底下所有 ul 都套用。 前者則是只有第一層。如果第一層ul又包了一層ul，這層就不會被套用。

圖片取代文字圖片超連結桌機可行但手機會無法點選之問題

<a>總統府</a>

a{
height:1px;
overflow:hidden;
padding:30px 0 0 0;
background:url(image/icon.jpg);
}

以上設定在桌機呈現上 a是可以點選的，滑鼠移上去整個padding的區塊也會是有hover效果、也可以點擊的。但是換成行動裝置（手機、平板），點選icon會沒有反應。也就是在行動裝置上hover的範圍只有height:1px;不含padding的範圍。

改成以下在手機上就可以點

a{
height:31px;
overflow:hidden;
text-indent:-1000px;
background:url(image/icon.jpg);
}

就是還是要用縮排的方式隱藏文字。