CSS樣式

body{
    background-color: #CCCCCC;
 font-family: Geneva,Arail,Helvetica,sans-serif; /*用於規定元素的字體系列，font-family能夠將名字做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。也就是說font-family屬性的值用於某個元素的字體的一個優先表，瀏覽器會使用它可識別的第一個值。*/
 margin: 0px auto;
 max-width: 900px;
 border: solid;
 border-color: #FFFFFF;
}
header{
 background-color: #F47D31;
 display: block;
 color: #FFFFFF;
 text-align: center;
}
header h2{
 margin: 0px;
}
h1{
 font-size: 72px;
 margin: 0px;
}
h2{
 font-size: 24px;
 margin: 0px;
 text-align: center;
 color: #F47D31;
}
h3{
 font-size: 18px;
 margin: 0px;
 text-align: center;
 color: #F47D31;
}
h4{
 color: #F47D31;
 background-color: #fff;
 /*
 box-shadow：給元素塊設置陰影效果。
 transform:元素變形，支持屬性有：
 rotate（10deg）：水平旋轉10度
 skew(10deg)：傾斜10度
 scale(10.0)：放大10倍
 translate(120px,120px)：向右向上各移動120px

 瀏覽器前綴以下：
 Firefox: -moz-
 Chrome, Safari: -webkit-
 Opera: -o-
 IE: -ms
 */
 -webkit-box-shadow: 2px 2px 2px #888;
 -webkit-transform: rotate(-45deg);
 -moz-box-shadow: 2px 2px 2px #888;
 -moz-transform: rotate(-45deg);
 position: absolute;
 padding: 0px 150px;
 top: 50px;
 left: -120px;
 text-align: center;
}

/* nav：標籤訂義導航連接的部分，HTML5新標籤，IE8及如下版本不支持*/
nav{
 display: block;
 width: 25%;
 float: left;
}
/*
 注：各屬性順序不能顛倒
 a:link {color: #FF0000} 未訪問的連接
　　a:visited {color: #00FF00} 已訪問的連接
　　a:hover {color: #FF00FF} 當有鼠標懸停在連接上
　　a:active {color: #0000FF} 被選擇的連接

 text-decoration屬性：容許對文本設置某種效果，對應值有：
 none： 不設置效果，默認值。
 underline： 定義文本下的一條線。
 overline： 定義文本上的一條線。
 line-through： 定義穿過文本下的一條線。
 blink： 定義閃爍的文本，只有低版本的firefox支持。
 inherit： 規定應該從父元素繼承 text-decoration 屬性的值。
*/
nav a:link,nav a:visited{
 display: block;
 border-bottom: 2px solid #fff;
 padding: 10px;
 text-decoration: blink ;
 font-weight: bold;
 margin: 5px;
}
nav a:hover{
 color: white;
 background-color: #F47D31;
}
nav h3{
 margin: 15px;
 color: white;
}
#container{
 background-color: #888;
}
/* section標籤：定義文檔中的節（section、區段），HTML5新標籤。好比章節、頁眉、頁腳或文檔中的其餘部分。*/
section{
 display: block;
 width: 50%;
 float: left;
}
/*
 article標籤：標籤規定獨立的自包含內容，HTML5新標籤。用於論壇帖子、報紙文章、博客條目、用戶評論等。
 border-radius：給元素添加圓角邊框
*/
article{
 background-color: #eee;
 display: block;
 margin: 10px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 2px #888; -webkit-transform: rotate(-10deg); -moz-box-shadow: 2px 2px 2px #888; -moz-transform: rotate(-10deg);}article header{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;}article footer{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;}article h1{ font-size: 18px;}aside{ display: block; width: 25%; float: left;}aside h3{ margin: 15px; color:white;}aside p{ margin: 15px; color: white; font-weight: bold; font-style: italic;}footer{ clear: both; display: block; background-color: #F47D31; color: #FFFFFF; text-align: center; padding: 15px;}footer h2{ font-size: 14px; color: white;}a{ color: #F47D31;}a:hover{ text-decoration: underline;}