如题所述
æ¥éª¤1 å建空ç½çHTML 5模ç
é¦å ï¼æ们å建ä¸ä¸ªç©ºç½ç模çï¼ä»£ç å¾ç®åï¼å¦ä¸æ示ï¼
å¤å¶ä»£ç
æ¥éª¤2 å¢å HTML 5æ°æ ç¾ HTML 5ä¸æ°å¢å äºä¸å°æ ç¾ï¼å¦ï¼
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
å¨é¡µé¢æ¨¡çä¸ï¼æ们éè¦ç¡®ä¿æ¯ä¸ªåºåé½è½æ£ç¡®å°å¯¹é½ï¼å æ¤éè¦ä½¿ç¨HEADERã NAVIGATIONã CONTENTã SIDEBARåFooterè¿äºæ ç¾ã代ç å¦ä¸æ示ï¼
å¤å¶ä»£ç
读è å¯è½çæå°è¿é使ç¨çdiv id=âwrapperâï¼è¿ä¸ªæ¯ç¨åç¨æ¥åmeida queryçæ¶åè°æ´å ¨å±CSSæ ·å¼è°æ´ç¨ç æ¥éª¤3 å¾HTML 5æ ç¾ä¸å¢å 代ç
1ï¼é¦å å¾æ é¢ä¸å¢å å¦ä¸ä»£ç ï¼
ãSimple HTML5 Template
å¤å¶ä»£ç
2ï¼å¾å¯¼èªæ ç¾ä¸æ·»å å¦ä¸ä»£ç ï¼è¿æ ·å¾æ¹ä¾¿å°æ件äºä¸ä¸ªç®åç页é¢å类导èªï¼
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
å¤å¶ä»£ç
3ï¼ä½¿ç¨æ ç¾æ¥æè¿°æ¯ä¸ä¸ªè¦å±ç¤ºçå 容å®ä½,æ¯å¦è¦å±ç¤ºçæ¯å¤ç¯æç« å表,å ¶ä¸çæ¯ä¸ç¯æç« çå ·ä½å 容就å¯ä»¥ä½¿ç¨æ ç¾äºãå¦ä¸ä»£ç æ示ï¼
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
å¤å¶ä»£ç
4ï¼æ·»å æ ç¾ HTML5æä¾çå ç´ æ ç¾ç¨æ¥è¡¨ç¤ºå½å页é¢ææç« çéå±ä¿¡æ¯é¨åï¼å¯ä»¥å å«ä¸å½å页é¢æ主è¦å 容ç¸å ³çå¼ç¨ã侧边æ ã广åãnavå ç´ ç»ï¼ä»¥åå ¶ä»ç±»ä¼¼çæå«ä¸ä¸»è¦å 容çé¨åã
æ ¹æ®ç®åçè§èï¼å ç´ æ两ç§ä½¿ç¨æ¹æ³ï¼
被å å«å¨ä¸ä½ä¸ºä¸»è¦å 容çéå±ä¿¡æ¯é¨åï¼å ¶ä¸çå 容å¯ä»¥æ¯ä¸å½åæç« æå ³çå¼ç¨ãè¯æ±å表çã
å¨ä¹å¤ä½¿ç¨ï¼ä½ä¸ºé¡µé¢æç«ç¹å ¨å±çéå±ä¿¡æ¯é¨åï¼æå ¸åçå½¢å¼æ¯ä¾§è¾¹æ (sidebar)ï¼å ¶ä¸çå 容å¯ä»¥æ¯åæ é¾æ¥ãéå±å¯¼èªæ广ååå çã
代ç å¦ä¸ï¼
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
å¤å¶ä»£ç
5ï¼å ä¸æåçæ ç¾ï¼ä»£ç 为ï¼
Copyright@ 2013 HTML5.com Privacy Policy - About Us
å¤å¶ä»£ç
æ¥éª¤4 å¢å CSSæ ·å¼
é¦å å建ä¸ä¸ªç©ºç½çæ ·å¼ï¼å¦ä¸ï¼
[/code] ç¶åå¨http://necolas.github.com/normalize.css/ä¸ä¸è½½è¿ä¸ªcss,ç¶åå°å ¶å 容å¤å¶å°è¯¥ç©ºç½çæ件ä¸ä»£ç å¦ä¸ï¼ [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
é¦å ï¼æ们å建ä¸ä¸ªç©ºç½ç模çï¼ä»£ç å¾ç®åï¼å¦ä¸æ示ï¼
å¤å¶ä»£ç
æ¥éª¤2 å¢å HTML 5æ°æ ç¾ HTML 5ä¸æ°å¢å äºä¸å°æ ç¾ï¼å¦ï¼
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
å¨é¡µé¢æ¨¡çä¸ï¼æ们éè¦ç¡®ä¿æ¯ä¸ªåºåé½è½æ£ç¡®å°å¯¹é½ï¼å æ¤éè¦ä½¿ç¨HEADERã NAVIGATIONã CONTENTã SIDEBARåFooterè¿äºæ ç¾ã代ç å¦ä¸æ示ï¼
å¤å¶ä»£ç
读è å¯è½çæå°è¿é使ç¨çdiv id=âwrapperâï¼è¿ä¸ªæ¯ç¨åç¨æ¥åmeida queryçæ¶åè°æ´å ¨å±CSSæ ·å¼è°æ´ç¨ç æ¥éª¤3 å¾HTML 5æ ç¾ä¸å¢å 代ç
1ï¼é¦å å¾æ é¢ä¸å¢å å¦ä¸ä»£ç ï¼
ãSimple HTML5 Template
å¤å¶ä»£ç
2ï¼å¾å¯¼èªæ ç¾ä¸æ·»å å¦ä¸ä»£ç ï¼è¿æ ·å¾æ¹ä¾¿å°æ件äºä¸ä¸ªç®åç页é¢å类导èªï¼
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
å¤å¶ä»£ç
3ï¼ä½¿ç¨æ ç¾æ¥æè¿°æ¯ä¸ä¸ªè¦å±ç¤ºçå 容å®ä½,æ¯å¦è¦å±ç¤ºçæ¯å¤ç¯æç« å表,å ¶ä¸çæ¯ä¸ç¯æç« çå ·ä½å 容就å¯ä»¥ä½¿ç¨æ ç¾äºãå¦ä¸ä»£ç æ示ï¼
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
å¤å¶ä»£ç
4ï¼æ·»å æ ç¾ HTML5æä¾çå ç´ æ ç¾ç¨æ¥è¡¨ç¤ºå½å页é¢ææç« çéå±ä¿¡æ¯é¨åï¼å¯ä»¥å å«ä¸å½å页é¢æ主è¦å 容ç¸å ³çå¼ç¨ã侧边æ ã广åãnavå ç´ ç»ï¼ä»¥åå ¶ä»ç±»ä¼¼çæå«ä¸ä¸»è¦å 容çé¨åã
æ ¹æ®ç®åçè§èï¼å ç´ æ两ç§ä½¿ç¨æ¹æ³ï¼
被å å«å¨ä¸ä½ä¸ºä¸»è¦å 容çéå±ä¿¡æ¯é¨åï¼å ¶ä¸çå 容å¯ä»¥æ¯ä¸å½åæç« æå ³çå¼ç¨ãè¯æ±å表çã
å¨ä¹å¤ä½¿ç¨ï¼ä½ä¸ºé¡µé¢æç«ç¹å ¨å±çéå±ä¿¡æ¯é¨åï¼æå ¸åçå½¢å¼æ¯ä¾§è¾¹æ (sidebar)ï¼å ¶ä¸çå 容å¯ä»¥æ¯åæ é¾æ¥ãéå±å¯¼èªæ广ååå çã
代ç å¦ä¸ï¼
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
å¤å¶ä»£ç
5ï¼å ä¸æåçæ ç¾ï¼ä»£ç 为ï¼
Copyright@ 2013 HTML5.com Privacy Policy - About Us
å¤å¶ä»£ç
æ¥éª¤4 å¢å CSSæ ·å¼
é¦å å建ä¸ä¸ªç©ºç½çæ ·å¼ï¼å¦ä¸ï¼
[/code] ç¶åå¨http://necolas.github.com/normalize.css/ä¸ä¸è½½è¿ä¸ªcss,ç¶åå°å ¶å 容å¤å¶å°è¯¥ç©ºç½çæ件ä¸ä»£ç å¦ä¸ï¼ [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
温馨提示:答案为网友推荐,仅供参考