分类属性实例

你的位置是:CSS教程->CSS实例篇

分类属性实例

1.display参数

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>display参数</TITLE><STYLE>.inline  {display:inline}.block   {display:block}TABLE    {display:table;width:300px;height:auto;background:yellow}COLGROUP {display:table-column-group;background:red;color:#BDA9CD}COL      {display:table-column;background:#66A333}CAPTION  {display:table-caption;background:#1663C4}THEAD    {display:table-thead-group;background:red}TBODY    {display:table-row-group;color:blue}TFOOT    {display:table-footer-group;background:93A79C}TR       {display:table-row;height:30px}TD       {display:table-cell;width:100px}</STYLE></HEAD><DIV class="inline">行内方块</DIV><EM>EM标记</EM><SPAN class="block">区域方块</SPAN><EM>EM标记</EM>  <TABLE>   <CAPTION>表格标题</CAPTION>   <COLGROUP>   <COL><COL><COL><COL>   </COLGROUP>  <THEAD>    <TR>       <TD>一</TD>       <TD>二</TD>       <TD>三</TD>       <TD>四</TD>     </TR>   </THEAD> <TBODY>   <TR>       <TD>五</TD>      <TD>六</TD>      <TD>七</TD>      <TD>八</TD>    </TR>    <TR>      <TD>九</TD>      <TD>十</TD>      <TD>　</TD>      <TD>　</TD>    </TR></TBODY><TFOOT>  <TR>      <TD></TD>      <TD></TD>      <TD></TD>     <TD></TD>   </TR></TFOOT> </TABLE>

2.list-style-type参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>list-style-type参数</TITLE><STYLE>LI {display:list-item}.disc {list-style-type:disc}.circle {list-style-type:circle}.square {list-style-type:square}.decimal {list-style-type:decimal}.decimal-leading-zero {list-style-type:decimal-leading-zero}.lower-roman {list-style-type:lower-roman}.upper-roman {list-style-type:upper-roman}.lower-greek {list-style-type:lower-greek}.lower-alpha {list-style-type:lower-alpha}.upper-alpha {list-style-type:upper-alpha}.hebrew {list-style-type:hebrew}.katakana {list-style-type:katakana}.cjk-ideographic {list-style-type:cjk-ideographic}.hiragana {list-style-type:hiragana}.hiragana-iroha {list-style-type:hiragana-iroha}.katakana-iroha {list-style-type:katakana-iroha}</STYLE></HEAD><UL><LI class="disc">disc</LI><LI class="circle">circle</LI><LI class="square">square</LI><LI class="decimal-leading-zero">decimal-leading-zero</LI><LI class="lower-roman">lower-roman</LI><LI class="upper-roman">upper-roman</LI><LI class="lower-greek">lower-greek</LI><LI class="lower-alpha">lower-alpha</LI><LI class="upper-alpha">upper-alpha</LI><LI class="hebrew">hebrew</LI><LI class="cjk-ideographic">cjk-ideographic</LI><LI class="hiragana">hiragana</LI><LI class="katakana">katakana</LI><LI class="hiragana-iroha">hiragana-iroha</LI><LI class="katakana-iroha">katakana-iroha</LI></UL>

3.list-style-position参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

4.list-style-image参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

5.list-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：