文章專區

網頁設計相關文章

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 <a href='https://codepen.io/bok770/pen/GxbGXW/' _fcksavedurl='https://codepen.io/bok770/pen/GxbGXW/'>GxbGXW</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>.  也可以自設定圖片作為鼠標,寫法: { cursor: url(圖片的檔案路徑); }  
在網頁設計上對圖片進行透明度處理是相當常見的, 而定義透明效果的屬性是opacity,能夠設定的數值從 0.0 到 1.0。 數值越小,透明度越高。 而IE8及更早的版本使用filter:alpha(opacity=x)。 x 的值從 0 到 100。 數值越小,越透明。 讓我們看以下範例,左為原圖,右圖將透明度調高: See the Pen <a href='https://codepen.io/bok770/pen/NYzNry/' _fcksavedurl='https://codepen.io/bok770/pen/NYzNry/'>NYzNry</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>.   常見的圖片透明度切換效果, 用hover即可做到, 只要將鼠標移到圖片上即可改變透明度。 範例: See the Pen <a href='https://codepen.io/bok770/pen/xWzVwv/' _fcksavedurl='https://codepen.io/bok770/pen/xWzVwv/'>xWzVwv</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>.
在網頁的文字內容上有時需要劃線以標示重點等等, 可以使用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

5

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屬性而受到影響。  
關於CSS的一個重要概念就是盒子模型(box model),它控制著頁面各元素的寬與高,比如當我們設定了一個元素的寬高時,所設定的數值還要再加上padding和border,最後才會是這個元素的實際尺寸。 所以若要準確控制版面不破版,原本所設定的尺寸還需要再扣掉border/padding,但是這樣每次設尺寸都要做計算,顯得太麻煩了,這時可以使用box-sizing此屬性,方便我們在設定width、height上更直觀。   box-sizing的設定值 content-box:預設值,實際寬高=所設定的數值+border+padding border-box:實際寬高=所設定的數值(已包含border和padding)   若要確保各瀏覽器皆可套用的話可直接加上以下前綴,此屬性從IE8後便開始支援:  -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;   範例: See the Pen &lt;a href='https://codepen.io/bok770/pen/OQmeeQ/' _fcksavedurl='https://codepen.io/bok770/pen/OQmeeQ/'&gt;OQmeeQ&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;.
Pixeden是一個提供免費資源的網站,提供的資源相當多元,最上面有五大分類-Print、Webs、Icons、Vectors、Graphics,也就是包括網頁、名片、圖示、背景素材等等,相當多元,而且都滿有質感的,就算不下載素材也可以在這裡找到不少靈感唷! 除了少部分需要註冊才可下載或是付費才能使用的功能以外,其他大部分的素材都可以自由下載。 Pixeden:https://www.pixeden.com/ 點進網頁後,在上方選擇想要的類別後,會有許多子分類,相當詳細。   如果只想找免費素材的話,可以直接點選上面的「free」類別。   滑到素材圖面上時會顯示該素材的下載和加進喜歡的次數   點進素材介紹頁面,點擊「Download」即可下載。   解壓縮後,可以看到有供預覽的jpg圖片檔和psd原檔。   點開psd檔,就有完整的包括電腦、平版、手機的模板可以使用囉。
CSS的連結樣式可以針對網頁中的連結,依據使用狀態提供不一樣的效果,能夠讓原本單純的連結有更多視覺上的變化,可以設定的屬性像是文字顏色、字型、粗細等等。   連結狀態共有四種: a:link – 一般的、未被點擊過的連結 a:visited -已被點擊的連結 a:hover - 滑鼠指標移到連結上方時的狀態 a:active - 連結被點擊時的狀態   而若這四種狀態皆要設定的話,必須依照以下順序規則: a:hover 必須位於a:link 和a:visited 之後 a:active 必須位於a:hover 之後   另外,text-decoration 屬性大多用於去除掉連結的下劃線 範例: a:link { text-decoration:none; } 範例: See the Pen payRKr by Ya (@bok770) on CodePen.