【RWD關鍵】CSS media屬性判別使用裝置:(RWD)響應式網頁、手機網頁設計、CSS Media應用

【RWD關鍵】CSS media屬性判別使用裝置:(RWD)響應式網頁、手機網頁設計、CSS Media應用

W3C定義了CSS media type屬性 用於判斷各種不同裝置載入。可分以下幾個: all: 是用於所有裝置 braille: 用於盲文觸覺反饋裝置。 embossed: 用於分頁盲文印表機。 handheld: 用於手持設備(通常是小屏幕,有限的帶寬)。 print: 用於分頁材料,在打印預覽模式下的屏幕上觀看的文件。分頁媒體的格式問題,具體到分頁媒體的信息,請諮詢。 projection: 用於例如投影機,投影演示。分頁媒體的格式問題,具體到分頁媒體的信息,請諮詢。 screen: 主要用於彩色電腦屏幕上。 speech:...

CSS position:fixed 固定視窗置中-margin-top ,margin-left 減去元素的高度寬度

使用50%設定top 與 left,再用margin-top ,margin-left 減去元素的高度寬度。 如:top:50% 元素的上方對齊頁面正中央了,再用 margin-top:-100px 將元素向上移動一半 (元素高度為 200px),讓中心點對齊頁面正中央。 #fixed-center{ width:50px; height:50px; position:fixed; top:50%; left:50%; margin-left:-25px; margin-top:-25px;...

網頁上好用小圖使用CSS ICON 圖示框架Font Awesome

網頁上好用小圖使用CSS ICON 圖示框架Font Awesome

Font Awesome 的設計只需要簡單的應用Html語法,就可輕鬆在網頁加入ICON圖示。 過去網頁設計師,需要為了網頁的小圖示,需要親手設計ICON,更或者需要在網路搜尋找尋適用的ICON,總是為了這小ICON傷腦經,現在Font Awesome將提供我們,無數的ICON圖示給我們運用,而且簡單輕鬆添加在你的網頁上。 您可以將Font Awesome圖標使用在幾乎任何地方,只需要使用HTML class加入fa,空格後面再加上想要加上圖示名稱 。(圖示名稱可在Font Awesome官網搜尋到) 你的網頁加入Font...