HTML5 - 網頁設計元素
HTML5 - 網頁設計元素
很多網頁除了頁中間的文章內容，往往包括下列幾個設計元素：| 導覽列 | 包含一組連結到網站內其他網頁的超連結，使用者只需透過導覽列，就可以往返網站的各個網頁。 HTML5 新增了 <nav> 元素，用來標示導覽列，而且給果有需要，一個網頁可以不只一個導覽列。<nav> 元素不是任何一組超連結都可以用，而是針對處理導覽列功能的超連結。 |
| 頁首 | 包含標題、標誌圖案、區塊目錄、搜尋表單等。 HTML5 以 <header> 元素用來標示網頁或區塊的頁首，裡面可以包含標題、標誌圖案、區塊目錄、搜尋表單等。 |
| 頁尾 | 包含網站擁有者資訊、建議瀏覽器解析度、瀏覽人數、版權聲明、服務內容等超連結。 HTML5 以 <footer> 元素用來標示網頁或區塊的頁尾，裡面可以包含網站擁有者資訊、建議瀏覽器解析度、瀏覽人數、版權聲明、服務內容等超連結。 |
| 側邊欄 | 包含摘要、廣告、贊助廠商的超連結、日期月曆可以從區塊內容抽離的其他內容。 HTML5 以 <aside> 元素用來標示側邊欄，裡面可以包含摘要、廣告、贊助廠商的超連結、日期月曆可以從區塊內容抽離的其他內容。 |
01. <html>
02. <head>
03. <meta charset ="utf-8">
04. <title>易經研讀</title>
05. <style>
06. header, footer {display:block;clear:both;text-align:center}
07. nav {display:block;float:left;width:20%;height:70%;background:yellow}
08. article{display:block;float:right;width:80%;height:70%;background:silver}
09. </style>
10. </head>
11. <body>
12. <header>
13. <h1>易經研讀</h1>
14. </header>
15. <nav>
16. <ul>
17. <li><a href="ch1.html">易經第一講</a></li>
18. <li><a href="ch2.html">易經第二講</a></li>
19. <li><a href="ch3.html">易經第三講</a></li>
20. </ul>
21. </nav>
22. <article>
23. <p>易經的精華就是六十四卦，也就是宇宙間六十四個大哲理。而我們的人生，
無論大小事項的哲理，都在六十四卦之中，都受六十四個哲理的指導</p>
24. </article>
25. <footer>
26. <p>danielsir實驗室版權所有 copyright 2020 </p>
27. </footer>
28. </body>
29. </html>
例子 結果：
註釋 ：
05 - 09
- 設定 <header>, <footer>, <nav>, <article>等元素的CSS 樣式。
12-14
- 標示網頁的頁首。
15-21
- 標示網頁的導覽列。
22-24
- 標示網頁的內容。
25-27
- 標示網頁的頁尾。
留言
張貼留言