HTML 彙整 - 第 2 頁，總計 3 頁 - VECTOR COOL 威得數位行銷

HTML5 a tag force download

希望強制讓使用者下載檔案，但是在a標籤將網址指向檔案，在一些常用檔案例如：jpg、png、PDF，常會被瀏覽器直接開啟，無法直接下載，比較正規的做法是在發送 headers 時做這件事，但有時我們在處理靜態網頁就可以用偷吃步，在HTML5 a 標籤中多了一個download屬性，就可以用強制檔案用下載的方式讓使用者下載a標籤連結中的檔案，但這偷吃步要小心瀏覽器相容性

點我看效果 download PNG

[……]

CSS ul li 水平對齊居中

使用 Flex

HTML

CSS

Example

See the Pen
CSS ul li Horizontal center – flex by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

https://wcc723.github.io/css/2017/07/21/css-flex/

[……]

CSS ul li 水平居中 only CSS

這是目前我認為最簡單的方法，最下方可以看到Example，特別加上一點特效

HTML

CSS

See the Pen
CSS ul li horizontal align center by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

[……]

Youtube embed iframe API loop/repeat not working

有效解決這問題，除了loop=1以外，要多加一個 playlist 參數playlist=VIDEO_ID ，這對我有效

參考資料：
https://developers.google.com/youtube/player_parameters#loop
https://stackoverflow.com/a/25781957/6784662

[……]

CSS 文字圓標教學

圓標是網頁表現手法很常見的一種方式，尤其電商，很常見用來突顯商品特價產品或新產品的標籤，以下介紹圓標的製作方式

HTML

先建立一個兩層結構的HTML如下，圓標文字包裹在內層div中

CSS

未方便辨識，先把兩個容器背景設為綠色及紅色的純色，這樣就能清楚了解容器範圍，並且先製作外層容器

接著用 CSS3.0 水平垂直居中的技巧，讓文字固定於正中間

再給文字添加一些樣式

透過顏色的區分，很容易看到兩個容器的關係，最後再慢慢調整文字及圓表尺寸顏色等樣式，以下是本教學的範例

完成樣子

See the Pen
文字圓標 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

[……]

CSS 選擇器，模糊查找匹配元素

CSS選擇器中沒有所謂的「萬用字元(*)」，可以透過一些方式接近模糊查詢方式，查找匹配屬性或值的元素

歸納出幾種用法

下表屬性名稱不一定為Class，可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值