PIXNET Logo登入

chlntng129的部落格

跳到主文

歡迎光臨chlntng129在痞客邦的小天地

部落格全站分類：視覺設計

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 11月 06 週四 201410:24

  • [Bootstrap] Grid調整(offset、pull、push)

offset - 等同於排版時的margin-left，可用來調整Grid的位置。
 
範例介紹：

 
 
 2  

pull＆push - 若是要有左右交換的情境時，使用的方式會是利用pull&push

 

範例介紹 

 


 

3

4  


(繼續閱讀...)
文章標籤

chlntng129 發表在 痞客邦 留言(0) 人氣(938)

  • 個人分類：RWD
▲top
  • 11月 05 週三 201409:20

  • [Bootstrap] 基本介紹及Grid應用


基本介紹
 
Boostrap 是一套RWD的framework，使用前只需要載入Bootstrap的css與js。
Bootstrap的網站：http://getbootstrap.com
(繼續閱讀...)
文章標籤

chlntng129 發表在 痞客邦 留言(0) 人氣(663)

  • 個人分類：RWD
▲top
  • 11月 02 週日 201415:31

  • [RWD] 網站的版型類別

上禮拜去上Muki老師的RWD時，老師整理出網站類型的版型，不外乎就是以下五種。
來紀錄一下。
 
1. Mostly Fluid - 最常見的RWD版型排列方式，範例codepen - http://codepen.io/bradfrost/full/Iardn
     
        

 

 

2. Column Drop - 三欄式（多欄）的樣式。

 

　RWD layout2

 

  2-1  

 

　

 

3.　Layout Shifter - 側邊欄樣式。最著名的範例為：foodsence

  

   RWD layout3  

  

 

4. Tiny Tweaks - 為直版式（一頁樣式）。

 

  RWD layout4  

 

5. Off Canvas - 有側邊資料滑動式。最著名的就是FB的樣式

 

   RWD layout5  

　

    以上資料均為Muki課程資料，僅作紀錄用。


(繼續閱讀...)
文章標籤

chlntng129 發表在 痞客邦 留言(0) 人氣(487)

  • 個人分類：RWD
▲top
  • 11月 02 週日 201408:59

  • [RWD] 設計RWD的前置作業

960Grid
 
記得一開始搜尋RWD相關的資料時，大家的第一步都是說META 標籤的Viewport。
那我也來計錄一下META標籤應該怎樣使用。
 Viewport 
(繼續閱讀...)
文章標籤

chlntng129 發表在 痞客邦 留言(0) 人氣(502)

  • 個人分類：RWD
▲top
1

個人資訊

chlntng129
暱稱：
chlntng129
分類：
視覺設計
好友：
累積中
地區：

熱門文章

  • (11,907)[Photoshop] 圖層轉存圖片檔案
  • (5,453)[JQUERY] 簡單的選單換圖語法
  • (920)[JQUERY] 捲軸自動隱藏(FB功能)
  • (487)[RWD] 網站的版型類別

文章分類

toggle 網頁製作 (6)
  • PhotoShop (1)
  • AngularJS (0)
  • JQUERY (2)
  • RWD (4)
  • sass (1)
  • CSS (1)
  • 未分類文章 (1)

最新文章

  • [Bootstrap] Grid調整(offset、pull、push)
  • [Bootstrap] 基本介紹及Grid應用
  • [RWD] 網站的版型類別
  • [RWD] 設計RWD的前置作業
  • [Photoshop] 圖層轉存圖片檔案
  • [sass] sass初體驗
  • [CSS3] 使用 CSS3 實現超炫的 Loading（加载）效果
  • [JQUERY] 簡單的選單換圖語法
  • [JQUERY] 捲軸自動隱藏(FB功能)

最新留言

    動態訂閱

    文章精選

    文章搜尋

    誰來我家

    參觀人氣

    • 本日人氣：
    • 累積人氣：