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

Instructor: Jude Wang

1. HTML練習

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

使用時，請搭配:"Tab"鍵使用

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; }

3. 圖片-置左置右

http://lorempixel.com

HTML
<h1>New City</h1> <img alt="" style=";height:auto;;position:inherit !important;" indx="16414643" rank="34" irank="794635203" atitle="[講義] 網頁前端設計基本篇-Front-end Fundamental (no replies)" data-src="//lorempixel.com/g/300/200/city/" data-srcset="" class="rs-article-img-src do-lazy"> <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

6. 按鈕 (Buttons)

9. CSS3 Design Parts

1. 虛擬元素 / pseudo-elements