項目標籤 行距 20px (CSS line-height: 20px)
項目標籤 1
  • 這裡是項目一
  • 這裡是項目一
    • 這裡是項目二
    • 這裡是項目二
      • 這裡是項目三
      • 這裡是項目三
<style type="text/css">
#項目標籤1 ul li {line-height: 20px;}
}
</style>


<div id="項目標籤1">
<b>項目標籤 1 </b>
<br />
<ul>
<li>這裡是項目一</li>
<li>這裡是項目一</li>
<ul>
<li>這裡是項目二</li>
<li>這裡是項目二</li>
<ul>
<li>這裡是項目三</li>
<li>這裡是項目三</li>
</ul>
</ul>
</ul>
</div>


項目標籤 行距 20px (CSS line-height: 20px)
項目標籤 1A
  • 這裡是項目一
  • 這裡是項目一
    • 這裡是項目二
    • 這裡是項目二
      • 這裡是項目三
      • 這裡是項目三
  • 這裡是項目一
  • 這裡是項目一
    • 這裡是項目二
    • 這裡是項目二
<style type="text/css">
#項目標籤1A ul li{line-height: 20px;}
}
</style>


<div id="項目標籤1A">
<b>項目標籤 1A </b>
<br />
<ul>
<li>這裡是項目一</li>
<li>這裡是項目一</li>
        <ul>
        <li>這裡是項目二</li>
        <li>這裡是項目二</li>
                <ul>
                <li>這裡是項目三</li>
                <li>這裡是項目三</li>
                </ul>
        </ul>
</ul>
<ul>
<li>這裡是項目一</li>
<li>這裡是項目一</li>
          <ul>
          <li>這裡是項目二</li>
          <li>這裡是項目二</li>
</ul>
</ul>
</div>


項目標籤 取消ul li 樣式符號 (CSS  list-style-type:none)
項目標籤 1B
  • 這裡是項目一
  • 這裡是項目一
    • 這裡是項目二
    • 這裡是項目二
      • 這裡是項目三
      • 這裡是項目三
<style type="text/css">
#項目標籤1B ul li{line-height: 20px;
                             list-style-type:none;}
</style>


<div id="項目標籤1B">
<b>項目標籤 1B </b>
<br />
<ul>
<li>這裡是項目一</li>
<li>這裡是項目一</li>
<ul>
<li>這裡是項目二</li>
<li>這裡是項目二</li>
<ul>
<li>這裡是項目三</li>
<li>這裡是項目三</li>
</ul>
</ul>
</ul>
</div>


項目標籤 樣式符號為數字 ul 改為 ol
項目標籤 1C
  1. 這裡是項目一
  2. 這裡是項目一
    1. 這裡是項目二
    2. 這裡是項目二
      1. 這裡是項目三
      2. 這裡是項目三
<style type="text/css">
#項目標籤1C ol li {line-height: 20px;}
}
</style>


<div id="項目標籤1C">
<b>項目標籤 1C </b>
<br />
<ol>
<li>這裡是項目一</li>
<li>這裡是項目一</li>
<ol>
<li>這裡是項目二</li>
<li>這裡是項目二</li>
<ol>
<li>這裡是項目三</li>
<li>這裡是項目三</li>
</ol>
</ol>
</ol>
</div>


項目標籤 行距 50px (CSS line-height: 50px)
項目標籤 2
  • 這裡是項目一
  • 這裡是項目一
    • 這裡是項目二
    • 這裡是項目二
      • 這裡是項目三
      • 這裡是項目三
<style type="text/css">
#項目標籤2 ul li{line-height: 50px;}
}
</style>


<div id="項目標籤2">
<b>項目標籤 1 </b>
<br />
<ul>
<li>這裡是項目一</li>
<li>這裡是項目一</li>
<ul>
<li>這裡是項目二</li>
<li>這裡是項目二</li>
<ul>
<li>這裡是項目三</li>
<li>這裡是項目三</li>
</ul>
</ul>
</ul>
</div>


項目標籤 第二項為藍色 第三項為紅色
項目標籤 3
  • 這裡是項目一
  • 這裡是項目一
    • 這裡是項目二
    • 這裡是項目二
      • 這裡是項目三
      • 這裡是項目三
<style type="text/css">
#項目標籤3 ul li {line-height: 20px;}
#項目標籤3 ul ul li{color:blue;}
#項目標籤3 ul ul ul li{color:Red;}

</style>


<div id="項目標籤3">
<b>項目標籤 1 </b>
<br />
<ul>
<li>這裡是項目一</li>
<li>這裡是項目一</li>
<ul>
<li>這裡是項目二</li>
<li>這裡是項目二</li>
<ul>
<li>這裡是項目三</li>
<li>這裡是項目三</li>
</ul>
</ul>
</ul>
</div>


項目標籤 行距 20px (CSS line-height: 20px)
項目標籤 4
  • 這裡是項目一
  • 這裡是項目一
    • 這裡是項目二
    • 這裡是項目二
      • 這裡是項目三
      • 這裡是項目三
<style type="text/css">
#項目標籤4 ul li {line-height: 20px;
                   display:inline; }
</style>


<div id="項目標籤4">
<b>項目標籤 4 </b>
<br />
<ul>
<li>這裡是項目一</li>
<li>這裡是項目一</li>
<ul>
<li>這裡是項目二</li>
<li>這裡是項目二</li>
<ul>
<li>這裡是項目三</li>
<li>這裡是項目三</li>
</ul>
</ul>
</ul>
</div>


項目標籤    第二項為藍色及橫向    第三項為紅色
項目標籤 5
  • 這裡是項目一
  • 這裡是項目一
    • 這裡是項目二
    • 這裡是項目二
      • 這裡是項目三
      • 這裡是項目三
<style type="text/css">
#項目標籤5 ul li  {line-height: 20px;}

#項目標籤5 ul ul li {color:blue;
                    display:inline;}

#項目標籤5 ul ul ul li {color:Red;
                       display:block;}
</style>


<div id="項目標籤3">
<b>項目標籤 1 </b>
<br />
<ul>
<li>這裡是項目一</li>
<li>這裡是項目一</li>
<ul>
<li>這裡是項目二</li>
<li>這裡是項目二</li>
<ul>
<li>這裡是項目三</li>
<li>這裡是項目三</li>
</ul>
</ul>
</ul>
</div>

arrow
arrow
    全站熱搜

    c8cc168 發表在 痞客邦 留言(0) 人氣()