SECTION#4

工具 - Emmet

Code - Jumbotron

觀念 - HTML Elements & SEMANTIC HTML

觀念 - Positions

觀念 - CSS Relative Vs Fixed Units

HTML Elements & Semantic HTML

HTML Elements

<head><body>

<head>

  • title, meta
  • css 載入, screen size

<body>

  • 整個layout的架構

Semantic HTML

有意義的HTML

semantic

form, section, header, nav

non-semantic

span, div

<!-- Nav -->
<nav>...</nav>

<!-- Heading -->
<heading>...</heading>

<!-- Section -->
<section>...</section>

<!-- Footer -->
<footer>...</footer>

Good!

<!-- Nav -->
<div>...</div>

<!-- Heading -->
<div>...</div>

<!-- Section -->
<div>...</div>

<!-- Footer -->
<div>...</div>

Bad!

CSS Position

Position Static

  • 預設的
  • 自動往上排

Position Fixed

  • 永遠固定位子
  • 用瀏覽器視窗來定位 

Position Relative

  • relative 表現的和 static 一樣
  • 除非你增加了一些額外的屬性
  • 內設定 top 、 right 、 bottom 和 left 屬性
  • 「相對地」調整其原本該出現的所在位置

Position Absolute

  • 跟Fixed很像
  • 位子跟父層有關係
  • 父層需要是relative

Relative VS Fixed Units

Relative

  • %, rem, em
  • 相對的
  • %是一種相對於目前容器元素寬度的單位
  • em 的值是受父層影響
  • rem 的值是受root層影響

Fixed

  • px, cm, in
  • 絕對的
Made with Slides.com