[CSS]用DIV畫表格 Grid layout!

LINEで送る
[`evernote` not found]

常常我們會希望在網頁中把須要做整理的資訊放在表個中呈現給使用者觀賞
但是TABLE太多對SEO有反效果也不是甚麼新聞了
於是有很多人開始研究怎麼用CSS+DIV畫出像是TABLE的效果
在這邊就有兩個不錯的解決方案:

  • 工具網站:Grid Designer 2
    1. 進入網站就可以很視覺性的用上面四排按鈕控制,畫出想要的表格
      Grid Designer 2-1
    2. 微調每一個欄位的文字樣式
      Grid Designer 2-2
    3. 愉快的複製程式碼來用~
      Grid Designer 2-3
      打完收工!!
  • 一行的CSS:1 line CSS Grid Framework
    這個就更加簡單明瞭了
    用一行的CSS就可以搞定

    .dp50 {width:50%;  float:left;  display: inline;  *margin-right:-1px; }

    1-line-css-framework-1 1-line-css-framework-2
    缺點就是它只能等分(2,4,8,16…..)
    不過還算是很好用的一個技巧囉

這下可以省下大把的時間跟腦細胞來拉 ^^”

2 則迴響於《[CSS]用DIV畫表格 Grid layout!

回應已關閉。