CSS 的基礎動畫,參考W3C的介紹
有很多屬性可以玩蠻有趣的
1 | 2 |
3 |
1 | 2 |
3 |
<style> #wsxrtgvbuikm14010082 .t1{ color:#1A6811; font-family: "微軟正黑體"; font-size:24px; padding: 0 10px; } #wsxrtgvbuikm14010082 .t2{ color:#1F1C97; font-family: "微軟正黑體"; font-size:16px; padding: 0 10px; margin-top:8px; margin-bottom:8px; } #wsxrtgvbuikm14010082 .t3{ color:#000; font-family: "微軟正黑體"; font-size:16px; padding: 0 5px; } #wsxrtgvbuikm14010082 .table-1 { width:300px; margin-left:10px; } #wsxrtgvbuikm14010082 .table-1 td{ border:1px solid #0088dd; padding:15px; empty-cells:hide; } #wsxrtgvbuikm14010082 .table-2 { width:300px; border-collapse:collapse; margin-left:10px; } #wsxrtgvbuikm14010082 .table-2 td{ border:1px solid #0088dd; padding:15px; empty-cells:hide; } </style> <div id="wsxrtgvbuikm14010082"> <div class="t1">empty-cells</div> <div class="t2">empty-cells:show -> 顯示空白表格</div> <div class="t2">empty-cells:hide -> 不顯示空白表格 - 預設</div> <div class="t2">empty-cells:inherit -> 繼承父屬性</div> <div> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table-1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td></td> </tr> </table> </div> <div class="t1" style="margin-top:30px;">border-collapse</div> <div class="t2">border-collapse:collapse -> 框限線會合併</div> <div class="t2">border-collapse:separate -> 框線分開</div> <div> <table width="100%" border="1" cellspacing="0" cellpadding="0" class="table-2"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td></td> </tr> </table> </div>
// CSS .demo{ width:300px; margin:0px; padding-left:30px; list-style-position:inside; } .demo li{ margin-top:10px; list-style:circle; } ul.demo2{ /* 一定要用ul的樣子 */ width:300px; list-style-position:outside; margin:0px; padding-left:30px; padding-top:30px; } .demo2 li{ margin-top:10px; list-style:circle; } // HTML <div class="demo"> <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li> <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li> <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li> </div> <ul class="demo2"> <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li> <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li> <li>SELECT TOP 20 text FROM sys.dm_exec_query_stats as qs CROSS APPLY sys.dm_exec_sql_text(qs.sql_handle) as st ORDER BY qs.creation_time DESC</li> </ul>
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }來源:http://meyerweb.com/eric/tools/css/reset/
color: #ed3729; font-size: 15px; font-weight: bold; font-family:Century Gothic, Arial, Helvetica, sans-serif,新細明體;
font-family: "微軟正黑體"; font-family:Arial, Helvetica, sans-serif,新細明體;
word-break:break-all; height:36px; overflow:hidden;
i { font-style: normal; } b { font-weight:normal; }
box-shadow:2px 2px 5px #999; // 陰影 border-radius:3px; // 圓角
height:36px; line-height:36px;
position:relative; top:9px;
a { display:block;}
dl{ margin:0px; padding:0px; } dt{ margin:0px; padding:0px; } dd{ margin:0px; padding:0px; }
h1,h2,h3 { padding:0px; margin:0px; font-weight:normal; }