分類
CSS 前端

10個關於Responsive Design的提示

這10點被製作在這張圖片上面
一開始列出2010年跟2012年各地區的手機流量
接著是10點提示

  1. 保持你的版面簡單 (KEEP YOUR LAYOUT SIMPLE)
  2. 使用媒體查詢 (USE MEDIA QUERIES) + MOST FREQUENT RESOLUTIONS
  3. 定義中斷點 (DEFINE THE BREAKPOINTS)
  4. 讓你的版型更靈活 (MAKE YOUR LAYOUT FLEXIBLE)
  5. 正確呈現你的圖片 (MAKE YOUR PICTURES BEHAVE)
  6. 別忘記 MAX & MIN (DON’T FORGET MAX&MIN)
  7. 產生最好的相對性內容 (MAKE MOST THINGS RELATIVE)
  8. 當使用手機端,要線性思考設計 (WHEN MOBILE LINEARIZE)
  9. 省略非必要的內容 (SKIP THE NON ESSENTIAL CONTENT)
  10. 確認你的META VIEWPORT (CHECK YOUR META VIEWPORT)
分類
Bootstrap CSS 偶然 全端之路 分享 初次研究 前端 收集 網站研究

使用一致的社交登入按鈕【Social Buttons for Bootstrap】

剛好看到 HackMD – Markdown 協作筆記 的社交登入按鈕

五個社交平台都是一致的按鈕
就想說用『btn btn-lg btn-block btn-social btn-facebook
去搜尋一下看看會找到甚麼 【我的預設搜尋已經改為 duckduckgo.com 了】

分類
CSS js 前端 每日一篇 網路觀察

JSFiddle-前端的實驗平台【190/366】

JSFiddle 跟昨天介紹的CodePen是類似的平台
都是使用HTML、CSS、JS
去寫相關的Code用來展示一些功能或是測試自己寫的功能使用的

分類
CSS 前端 每日一篇 網路觀察

CodePen-前端的藏寶庫【189/366】

CodePen 可以在上面測試自己寫的東西
更多人把自己的小作品展示在上面
所以很多有趣的內容可以在上面找到
包括非常多CSS刻出來有趣的作品

分類
CSS jQuery js 前端 每日一篇

前端開發中文資源【42/366】

昨天找Font Awesome相關資料的時候
剛好看到中文的資源站
版本還停在3.0.2
不過主站的前端開發資料滿齊全的

網站名稱:Bootstrap中文网
網址:http://www.bootcss.com/

分類
CSS 前端 每日一篇

Font Awesome 好用的CSS工具【41/366】

今天寫了些Code
剛好有用到一個不錯的工具
使用自行檔配合CSS來顯示圖示
還支援大小變化,動畫顯示
圖示翻轉、還可以重疊圖示
整個就是超級好用啊!!!

分類
CSS 前端 每日一篇

CSS background 背景屬性【11/366】

這幾天遇到背景屬性
究竟要分開寫還合在一起寫好
所以就查了一下

分類
CSS 前端

圖片垂直方向的對齊

今天遇到一個情況
整串文字裡面,有穿插一張圖片
要設定這張圖片的對齊
於是google一下CSS的做法
找到了一個屬性

CSS vertical-align 屬性
連結:CSS vertical-align 屬性 – Wibibi

因為要讓圖片向上對齊
就用了

vertical-align : super;

讓圖片對齊到上標的位置
 

分類
CSS

純CSS喬巴

http://blog.chibc.net/learning/uibeginner-daily/848

分類
CSS

Marvel片頭,純HTML+CSS

http://codepen.io/pixelass/pen/WvemZR?editors=100