Css

CSS 網頁排版樣式

基礎

• Box-Model -- https://www.w3schools.com/css/css_boxmodel.asp
• Position -- http://www.see-design.com.tw/i/css_position.html （讚！）
  • https://www.w3schools.com/css/css_positioning.asp
• 顯示隱藏 -- http://www.runoob.com/css/css-display-visibility.html
• 浮動 -- http://www.runoob.com/css/css-float.html
• Z-index -- https://www.w3schools.com/cssref/pr_pos_z-index.asp
  • http://www.webtech.tw/info.php?tid=36

布局

• CSS 导航栏 -- http://www.runoob.com/css/css-navbar.html
  • http://www.runoob.com/try/try.php?filename=trycss_navbar_vertical
  • 全屏高度的固定导航条 -- http://www.runoob.com/try/try.php?filename=trycss_navbar_vertical_fixed&basepath=0
  • 水平导航条实例 -- http://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_black&basepath=0
  • http://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_dividers&basepath=0
  • http://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_black_fixed&basepath=0
• 下拉菜單 -- http://www.runoob.com/css/css-dropdowns.html
  • 下拉内容的对齐方式 -- http://www.runoob.com/try/try.php?filename=trycss_dropdown_right
• Flex-Layout -- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (讚!)
  • Demo Flexbox 3 -- https://codepen.io/chriscoyier/pen/vWEMWw (經典排版)
  • https://www.w3schools.com/css/css3_flexbox.asp
  • https://developer.mozilla.org/en-US/docs/Web/CSS/flex
• BEM 方法 -- https://en.bem.info/methodology/ (概念!)
• Grid
  • https://www.w3schools.com/css/css_grid.asp
  • 格線佈局的基本概念
  • CSS Grid 屬性介紹
• Flexbox
  • 深入解析 CSS Flexbox
  • https://www.w3schools.com/css/css3_flexbox.asp (讚!)
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • http://zh-tw.learnlayout.com/flexbox.html

樣板套件

• http://materializecss.com/

更多

• 經典排版