CSS样式

body{
    background-color: #CCCCCC;
    font-family: Geneva,Arail,Helvetica,sans-serif;      /*用于规定元素的字体系列，font-family可以将名字作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说font-family属性的值用于某个元素的字体的一个优先表，浏览器会使用它可识别的第一个值。*/
    margin: 0px auto;
    max- 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;
     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;
     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;     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;}