文章專區

網頁設計相關文章

在網頁設計上,有時我們只要擷取圖片的一部分時,若是還要另外切圖片的話又會顯得累贅,這時我們可以用CSS的屬性來自由裁切圖片囉! css的overflow屬性 設定成overflow: hidden就可以將多餘的圖片隱藏起來,並利用margin來控制要顯示的部分。 範例: 原本的完整圖片 See the Pen <a href='https://codepen.io/bok770/pen/zjZyKO/' _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'>zjZyKO</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.   使用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;.

ARTICLE

8

CSS的列表屬性

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>.
網頁的文字單位大致上分成四種,px、%、em、rem px為最常見的,屬於絕對單位;%、em、rem則為相對單位。 %單位的算法: 預設網頁上的文字大小為16px, 假如設定font-size: 75%,意思就是將預設文字大小改成:16 X 0.75=12px   那麼em、rem看起來很像的兩者,又有什麼差異呢? em是以父元素為基準的文字單位,適合使用在限制區塊的內容,例如:ul li、p、div等等,em可以快速地從父元素改變內容文字的大小。 範例: See the Pen &amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/NymyOv/' _fcksavedurl='https://codepen.io/bok770/pen/NymyOv/'&amp;amp;amp;gt;NymyOv&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;.   rem的文字則是以根元素為基準,而根元素就是指標籤。適合用在整體網頁的尺寸切換,可以依據不同的螢幕尺寸,統一改變網頁全部的文字大小。而要注意的是,rem不支援IE8之前的瀏覽器唷! 範例: See the Pen &amp;amp;lt;a href='https://codepen.io/bok770/pen/PQgQvp/' _fcksavedurl='https://codepen.io/bok770/pen/PQgQvp/' _fcksavedurl='https://codepen.io/bok770/pen/PQgQvp/' _fcksavedurl='https://codepen.io/bok770/pen/PQgQvp/'&amp;amp;gt;PQgQvp&amp;amp;lt;/a&amp;amp;gt; by Ya (&amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='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' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.
 如果想控制float元素的排版,了解clear屬性是十分重要的,兩者可謂息息相關。 可能的值有: left:消除左邊的浮動 right:消除右邊的浮動 both:消除左右兩邊的浮動 none:預設值,不消除任何一邊的浮動 inherit:繼承浮動,IE未支持此屬性值 其中尤以both最常被使用,因為當我們使用float元素時,由於區塊是浮動的,所以若下一個區塊未使用float屬性的話,可能在排版上會往上跑,造成跑版的現象,而使用clear:both可以適當地解決這個問題。   請先看以下範例: See the Pen &amp;amp;lt;a href='https://codepen.io/bok770/pen/gvZQBy/' _fcksavedurl='https://codepen.io/bok770/pen/gvZQBy/'&amp;amp;gt;gvZQBy&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;.  前兩個區塊都使用了float:left,然而第三塊(紫色)未使用浮動,因此區塊往上跑被擋在第一塊的下方。   再看以下範例: See the Pen &lt;a href='https://codepen.io/bok770/pen/yvGQVN/' _fcksavedurl='https://codepen.io/bok770/pen/yvGQVN/'&gt;yvGQVN&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;.  在兩個float區塊後面加上clear:both,如此一來便清除了上面的浮動,下面的內容就不會因為float屬性而受到影響。