分類彙整: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);
}

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

postion:fixed;表頭設定fixed且希望無論視窗大小都置中的作法

小正正網站有實作範例,先看範例:上下左右都置中的區塊。簡單說明實作方法(因為我要處理的主要是左右置中,上下置中的理論相同就不重複。

  1. 由於fixed的定位是認瀏覽器,而不認父元素的position,所以先使用left:50%的方式。讓定位點定在瀏覽器的中間(也就是不管螢幕放到縮小,物件都會固定在瀏覽器的中間。
  2. 然後再使用margin-left,設定負值拉回。因為如果畫面都要置中,一定都會將要置中的物件設定一個寬度,例如1000px,那這個時候只要向左拉回500px即可。
  3. 因為我要處理的header我希望他寬度可以延伸,所以我設定的時候把總寬設定成2000px,因此往左要拉回1000px。

小正正有提供positioniseverything的網站,很值得參考喔!