作者彙整:joyhsu

自訂 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模擬成表格

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

用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,這層就不會被套用。