分類彙整：CSS

Css vs jQuery選擇器

發表於 2022 年 03 月 21 日 由 power

CSS vs jQuery 名稱 CSS jQuery 第一個元素 :first-child :first, :first-child 最後一個元素 :last-child :last, :last-child 偶數的元素 :nth-child(even) :even 奇數的元素 :nth-child(odd) dd 大於給定索引值的元素 :nth-child(n+2) :gt(0) 小於給定索引值的元素 :nth-child(-1n+8) :lt(2) :nth-child(n) 裡面算數學 :nth-child(an+b) a, b的數值可以由我們自訂 n代表的是由 0 開始的遞增數字

發表於 CSS | 發表迴響

CSS 偶數與奇數列

發表於 2020 年 07 月 17 日 由 power

table tr:nth-child(even){ background-color: #CCFF99; } table tr:nth-child(odd){ background-color: #053D0A; } table tr:nth-child(3n){ background-color: #666666; } table tr:nth-child(3n+1){ background-color: #0066FF; } ul li:first-child {background: #FF0} ul li:last-child {background: #FF0}

發表於 CSS | 發表迴響

CSS文字漸層

發表於 2014 年 09 月 11 日 由 power

h1{ color: #000000; position: absolute; -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)), to(rgba(0,0,0,0))); } <h1>CSS文字漸層</h1>    

發表於 CSS | 發表迴響

CSS：實現強制不換行、自動換行、強制換行

發表於 2014 年 04 月 28 日 由 power

自動換行 div{ word-wrap: break-word; word-break: normal; } 強制不換行 div{ white-space:nowrap; } 強制英文單詞斷行 div{ word-break:break-all; }  

發表於 CSS | 發表迴響

手機版網頁圖片適當顯示問題

發表於 2014 年 02 月 18 日 由 power

透過css可以解決使用手機行動裝置瀏覽網頁時 圖片適當顯示的問題 img{ max-width:100%; height:auto; }

發表於 CSS | 發表迴響

使用CSS背景來呈現浮水印效果

發表於 2014 年 01 月 24 日 由 power

<img src="浮水印.png" style="background-image:url(圖片.jpg);background-size：contain;" /> 浮水印.png 需要是透明底的圖片 background-size 用來設定元素背景圖片的大小 contain 使背景圖在尺寸大於內容元素的情況下，得以完整呈現。

發表於 CSS | 發表迴響

Reset CSS

發表於 2013 年 12 月 13 日 由 power

在CSS 前掛上這一段「Reset CSS」的語法，就可以輕鬆解決各大瀏覽器的差異 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, … 繼續閱讀 →

發表於 CSS | 4 則迴響