如题所述
å段æ¶é´å¨ç½ä¸çå°äºä¸ä¸ªèå¤åçä¸ä¸ªHTML5ååºå¼è¡¨æ ¼ææï¼å®çCSS代ç ç¨SASSåçï¼æ许å¤éå¤çdataå±æ§ãæ们è¿éæ¹è¿ä¸ä¸ä»ç代ç ï¼è§£å³ä¸ä¸ä»åçä¸å¥½çå°æ¹ãè¦çå°æ¬ä¾çååºå¼è¡¨æ ¼ææï¼æµè§å¨è¦ç¼©æ¾å°å°äº600åç´ ç大å°ãHTMLç»æå¦ä¸ï¼
ãã<tableid="miyazaki">
ãã<caption>The Films of Miyazaki</caption>
ãã<thead>
ãã<tr><th>Film<th>Year<th>Honor
ãã<tbody>
ãã<tr>
ãã<tddata-th="Film">My Neighbor Totoro
ãã<tddata-th="Year">1988
ãã<tddata-th="Honor">Blue Ribbon Award (Special)
ãã<tr>
ãã<tddata-th="Film">Princess Mononoke
ãã<tddata-th="Year">1997
ãã<tddata-th="Honor">Nebula Award (Best Script)
ãã<tr>
ãã<tddata-th="Film">Spirited Away
ãã<tddata-th="Year">2001
ãã<tddata-th="Honor">Academy Award (Best Animated Feature)
ãã<tr>
ãã<tddata-th="Film">Howlâs Moving Castle
ãã<tddata-th="Year">2004
ãã<tddata-th="Honor">Hollywood Film Festival (Animation OTY)
ãã</table>
ãã注æ代ç ä¸çdataå±æ§ï¼æ¯ä¸ä¸ªåå æ ¼çdataå±æ§é½ä¸è¡¨æ ¼çheaderç¸å¯¹åºã
ããCSSæ ·å¼
ããè¡¨æ ¼åºæ¬çCSSæ ·å¼å¦ä¸ï¼
ããtable#miyazakicaption{
ããfont-size:2rem;color:#444;
ããmargin:1rem;
ããbackground-image:url(miyazaki.png),url(miyazaki2.png);
ããbackground-size: contain;
ããbackground-repeat:no-repeat;
ããbackground-position:centerleft,centerright;
ãã}
ããtable#miyazaki {
ããborder-collapse:collapse;
ããfont-family: Agenda-Light;font-weight:100;
ããbackground:#333;color:#fff;
ããtext-rendering:optimizeLegibility;
ããborder-radius:5px;
ãã}
ããtable#miyazaki thead th {font-weight:600; }
ããtable#miyazaki thead th, table#miyazaki tbody td {
ããpadding: .8rem;font-size:1.4rem;
ãã}
ããtable#miyazaki tbody td {
ããpadding: .8rem;font-size:1.4rem;
ããcolor:#444;background:#eee;
ãã}
ããtable#miyazaki tbody tr:not(:last-child) {
ããborder-top:1pxsolid#ddd;
ããborder-bottom:1pxsolid#ddd;
ãã}
ããä¸é¢æ¯ååºå¼è¡¨æ ¼çCSS代ç ï¼
ãã@mediascreenand (max-width:600px) {
ããtable#miyazakicaption{background-image:none; }
ããtable#miyazaki thead {display:none; }
ããtable#miyazaki tbody td {display:block;padding: .6rem; }
ããtable#miyazaki tbody tr td:first-child {background:#333;color:#fff; }
ããtable#miyazaki tbody td:before {
ããcontent:attr(data-th);font-weight:bold;
ããdisplay:inline-block;width:6rem;
ãã}
ãã}
ããmedia query代ç ä¸éèè¡¨æ ¼ç头é¨åå ï¼å¹¶ä¸å°æ¯ä¸ä¸ªåå æ ¼çdata-thä½ä¸ºæ ç¾æ¾ç¤ºå¨åå æ ¼å 容çåé¢ãæ¯ä¸è¡ç第ä¸ä¸ªåå æ ¼é½è®¾ç½®äºç¹å«çèæ¯è²ååæ¯è²ï¼ä½¿ä¹æ´ä¸ºæ¸ æ°ã
ãã<tableid="miyazaki">
ãã<caption>The Films of Miyazaki</caption>
ãã<thead>
ãã<tr><th>Film<th>Year<th>Honor
ãã<tbody>
ãã<tr>
ãã<tddata-th="Film">My Neighbor Totoro
ãã<tddata-th="Year">1988
ãã<tddata-th="Honor">Blue Ribbon Award (Special)
ãã<tr>
ãã<tddata-th="Film">Princess Mononoke
ãã<tddata-th="Year">1997
ãã<tddata-th="Honor">Nebula Award (Best Script)
ãã<tr>
ãã<tddata-th="Film">Spirited Away
ãã<tddata-th="Year">2001
ãã<tddata-th="Honor">Academy Award (Best Animated Feature)
ãã<tr>
ãã<tddata-th="Film">Howlâs Moving Castle
ãã<tddata-th="Year">2004
ãã<tddata-th="Honor">Hollywood Film Festival (Animation OTY)
ãã</table>
ãã注æ代ç ä¸çdataå±æ§ï¼æ¯ä¸ä¸ªåå æ ¼çdataå±æ§é½ä¸è¡¨æ ¼çheaderç¸å¯¹åºã
ããCSSæ ·å¼
ããè¡¨æ ¼åºæ¬çCSSæ ·å¼å¦ä¸ï¼
ããtable#miyazakicaption{
ããfont-size:2rem;color:#444;
ããmargin:1rem;
ããbackground-image:url(miyazaki.png),url(miyazaki2.png);
ããbackground-size: contain;
ããbackground-repeat:no-repeat;
ããbackground-position:centerleft,centerright;
ãã}
ããtable#miyazaki {
ããborder-collapse:collapse;
ããfont-family: Agenda-Light;font-weight:100;
ããbackground:#333;color:#fff;
ããtext-rendering:optimizeLegibility;
ããborder-radius:5px;
ãã}
ããtable#miyazaki thead th {font-weight:600; }
ããtable#miyazaki thead th, table#miyazaki tbody td {
ããpadding: .8rem;font-size:1.4rem;
ãã}
ããtable#miyazaki tbody td {
ããpadding: .8rem;font-size:1.4rem;
ããcolor:#444;background:#eee;
ãã}
ããtable#miyazaki tbody tr:not(:last-child) {
ããborder-top:1pxsolid#ddd;
ããborder-bottom:1pxsolid#ddd;
ãã}
ããä¸é¢æ¯ååºå¼è¡¨æ ¼çCSS代ç ï¼
ãã@mediascreenand (max-width:600px) {
ããtable#miyazakicaption{background-image:none; }
ããtable#miyazaki thead {display:none; }
ããtable#miyazaki tbody td {display:block;padding: .6rem; }
ããtable#miyazaki tbody tr td:first-child {background:#333;color:#fff; }
ããtable#miyazaki tbody td:before {
ããcontent:attr(data-th);font-weight:bold;
ããdisplay:inline-block;width:6rem;
ãã}
ãã}
ããmedia query代ç ä¸éèè¡¨æ ¼ç头é¨åå ï¼å¹¶ä¸å°æ¯ä¸ä¸ªåå æ ¼çdata-thä½ä¸ºæ ç¾æ¾ç¤ºå¨åå æ ¼å 容çåé¢ãæ¯ä¸è¡ç第ä¸ä¸ªåå æ ¼é½è®¾ç½®äºç¹å«çèæ¯è²ååæ¯è²ï¼ä½¿ä¹æ´ä¸ºæ¸ æ°ã
温馨提示:答案为网友推荐,仅供参考
第1个回答 2017-01-04
用bootstrap框架自带