Power的部落格 » CSS http://www.forpower.com/blog 把夢越作越小了 Wed, 15 Oct 2025 07:44:27 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 Css vs jQuery選擇器 http://www.forpower.com/blog/2022/03/21/css-vs-jquery%e9%81%b8%e6%93%87%e5%99%a8/ http://www.forpower.com/blog/2022/03/21/css-vs-jquery%e9%81%b8%e6%93%87%e5%99%a8/#comments Mon, 21 Mar 2022 01:38:24 +0000 power http://www.forpower.com/blog/?p=866 CSS vs jQuery
名稱 CSS jQuery 第一個元素 :first-child :first, :first-child 最後一個元素 :last-child :last, :last-child 偶數的元素 :nth-child(even) :even 奇數的元素 :nth-child(odd) :o dd 大於給定索引值的元素 :nth-child(n+2) :gt(0) 小於給定索引值的元素 :nth-child(-1n+8) :lt(2)

:nth-child(n) 裡面算數學

:nth-child(an+b)
a, b的數值可以由我們自訂
n代表的是由 0 開始的遞增數字

]]> http://www.forpower.com/blog/2022/03/21/css-vs-jquery%e9%81%b8%e6%93%87%e5%99%a8/feed/ 0 CSS 偶數與奇數列 http://www.forpower.com/blog/2020/07/17/css-%e5%81%b6%e6%95%b8%e8%88%87%e5%a5%87%e6%95%b8%e5%88%97/ http://www.forpower.com/blog/2020/07/17/css-%e5%81%b6%e6%95%b8%e8%88%87%e5%a5%87%e6%95%b8%e5%88%97/#comments Fri, 17 Jul 2020 00:52:20 +0000 power http://www.forpower.com/blog/?p=805 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}
]]> http://www.forpower.com/blog/2020/07/17/css-%e5%81%b6%e6%95%b8%e8%88%87%e5%a5%87%e6%95%b8%e5%88%97/feed/ 0 CSS文字漸層 http://www.forpower.com/blog/2014/09/11/css%e6%96%87%e5%ad%97%e6%bc%b8%e5%b1%a4/ http://www.forpower.com/blog/2014/09/11/css%e6%96%87%e5%ad%97%e6%bc%b8%e5%b1%a4/#comments Thu, 11 Sep 2014 10:15:14 +0000 power http://www.forpower.com/blog/?p=199 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>

 

 

]]> http://www.forpower.com/blog/2014/09/11/css%e6%96%87%e5%ad%97%e6%bc%b8%e5%b1%a4/feed/ 0 CSS：實現強制不換行、自動換行、強制換行 http://www.forpower.com/blog/2014/04/28/css%ef%bc%9a%e5%af%a6%e7%8f%be%e5%bc%b7%e5%88%b6%e4%b8%8d%e6%8f%9b%e8%a1%8c%e3%80%81%e8%87%aa%e5%8b%95%e6%8f%9b%e8%a1%8c%e3%80%81%e5%bc%b7%e5%88%b6%e6%8f%9b%e8%a1%8c/ http://www.forpower.com/blog/2014/04/28/css%ef%bc%9a%e5%af%a6%e7%8f%be%e5%bc%b7%e5%88%b6%e4%b8%8d%e6%8f%9b%e8%a1%8c%e3%80%81%e8%87%aa%e5%8b%95%e6%8f%9b%e8%a1%8c%e3%80%81%e5%bc%b7%e5%88%b6%e6%8f%9b%e8%a1%8c/#comments Mon, 28 Apr 2014 09:20:33 +0000 power http://www.forpower.com/blog/?p=172 自動換行
div{ word-wrap: break-word; word-break: normal; }

強制不換行
div{ white-space:nowrap; }

強制英文單詞斷行
div{ word-break:break-all; }

 

]]> http://www.forpower.com/blog/2014/04/28/css%ef%bc%9a%e5%af%a6%e7%8f%be%e5%bc%b7%e5%88%b6%e4%b8%8d%e6%8f%9b%e8%a1%8c%e3%80%81%e8%87%aa%e5%8b%95%e6%8f%9b%e8%a1%8c%e3%80%81%e5%bc%b7%e5%88%b6%e6%8f%9b%e8%a1%8c/feed/ 0 手機版網頁圖片適當顯示問題 http://www.forpower.com/blog/2014/02/18/%e6%89%8b%e6%a9%9f%e7%89%88%e7%b6%b2%e9%a0%81%e5%9c%96%e7%89%87%e9%81%a9%e7%95%b6%e9%a1%af%e7%a4%ba%e5%95%8f%e9%a1%8c/ http://www.forpower.com/blog/2014/02/18/%e6%89%8b%e6%a9%9f%e7%89%88%e7%b6%b2%e9%a0%81%e5%9c%96%e7%89%87%e9%81%a9%e7%95%b6%e9%a1%af%e7%a4%ba%e5%95%8f%e9%a1%8c/#comments Tue, 18 Feb 2014 10:15:33 +0000 power http://www.forpower.com/blog/?p=151 透過css可以解決使用手機行動裝置瀏覽網頁時
圖片適當顯示的問題
img{
max-width:100%;
height:auto;
}

]]> http://www.forpower.com/blog/2014/02/18/%e6%89%8b%e6%a9%9f%e7%89%88%e7%b6%b2%e9%a0%81%e5%9c%96%e7%89%87%e9%81%a9%e7%95%b6%e9%a1%af%e7%a4%ba%e5%95%8f%e9%a1%8c/feed/ 0 使用CSS背景來呈現浮水印效果 http://www.forpower.com/blog/2014/01/24/%e4%bd%bf%e7%94%a8css%e8%83%8c%e6%99%af%e4%be%86%e5%91%88%e7%8f%be%e6%b5%ae%e6%b0%b4%e5%8d%b0%e6%95%88%e6%9e%9c/ http://www.forpower.com/blog/2014/01/24/%e4%bd%bf%e7%94%a8css%e8%83%8c%e6%99%af%e4%be%86%e5%91%88%e7%8f%be%e6%b5%ae%e6%b0%b4%e5%8d%b0%e6%95%88%e6%9e%9c/#comments Fri, 24 Jan 2014 02:54:22 +0000 power http://www.forpower.com/blog/?p=137 <img src="浮水印.png" style="background-image:url(圖片.jpg);background-size：contain;" />

浮水印.png 需要是透明底的圖片
background-size 用來設定元素背景圖片的大小
contain 使背景圖在尺寸大於內容元素的情況下，得以完整呈現。

]]> http://www.forpower.com/blog/2014/01/24/%e4%bd%bf%e7%94%a8css%e8%83%8c%e6%99%af%e4%be%86%e5%91%88%e7%8f%be%e6%b5%ae%e6%b0%b4%e5%8d%b0%e6%95%88%e6%9e%9c/feed/ 0 Reset CSS http://www.forpower.com/blog/2013/12/13/reset-css/ http://www.forpower.com/blog/2013/12/13/reset-css/#comments Fri, 13 Dec 2013 03:18:11 +0000 power http://www.forpower.com/blog/?p=129 繼續閱讀 →]]> 在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, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

來源： http://meyerweb.com/eric/tools/css/reset/

]]> http://www.forpower.com/blog/2013/12/13/reset-css/feed/ 4