Simple Website Layout Tutorial Using HTML 5 and CSS 3 Ref: layout-tutorial-html-5-css-3/

HTML 5 Tutorial Sample

HTML Structure Your Page title 事前準備：建立一個網頁資料夾 Tools: Notepad++ Steps: 1. 開新檔案 2. 另存新檔 (*.html) 3. Key in html code 4. 執行 – in Firefox(or other browser)

Defining Header Tag HTML 5 Tutorial Sample

Defining Navigation Area Home About Us Feedback Contact

Defining Sidebar Home About Us Feedback Contact

Defining the Footer Anything you want to put in footer goes here.

CSS box model.box { width: 300px; height: 200px; padding: 10px; border: 1px solid #000; margin: 15px; }

style.css * { margin:0; padding:0; } Tools: Notepad++ Steps: 1. 開新檔案 2. 另存新檔 (*.css) 3. Key in css style 4. 執行 – in Firefox(or other browser)

CSS for body { margin:0 auto; width:960px; font-family:Arial, Helvetica, sans-serif; background: url( top left no-repeat; } 這裡可以改圖檔的網址哦 !

CSS for … a { color:#000000; text-shadow:1px 1px 1px #cccccc; } p { text-align: justify; } header, footer, aside, section { display:block; // 以區塊呈現 } h1{ font-size:26px; line-height:40px; padding:18px 0; } left ：向左靠。此為預設值。 right ：向右靠。 center ：排在中央。 justify ：兩邊對齊。會自動在文字之間加入空白，使兩邊的 字都對齊邊界。 left ：向左靠。此為預設值。 right ：向右靠。 center ：排在中央。 justify ：兩邊對齊。會自動在文字之間加入空白，使兩邊的 字都對齊邊界。

Stylizing the Navigation with CSS3 for Rounded Corners nav { width:77%; height:40px; -moz-border-radius:10px; // for Mozilla Firefox -webkit-border-radius:10px; // for Apple Safari border-radius:10px; //for opera background:#f3f3f3;:#f3f3f3 border:1px solid #cccccc; position:absolute; }

Stylizing the Navigation with CSS3 for Rounded Corners nav ul { list-style-imagelist-style-image:none; list-style-position:outside; list-style-type:none; margin:0 auto; width:940px; }

Stylizing the Navigation with CSS3 for Rounded Corners nav ul li { float:left; } nav ul li a { margin-right:20px; display:block; line-height:40px; }

CSS for aside { display: table-celldisplay: table-cell; width:300px; background:#f3f3f3; }

Stylizing the Footer footer { background:#666666; border-top:1px solid #cccccc; padding:10px; -moz-border-radius-topleft:5px; // for Mozella Firefox -moz-border-radius-topright:5px; // for Mozella Firefox border-radius:5px; // for Opera text-align:center; color:#ffffff; }

為網頁區加入區塊標籤 div Your Page title

為文章區加入區塊標籤 div Your Page title

設定 CSS for id = “content” 與 ”mcontent” #content { display:table; margin-top:40px; } #mcontent { display:table-cell; padding-right:22px; width:620px; }