HTML5幾個設計和修改的頁面範例分享_html5教學技巧

1. @charset "utf-8";   
2. /* CSS Document */   
3. 身體{   
4.   /*font-family 要使用安全字體，依照先特殊後一般的原則，   
5.   先給你想要的字體，然後是保險一些的字體，   
6.   最後以 sans-serif 字體結尾*/   
7.   font-family: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif;   
8.   max-width: 800px; /*最大寬度不超過 800 像素*/   
9. }   
10. /*頁上方的標題區樣式*/   
11. .Header {   
12.   background-color: #7695FE; /*接受任何顏色值*/   
13.   border: thin #336699 solid; /*多合一的 border 屬性*/   
14.   padding: 10px; /* 10像素的內邊距，邊框與內容物之間的距離*/   
15.   margin: 10px; /* 10像素的外邊距，邊框與周圍元素之間的距離*/   
16.   text-align: center; /*頭部文字居中*/   
17. }   
18. /*頁眉中標題h1>樣式*/   >
19. 樣式*/   
.Header h1{   
  margin: 0px;   
  color: white;   
  font-size: xx-large; /*精確控制可用像素或em單位*/   
}   
/*頁眉中子標題樣式*/   
.Header .Teaser{   
  margin: 0px;   
  font-weight: bold;   
}   
/*頁眉中署名行樣式*/   
.Header .Byline{   
  font-style: italic;   
  font-size: small;   
  margin: 0px;   
}   
.Content{   
  font-size: medium;   
  font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif;   
  /*左右內邊距最大*/   
  padding-top: 20px;   
  padding-right: 50px;   
  padding-bottom: 5px;   
  padding-left: 50px;   
  line-height: 120%; /*相鄰兩個文字行之間的距離*/   
}   
.Content .LeadIn{   
  font-weight: bold;   
  font-size: large;   
  font-variant: small-caps;   
}   
.Content .h2{   
  color: #24486C;   
  margin-bottom: 2px;   
  font-size: medium;   
}   
.Content p{   
  margin-top: 0px;   
57. }  
58. .Footer{   
59.   text-align: center;   
60.   font-size: x-small;   
61. }   
62. .Footer .Disclaimer{   
63.   font-style: italic;   
64. }   
65. .Footer p{   
66.   margin: 3px;   
67. }  

要透過 HTML5 改進這種情況，可以把