CSS3：RESET、標準註釋、多屏幕尺寸兼容寫法。

一、style.css
RESET：默認樣式
GENERAL STYLING：經常使用樣式
STRUCTURE：主框架樣式
HEADER:頭部樣式
MAIN NAVIGATION：主內容和導航樣式
CONTENT：內容區域樣式
SIDEBAR：側邊欄樣式
FOOTER：通底樣式
CLEARFIX：清除浮動樣式

/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
    margin: 0;
    padding: 0;
}

img, fieldset {
    border: 0;
}

/* set image max width to 100% */
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}
/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {
    background: #0d1424 url(images/body-bg.jpg) no-repeat center top;
    font: .81em/150% Arial, Helvetica, sans-serif;
    color: #666;
}
a {
    color: #026acb;
    text-decoration: none;
    outline: none;
}
a:hover {
    text-decoration: underline;
}
p {
    margin: 0 0 1.2em;
    padding: 0;
}

/* list */
ul, ol {
    margin: 1em 0 1.4em 24px;
    padding: 0;
    line-height: 140%;
}
li {
    margin: 0 0 .5em 0;
    padding: 0;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.4em;
    margin: 20px 0 .4em;
    color: #000;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.6em;
}
h3 {
    font-size: 1.4em;
}
h4 {
    font-size: 1.2em;
}
h5 {
    font-size: 1.1em;
}
h6 {
    font-size: 1em;
}

/* reset webkit search input styles */
input[type=search] {
    -webkit-appearance: none;
    outline: none;
}
input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
    width: 980px;
    margin: 0 auto;
}

/************************************************************************************
HEADER
*************************************************************************************/

/************************************************************************************
MAIN NAVIGATION
*************************************************************************************/

/************************************************************************************
CONTENT
*************************************************************************************/

/************************************************************************************
SIDEBAR
*************************************************************************************/

/************************************************************************************
FOOTER
*************************************************************************************/

/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }

二、CSS3多屏幕尺寸兼容
@media screen and (max-width:480px){}：表示可視區域最大寬不超過480px執行。
適合多尺寸及屏幕旋轉後的不一樣狀態下的展示效果。

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {

}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

}

/************************************************************************************
smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {

}