Simple Website Layout Tutorial Using HTML 5 and
Simple Website Layout Tutorial Using HTML 5 and CSS 3 Anny@TFG Ref: http: //www. designzzz. com/websitelayout-tutorial-html-5 -css-3/
HTML 5 Tutorial Sample
<!Doctype html> <html lang="en"> <head> <title> Your Page title </title> <link rel="stylesheet" type="text/css" href="style. css" /> </head> HTML Structure <body> <header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </body> </html> 事前準備：建立一個網頁資料夾 Tools: Notepad++ Steps: 1. 開新檔案 2. 另存新檔 (*. html) 3. Key in html code 4. 執行 – in Firefox(or other browser)
Defining Header Tag <header> <h 1>HTML 5 Tutorial Sample </h 1> </header>
Defining Navigation Area <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
Defining Sidebar <aside> <section> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Contact</a></li> </ul> </section> </aside>
Defining the Footer <footer> <section> Anything you want to put in footer goes here. </section> </footer>
CSS box model. box { width: 300 px; height: 200 px; padding: 10 px; border: 1 px solid #000; margin: 15 px; }
style. css <style type="text/css"> *{ margin: 0; padding: 0; } </style> Tools: Notepad++ Steps: 1. 開新檔案 2. 另存新檔 (*. css) 3. Key in css style 4. 執行 – in Firefox(or other browser)
CSS for <body> body { margin: 0 auto; width: 960 px; font-family: Arial, Helvetica, sans-serif; background: url(http: //bgimages. kontraband. com/media/images/bg_body. jpg) top left no-repeat; } 這裡可以改圖檔的網址哦!
CSS for <a> <p> <h 1> … a{ color: #000000; text-shadow: 1 px 1 px #cccccc; } p{ text-align: justify; } • left：向左靠。此為預設值。 • right：向右靠。 • center：排在中央。 • justify：兩邊對齊。會自動在文字之間加入空白，使兩邊的字都 對齊邊界。 header, footer, aside, section { display: block; //以區塊呈現 } h 1{ font-size: 26 px; line-height: 40 px; padding: 18 px 0; }
Stylizing the Navigation with CSS 3 for Rounded Corners nav { width: 77%; height: 40 px; -moz-border-radius: 10 px; // for Mozilla Firefox -webkit-border-radius: 10 px; // for Apple Safari border-radius: 10 px; //for opera background: #f 3 f 3 f 3; border: 1 px solid #cccccc; position: absolute; }
Stylizing the Navigation with CSS 3 for Rounded Corners nav ul { list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0 auto; width: 940 px; }
Stylizing the Navigation with CSS 3 for Rounded Corners nav ul li { float: left; } nav ul li a { margin-right: 20 px; display: block; line-height: 40 px; }
CSS for <aside> aside { display: table-cell; width: 300 px; background: #f 3 f 3 f 3; }
Stylizing the Footer footer { background: #666666; border-top: 1 px solid #cccccc; padding: 10 px; -moz-border-radius-topleft: 5 px; // for Mozella Firefox -moz-border-radius-topright: 5 px; // for Mozella Firefox border-radius: 5 px; // for Opera text-align: center; color: #ffffff; }
為網頁區加入區塊標籤 div <!Doctype html> <html lang="en"> <head> <title> Your Page title </title> <link rel="stylesheet" type="text/css" href="style. css" /> </head> <body> <header> </header> <nav> </nav> <div id = "content " > <section> </section> <aside> </div> </body> </html> <footer> </footer>
為文章區加入區塊標籤 div <!Doctype html> <html lang="en"> <head> <title> Your Page title </title> <link rel="stylesheet" type="text/css" href="style. css" /> </head> <body> <header> </header> <nav> </nav> <div id = content> <div id = "mcontent " > <section> </div> <aside> </div> </body> </html> <footer> </footer>
設定CSS for id = “content” 與”mcontent” #content { #mcontent { display: table; margin-top: 40 px; display: table-cell; padding-right: 22 px; width: 620 px; } }
- Slides: 19