CSS3 的新玩意兒 




現代化行動網頁設計基礎入門班 DAY 4


講師:張凱迪(KD.Chang)







Copyright © 2013 All rights reserved





提醒您鍵盤左右鍵可以移動投影片

 Sorry,  PPT is not suitable for Hackers : ( 

Outline 

CSS3  回顧

Media Query

Transition / Transform 

Animation

Multiple Columns

關於CSS3的那些小事







  css3 回顧








   Media Query

Media Query

media queries的功用是在偵測device的尺寸和方向,並指定給予相對應的CSS檔。使用情境粗分為兩種,一種是用於mobile compatible的網頁,也就是桌機版與行動版共用一份html文件,但要套用不同的CSS檔案;另一種是做行動版專用網頁,但想要依照不同的行動裝置給予適當的CSS排版



參考文件:Media Queries

MEDIA QUERY 用法


HTML 用法<link rel="stylesheet" media="screen and (min-width: 360px) and (max-width: 720px)" href="sample.css" /> 
CSS 用法@media screen and (min-width: 360px) and (max-width: 720px) {   .selector1{...}  .selector2{...} }

CSS3 的新玩意兒

By 張凱迪(KD Chang)

CSS3 的新玩意兒

隨著智慧型裝置的起飛,現在幾乎已是人手一支智慧型手機,根據統計今年全球智慧型手機出貨量已達10億支,由於大量的需求,開發Mobile Web也成為原生(Native App)外另一種較低成本的選擇。因此本課程將著重在網頁開發基礎介紹以及如何運用HTML5/CSS3/JavaScript(jQuery)來開發Mobile Web App。希望讓沒有基礎(或有基礎)的學員能在學習完課程後具備自學能力未來能持續進修,進而開發出搭配Facebook API、Google Map API的Mobile Web App。 課程網站:http://kdchang.cc/mobile-web-dev/

  • 2,054