50+常用響應式網頁設計前端代碼Responsive Patterns

响应式代码-1

設計師做前端的工作是很常見的,目前流行響應式網頁設計,用CSS3寫起來有時候挺麻煩,特別是不熟悉前端的用戶,不過沒關係,今天向大家分享50+常用響應式網頁設計前端代碼:Responsive Patterns。

响应式代码-1
>這網站集合了RWD設計想著的常用代碼,20多個佈局、30多種導航還有常用用的列表排版、圖像、視頻、表單表格、標籤等片段,並且已經HTML代碼格式,可直接拿來用!還要參考它的寫法,很棒啊!

響應式佈局

有常用的3欄佈局、列表等響應式代碼,點擊對應鏈接查看效果。

响应式代码-2

響應式導航

這裡的網站導航菜單很齊全,不同排版、1級2級3級菜單、漢堡包菜單,一應俱全啊。

响应式代码-3

圖像、媒體、數據

圖像、視頻、表格如何應用在響應式上面呢?這裡有很多例子,建議用來學習下怎麼寫的。

响应式代码-4

表單、文字、模塊

這裡主要是一些TAB選項卡、表單、文本段落的使用,Responsive Footnotes這個很有意思。

响应式代码-5

總結

對於設計師和前端人員來說,真是個好的整理,既能直接使用又能拿來學習。

網址:http://bradfrost.github.io/this-is-responsive/patterns.html

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s