自訂 select 樣式

參考這篇文章

css的重點：如何把預設下拉選單樣式移除？

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

移除後，用自訂背景的方式放自己做的箭頭圖

IE要另外

::-ms-expand {
display: none;
}

被選取的狀態調整
:focus{
box-shadow: 0 0 5px 2px #467BF4;
}

響應式圖片（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模擬成表格

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