最新文章

HTML font style 文字樣式設計

HTML font 文字的樣式(style)非常多樣化,例如粗體字(<strong> 或 <b>)、字型(font face)、顏色(font color)... 等,透過各種不同的文字屬性,可以很輕易的設計出各種風格優美的網頁文字,而且這些網頁文字的 style 都有相對應的 CSS 替代屬性,這裡透過表格整理一份常用到的 HTML font style 讓各位參考,如何搭配整體版型設計風格就請自行斟酌使用囉!

...繼續閱讀 »
on zhaoweiting625

HTML font 粗體字設計

HTML font 粗體字設計有傳統的方式以及現在流行的 CSS 設計方式,傳統的粗體字設計可以採用 HTML 內建的 <b> 標籤或 <strong> 標籤,而 CSS 的設計方式則是採用 font-weight 屬性,兩種設計方式有什麼差別呢?簡單來說,傳統的粗體字 <b> 標籤與 <strong> 標籤使用簡便,可以隨時在想要用粗體字的地方加上標籤,看似比 CSS 的 font-weight 簡便,不過如果是大型的網站就不適合用傳統的粗體字標籤,反而應該改用 CSS 的 font-weight 標籤,因為 CSS 的架構對於整體網頁的 style 管理較具效率。
 

...繼續閱讀 »
on zhaoweiting625

HTML 表格背景圖片語法範例

增添 HTML 表格背景圖片是一種簡單又有效率的表格美化方式,傳統的 HTML 表格背景可以透過 background 來添加,如果妳想採用比較新的設計方式,就採用 CSS 的 background-image 來做吧!這也是目前相當標準的 HTML 表格背景圖片設計語法。我們這裡提到的背景圖片設計,指的是把預先準備好的圖片套用至 HTML 表格,以下我們就以傳統的 HTML background 功能與 CSS 的 background-image 屬性來套用 HTML 表格背景圖片做範例語法介紹。
 

...繼續閱讀 »
on zhaoweiting625

滑鼠移到超連結上才顯示超連結底線的設計語法

滑鼠移到超連結上才顯示超連結底線的設計語法會用到的是 CSS 的 text-decoration 屬性以及瀏覽器對 a 屬性的監聽功能,簡單來說,我們可以先將網頁超連結的文字底線利用 text-decoration 移除,再利用瀏覽器對 a 屬性監聽來判斷滑鼠是否有移至超連結上,如果有的話就再利用 text-decoration 屬性讓超連結底線顯示出來,如此一來就可以創造出滑鼠移到超連結上才顯示超連結底線的特效囉!
 

...繼續閱讀 »
on zhaoweiting625

HTML img border 圖片邊框設計

HTML img border 是用來設計圖片邊框的一種技巧,其實 border 是 CSS 內建的邊框設計屬性,不只是可以用在圖片,可以用在許多其它的網頁元素,例如 textarea、表格的邊框、input type= text、按鈕邊框 ... 等,今天這篇就來教各位如何運用 CSS border 屬性來替 HTML img 圖片增加邊框設計,對於網頁中的圖片呈現有很好的效果。

...繼續閱讀 »
on zhaoweiting625

HTML img width 圖片寬度設計

HTML img width 一般解讀為圖片的寬度,不過實際上,網頁圖片的寬度並不是直接用 width 來設定,而是必須先用 CSS 的 style 來宣告一個 width 屬性,我們在待會兒的範例語法中會寫給各位讀者朋友看,透過 width 屬性來的設計圖片寬度有一定的技巧,如果不同時設定 height 圖片高度,在大多數瀏覽器中,width 屬性可以讓圖片等比例放大縮小,一樣會在範例中呈現給各位讀者朋友看。

...繼續閱讀 »
on zhaoweiting625

HTML img height 圖片高度設計

如果你想自定網頁圖片的高度,可以透過 CSS style 來宣告一個 height 屬性,這是設計圖片高度的標準寫法,你可以強制將一張圖片放大顯示或縮小顯示,在網頁設計中是非常常用的技巧,不過有一個 height 屬性更常使用的是 width 屬性,width 是用來設計圖片寬度的屬性,有的時候我們也會把 height 與 width 搭配在一起使用,待會兒在範例中呈現給讀者朋友們看看它們的實際效果。

...繼續閱讀 »
on zhaoweiting625

HTML textarea 表單多行文字輸入欄位的邊框顏色與樣式設計

如何處理 HTML textarea 表單多行文字輸入欄位的邊框顏色與樣式設計是必要的技巧,因為傳統的 HTML textarea 預設的邊框視覺效果比較單調,難以與比較有質感的網頁設計做搭配,以往用 HTML 也的確比較難設計出好看的 textarea 邊框,不過現在有 CSS 就方便許多,網頁設計師可以很輕鬆的透過 CSS 內建的 border 屬性來設計出好看的 textarea 邊框,包含邊框顏色與邊框樣式。

...繼續閱讀 »
on zhaoweiting625

HTML textarea 表單多行文字輸入欄位內文字大小設計

HTML textarea 表單多行文字輸入欄位內文字大小設計可採用 CSS 內建的 font-size 屬性來設計,建議不要採用 HTML 內建的 font size,因為那只有 1~7 的範圍,能調整的文字大小有限,不夠精緻,而 CSS 的 font-size 屬性可接受的文字大小設定相對比較豐富,也比較容易調整出最適合閱讀的文字大小,提升 HTML textarea 表單多行文字輸入欄位的使用體驗。
 

...繼續閱讀 »
on zhaoweiting625

HTML textarea 表單多行文字輸入欄位內文字字型設計

傳統的 HTML 要在 textarea 表單都行文字輸入欄位內設計不同的字型,可以利用 HTML 本身內建的 font face 功能來設計,隨著 CSS 的發展,現在新一代的網頁設計師幾乎都是採用 CSS 內建的 font-family 屬性,來替 HTML 的 textarea 表單多行文字輸入欄位設計不同的顯示字型,應用方式非常簡單,我們會在範例中呈現幾種不同的常見字型與設計方式給各位網頁設計師們參考。

...繼續閱讀 »
on jianshuwei624