學習筆記本: 10月 2014

2014年10月8日星期三

【CSS】顯示表格空白(empty-cells)、框線合併(border-collapse)

empty-cells

empty-cells:show -> 顯示空白表格

empty-cells:hide -> 不顯示空白表格 - 預設

empty-cells:inherit -> 繼承父屬性

1	2
3

border-collapse

border-collapse:collapse -> 框限線會合併

border-collapse:separate -> 框線分開

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】list-style-position

項目符號的位置:list-style-position

list-style-position:outside -> 不縮排

list-style-position:inherit -> 如果有第二排會縮排預設值

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

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
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
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

  
// 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>

2014年10月8日 星期三

【CSS】顯示表格空白(empty-cells)、框線合併(border-collapse)

【CSS】list-style-position

2014年10月8日星期三