[講義] 網頁前端設計基本篇-Front-end Fundamental

Instructor: Jude Wang

[hr]

1. HTML練習

[hr]
http://codepen.io/pen
http://www.sublimetext.com/3
http://www.w3schools.com/

[color=#993333]使用時，請搭配:"Tab"鍵使用[/color]

2. 標題

HTML
<h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6>
CSS
h6{ font-size:60px; color:red; }
[hr]

3. 圖片-置左置右

http://lorempixel.com

HTML
<h1>New City</h1> <img src="http://lorempixel.com/g/300/200/city/" alt="" /> <p>New Taipei City has vast territories, spanning 2052 square kilometers of 29 District. Within its borders is a wealth of difference, particularly when it comes to a sweeping expanse of mountains and cliffs that form the Taipei Basin walls making for natural resources and a rich array of vistas. The northern face of Taiwan's coastline in New Taipei City is 120 kilometers and it has gorgeous sea brinks and beachheads. In recent years, officials have exerted a great deal of effort to update and continuously clean our coasts so that all visitors can leap in the waves and admire the horizons.</p>
CSS
h1{ font-size:60px; } img{ margin:20px; float:right; }
Front-end Fundamental

4. HTML5

1. 文件型態設定(DOCTYPE)

2. 語意標示語言 (Semantic HTML)

5. 版面編排 / Layout

1. 區塊模型 / Box Model

6. CSS Reset

7. 網格系統 / Grid System

8. Style

1. HTML Tags

2. Navigator

3. 側欄 / Side Bar

4. Box-sizing

5. 下拉選單 (Drop-down Menu)

6. 按鈕 (Buttons)

9. CSS3 Design Parts

1. 虛擬元素 / pseudo-elements

(編輯記錄)