• Web Design 105
  • 0. Introduction
  • 1. HTML & CSS
    • 1.1. HTML 設定版面、定義內文結構到設計內容
      • 1.1.0. Preparing
      • 1.1.1. HTML Document
      • 1.1.2. 版面（區塊）標籤 div
      • 1.1.3. 內容的結構標籤 h1 ~ h6, p
      • 1.1.4. 結構化資料的標籤 li, ul, ol, table, tr,...
      • 1.1.5. 超鏈結 Hyperlink
      • 1.1.6. 字樣標籤 b, i, u
      • 1.1.7. 注意事項
    • 1.2. CSS 選取 HTML 元素並賦予 Style
      • 1.2.1 CSS-1 Layout
        • 1.2.1.1 Link to CSS in HTML
        • 1.2.1.2 依據 class 或 id 編輯 CSS
        • 1.2.1.3 利用 float 屬性，先當他是 word 來排
        • 1.2.1.4 利用 Clear 避免 float 在視窗大小變化上的問題
        • 1.2.1.5 Fixed banner: 讓 banner 不管怎麼捲動都不會離開視窗
        • 1.2.1.6 如何把整個版面置中
      • 1.2.2 CSS-2 Layout vs. Content: Box model
        • 1.2.2.1 Practice-1: Box model
        • 1.2.2.2 Padding: space between content and border 增加內容和框線（border）
        • 1.2.2.3 Hierarchical div
        • 1.2.2.4 Practice-2 如何做到以下效果？
        • 1.2.2.5 超鏈結捲動修正
        • 1.2.2.6 Box model 注意事項
      • 1.2.3 CSS-3 Content Decoration
        • 1.2.3.1 建置瀏覽列Building navigation bar
        • 1.2.3.2 Practice-3 Decoration
        • 1.2.3.3 Links in banner
        • 1.2.3.4 hover 改變前景色和背景色
        • 1.2.3.5 Practice 4. 表格或列表樣式化（搭配HTML表格或列表）
        • 1.2.3.6 CSS Gallery
        • 1.2.3.7 CSS combinator and pseudo class
        • 1.2.3.8 Circular potraits
        • 1.2.3.9 字型設定
  • 2. Bootstrap
  • 3. Data presentation
  • 4. Scroll and jQuery
    • 4.1 Fixed background
    • 4.2 jQuery
    • 4.3 Scroll to move
      • 4.3.1 Horizontal scrolling
      • 4.3.2 Scrollsply
      • 4.3.3 Our scrollspy by specifying div positions
    • 4.4 Scroll to display
      • 4.4.1 Scroll to control video
      • 4.4.2 Scroll to change pics
      • 4.4.3 Play video when scroll to
      • 4.4.4 Zoomin and Zoomout
      • 4.4.5 by Waypoints
  • 5. Map
    • 5.1 Google function table
    • 5.2 Mapbox
    • 5.3 Leaflet
    • 5.4 D3.js
  • 6. Data visualization by D3.js
Powered by GitBook

1.2. CSS 選取 HTML 元素並賦予 Style

1.2. CSS 選取 HTML 元素並賦予 Style

此小節會針對 CSS 的特性做分別用三個小章節做說明，包含以下內容

  1. CSS-1 Layout
    • Link to CSS in HTML
    • 依據 class 或 id 編輯 CSS
    • 利用 float 屬性，先當他是 word 來排
    • 利用 Clear 避免 float 在視窗大小變化上的問題
    • Fixed banner: 讓 banner 不管怎麼捲動都不會離開視窗
    • 如何把整個版面置中
  2. CSS-2 Layout vs. Content: Box model
    • Practice-1: Box model
    • Padding: space between content and border 增加內容和框線（border）
    • Hierarchical div
    • Practice-2 如何做到以下效果？
    • 超鏈結捲動修正
    • Box model 注意事項
  3. CSS-3 Content Decoration
    • 建置瀏覽列Building navigation bar
    • Practice-3 Decoration
    • Links in banner
    • hover 改變前景色和背景色
    • Practice 4. 表格或列表樣式化（搭配HTML表格或列表）
    • CSS Gallery
    • CSS combinator and pseudo class
    • Circular potraits
    • 字型設定

results matching ""

    No results matching ""