網頁設計相關文章

 z-index可以設定元素的堆疊順序， 設定值越高越前面，可以為負數，例如：z-index: -1。 另外要注意的是z-index只能在有設定位（position）的元素上才會奏效。 可設定為position: static、absolute、relative、fixed。 如下圖範例1中所示，如果將色塊設成z-index: 1的話，就會將文字擋住了。 See the Pen NMQENQ by Ya (@bok770) on CodePen.   然而如果改成z-index:-1的話，因為色塊的順序為負的，所以會被放置在文字的後面。 See the Pen yjmRGB by Ya (@bok770) on CodePen.   範例2： See the Pen wjVEQq by Ya (@bok770) on CodePen. 如範例2所示，設定值越大的元素( z-index:3)，堆疊順序會越前面， 要注意設定值以免遮蓋到後方的元素。  

Select option是下拉式選單，通常用在表單（form）裡，在網頁中很常看到，像是旅行社的網站會提供旅遊國家讓網友做選擇，或是購物網站提供各項商品項目等等。  基本語法為 < select name="選單名稱" > < option value="選項值" >< /option > < /select > 範例： See the Pen ZompYe by Ya (@bok770) on CodePen. 範例中的travel-form為此選單的名字，可以自己設定， 包在裡面的option是此選單的選項，每個項目都會有一個值（value）， 用來判斷所選擇的項目，不會顯示在頁面上， 而 < option >< /option > 之間的文字就是會看到的內容， 這樣一來簡單的下拉式選單就完成了。 可以配合一些JS特效或是使用CSS美觀選單樣式。

在網頁設計上，有時我們只要擷取圖片的一部分時，若是還要另外切圖片的話又會顯得累贅，這時我們可以用CSS的屬性來自由裁切圖片囉！ css的overflow屬性 設定成overflow: hidden就可以將多餘的圖片隱藏起來，並利用margin來控制要顯示的部分。 範例： 原本的完整圖片 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/zjZyKO/' _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;zjZyKO&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   使用css裁切過後 See the Pen KRovqO by Ya (@bok770) on CodePen.   css的clip屬性 clip的屬性值僅有rect( 矩形 )，其值為 rect (top, right, bottom, left)，預設值為auto，而必須注意的是此屬性要有position:absolute才會生效，圖片顯示範圍的計算為top減掉bottom為顯示範圍的高，right減掉left為顯示範圍的寬。 範例： See the Pen LmdjJO by Ya (@bok770) on CodePen.

 作為網頁設計師肯定對製圖軟體Photoshop不陌生， 而現在可以直接用CSS呈現囉！ 雖然目前的瀏覽器支援度很有限， 除了Opera與IE無法支援以外，Chrome和Firefox則可以不靠前綴即可呈現 。 CSS的mix-blend-mode屬性就跟Photoshop的圖層混合模式一樣，雖然不如Photoshop那麼多，但也高達十六種效果。   就讓我們看以下範例，可以比較各個色彩模式的呈現： mix-blend-mode: normal 一般 預設值，沒有被混合。 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/zjZyKO/' _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;zjZyKO&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: multiply 色彩增值 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/JvWwbY/' _fcksavedurl='https://codepen.io/bok770/pen/JvWwbY/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;JvWwbY&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: screen 濾色 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/ervbBa/' _fcksavedurl='https://codepen.io/bok770/pen/ervbBa/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;ervbBa&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: overlay 覆蓋 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/vjxvgx/' _fcksavedurl='https://codepen.io/bok770/pen/vjxvgx/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;vjxvgx&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: darken 變暗 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/QrpzdV/' _fcksavedurl='https://codepen.io/bok770/pen/QrpzdV/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;QrpzdV&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: lighten 變亮 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/odZJZz/' _fcksavedurl='https://codepen.io/bok770/pen/odZJZz/'&amp;amp;amp;amp;amp;amp;amp;amp;gt;odZJZz&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: color-dodge 加亮顏色（減淡） See the Pen &amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/ELWGma/' _fcksavedurl='https://codepen.io/bok770/pen/ELWGma/'&amp;amp;amp;amp;amp;amp;amp;gt;ELWGma&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: color-burn 加深顏色 See the Pen &amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/wjJRej/' _fcksavedurl='https://codepen.io/bok770/pen/wjJRej/' _fcksavedurl='https://codepen.io/bok770/pen/wjJRej/'&amp;amp;amp;amp;amp;amp;gt;wjJRej&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: hard-light 實光 See the Pen &amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/JvWwyX/' _fcksavedurl='https://codepen.io/bok770/pen/JvWwyX/'&amp;amp;amp;amp;amp;gt;JvWwyX&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;.   mix-blend-mode: soft-light 柔光 See the Pen &amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/bMqOrj/' _fcksavedurl='https://codepen.io/bok770/pen/bMqOrj/'&amp;amp;amp;amp;gt;bMqOrj&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;.   mix-blend-mode: difference 差異化 See the Pen &amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/aGJPLv/' _fcksavedurl='https://codepen.io/bok770/pen/aGJPLv/'&amp;amp;amp;gt;aGJPLv&amp;amp;amp;lt;/a&amp;amp;amp;gt; by Ya (&amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;gt;@bok770&amp;amp;amp;lt;/a&amp;amp;amp;gt;) on &amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;gt;CodePen&amp;amp;amp;lt;/a&amp;amp;amp;gt;.   mix-blend-mode: exclusion 排除 See the Pen &amp;amp;lt;a href='https://codepen.io/bok770/pen/WJpLZa/' _fcksavedurl='https://codepen.io/bok770/pen/WJpLZa/'&amp;amp;gt;WJpLZa&amp;amp;lt;/a&amp;amp;gt; by Ya (&amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;gt;@bok770&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.   mix-blend-mode: hue 色相 See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/ELWGbj/' _fcksavedurl='https://codepen.io/bok770/pen/ELWGbj/'&amp;gt;ELWGbj&amp;lt;/a&amp;gt; by Ya (&amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.   mix-blend-mode: saturation 飽和度 See the Pen &lt;a href='https://codepen.io/bok770/pen/GdWPOO/' _fcksavedurl='https://codepen.io/bok770/pen/GdWPOO/'&gt;GdWPOO&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.   mix-blend-mode: color 顏色 See the Pen <a href='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/'>rvyopN</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.   mix-blend-mode: luminosity 明度 See the Pen <a href='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/'>LmWMeb</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.    

 CSS的border屬性可以設定區塊的邊框，預設值為none，常見的有以下： border-style：邊框樣式 border-top: 上框線 border-bottom: 下框線 border-left: 左框線 border-right: 右框線 border: 四邊框線 border-width: 邊線的寬度 border-color：邊線的顏色   範例： border-top:1px solid #000 border-bottom:4px dotted #009FCC border-left:2px dashed  #FF8800 border-right:1px solid  #7A0099   我們可以分別為四邊設定不同的數值，如果說四邊的屬性都一樣時， 可以直接寫border統一描述，而不用四邊都各寫一次。 範例： border: 1px solid #4d4d4d   border-width 屬性是用來設定邊框的寬度。 可用的值除了數字以外，也可以用 thin (薄)、medium (中等)、thick (厚)。 範例： border-width: thin     border-style則可以設定邊框的樣式 設定值如下： border-style:solid　實線　 border-style:dotted 　點線　 border-style:dashed 　虛線　 border-style:double 　雙線　 border-style:groove 　凹線　 border-style:ridge　凸線　 border-style:inset　嵌入線　 border-style:outset　浮出線   範例： See the Pen <a href='https://codepen.io/bok770/pen/RyrgRe/' _fcksavedurl='https://codepen.io/bok770/pen/RyrgRe/' _fcksavedurl='https://codepen.io/bok770/pen/RyrgRe/'>RyrgRe</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.

CSS的cursor屬性可以改變滑鼠游標的形狀， 當滑鼠移過去時，就會顯示自設定的形狀。 共有以下這些屬性值 Crosshair、pointer、text、move、wait、help、progress、 not-allowed、no-drop、no-vertical-text、all-scroll、col-resize、 row-resize、e-resize、ne-resize、n-resize、nw-resize、w-resize、 sw-resize、s-resize、se-resize   範例一覽表，將滑鼠移上即可顯示該游標的圖案： See the Pen &lt;a href='https://codepen.io/bok770/pen/GxbGXW/' _fcksavedurl='https://codepen.io/bok770/pen/GxbGXW/'&gt;GxbGXW&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.  也可以自設定圖片作為鼠標，寫法： { cursor: url(圖片的檔案路徑); }  

在網頁設計上對圖片進行透明度處理是相當常見的， 而定義透明效果的屬性是opacity，能夠設定的數值從 0.0 到 1.0。 數值越小，透明度越高。 而IE8及更早的版本使用filter:alpha(opacity=x)。 x 的值從 0 到 100。 數值越小，越透明。 讓我們看以下範例，左為原圖，右圖將透明度調高： See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/NYzNry/' _fcksavedurl='https://codepen.io/bok770/pen/NYzNry/'&amp;gt;NYzNry&amp;lt;/a&amp;gt; by Ya (&amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.   常見的圖片透明度切換效果， 用hover即可做到， 只要將鼠標移到圖片上即可改變透明度。 範例： See the Pen &amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/xWzVwv/' _fcksavedurl='https://codepen.io/bok770/pen/xWzVwv/'&amp;amp;amp;gt;xWzVwv&amp;amp;amp;lt;/a&amp;amp;amp;gt; by Ya (&amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;gt;@bok770&amp;amp;amp;lt;/a&amp;amp;amp;gt;) on &amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;gt;CodePen&amp;amp;amp;lt;/a&amp;amp;amp;gt;.

在網頁的文字內容上有時需要劃線以標示重點等等， 可以使用html的 < u > 標籤， 或是CSS的text-decoration屬性。 不過用CSS表現的變化會比較多， 以下介紹此兩種範例：   html的< u >標籤   See the Pen &amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/bvMvbZ/' _fcksavedurl='https://codepen.io/bok770/pen/bvMvbZ/'&amp;amp;amp;amp;amp;gt;bvMvbZ&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;.     CSS的text-decoration 常見的設定值有 none：無底線，為預設值 underline：文字下的底線。 overline：文字上的線。 line-through：穿過文字的線，可以看做是刪除線。 範例： See the Pen &amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/MVGVgw/' _fcksavedurl='https://codepen.io/bok770/pen/MVGVgw/' _fcksavedurl='https://codepen.io/bok770/pen/MVGVgw/'&amp;amp;amp;amp;gt;MVGVgw&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;.&amp;amp;amp;amp;lt;br&amp;amp;amp;amp;gt;   若是覺得底線與文字過於接近， 則是可以使用border-bottom或是box-shadow， 搭配padding-bottom來設定文字與底線的距離。 在底線的呈現上兩者並無太大區別。 兩者的差異在於box-shadow生成的底線不會對排版造成影響， 而border-bottom則因為會增加文字的尺寸，可能會影響元素的排列。 範例： See the Pen &lt;a href='https://codepen.io/bok770/pen/JLvLGy/' _fcksavedurl='https://codepen.io/bok770/pen/JLvLGy/' _fcksavedurl='https://codepen.io/bok770/pen/JLvLGy/'&gt;JLvLGy&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.

我們在網頁設計時，會需要使用表格來做排版，而說到表格最基本和常見的就是table了。 一個基本的表格是由 和一或多個定義表格的row(行)、colspan(列)、和組合而成的。 定義表格的表頭（文字預設為粗體）、定義表格的資料。 寫法： See the Pen &lt;a href='https://codepen.io/bok770/pen/xWRVdd/' _fcksavedurl='https://codepen.io/bok770/pen/xWRVdd/' _fcksavedurl='https://codepen.io/bok770/pen/xWRVdd/'&gt;xWRVdd&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.     colspan屬性 表示表格欄位跨越的columns（行）數，為橫向跨越。 範例： See the Pen &lt;a href='https://codepen.io/bok770/pen/PRbNQV/' _fcksavedurl='https://codepen.io/bok770/pen/PRbNQV/' _fcksavedurl='https://codepen.io/bok770/pen/PRbNQV/'&gt;PRbNQV&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.   rowspan 屬性 表示表格欄位跨越的rows（列）數，為縱向跨越。 範例： See the Pen &lt;a href='https://codepen.io/bok770/pen/ZxBWvO/' _fcksavedurl='https://codepen.io/bok770/pen/ZxBWvO/' _fcksavedurl='https://codepen.io/bok770/pen/ZxBWvO/'&gt;ZxBWvO&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.

CSS的列表(list)算是網頁設計中時常使用的屬性，在內容中添加列表來陳列資訊，一般有ul li、ol li，預設值為由上而下排列。 ul li為無序列表，也是最常見的列表，預設開頭為一圓點「．」。 ol li為有序列表，開頭會自動產生數字排序，初始數字從一開始。  範例： See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/YaXWKr/' _fcksavedurl='https://codepen.io/bok770/pen/YaXWKr/'&amp;gt;YaXWKr&amp;lt;/a&amp;gt; by Ya (&amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.     若是不想要預設的黑點符號，可用list-style-type屬性加以修改，最常見的設定值為： none (沒有) disc (全黑圓圈) circle (空心圓圈) square (正方形) 範例： See the Pen &lt;a href='https://codepen.io/bok770/pen/ZxGOEE/' _fcksavedurl='https://codepen.io/bok770/pen/ZxGOEE/'&gt;ZxGOEE&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.   另外，網頁的導覽列也時常使用到ul li，可善用css即可表現。 See the Pen <a href='https://codepen.io/bok770/pen/bvdeGQ/' _fcksavedurl='https://codepen.io/bok770/pen/bvdeGQ/' _fcksavedurl='https://codepen.io/bok770/pen/bvdeGQ/'>bvdeGQ</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.