HTML ul li 項目標籤

HTML <ul> <ol> <li> <dl> <dt> <dd> 項目標籤

HTML <ul> <li> 標籤用來定義一個無排序的項目清單列表。

<table border="1" style="font-size:22px;width:100%"><tbody><tr><td > <ul class="square"> <li><r2>ul { list-style-type: square }</r2></li> <li>免費 網頁設計方案 </li> <li>Blogger HTML 技巧 </li></ul></td><td><ul class="circle"> <li><r2>ul { list-style-type: circle }</r2></li> <li>馬上創建你的網站</li> <li>網頁設計方案 </li></ul></td></tr><tr><td><ul class="disc"> <li><r2>ul { list-style-type: disc }</r2></li> <li>網頁設計增值服務</li> <li>提供網頁設計服務</li></ul> </td><td> <ul class="upper-roman"> <li><r2>ul { list-style-type: upper-roman }</r2></li> <li>免費 網頁設計方案 </li> <li>Blogger HTML 技巧 </li></ul> </td></tr><tr><td> <ul class="lower-roman" > <li><r2>ul { list-style-type: lower-roman }</r2></li> <li>馬上創建你的網站</li> <li>網頁設計方案 </li></ul></td><td> <ul class="upper-alpha"> <li><r2>ul { list-style-type: upper-alpha }</r2></li> <li>網頁設計增值服務</li> <li>提供網頁設計服務</li></ul> </td></tr><tr><td><ul class="lower-alpha"> <li><r2>ul { list-style-type: lower-alpha }</r2></li> <li>Google</li> <li>Blogger</li></ul> </td><td><ul class="cjk-ideographic"> <li><r2>ul { list-style-type: cjk-ideographic }</r2></li> <li>Google</li> <li>Blogger</li></ul> </td></tr><tr><td><ul class="decimal"> <li><r2>ul { list-style-type: decimal }</r2></li> <li>Google</li> <li>Blogger</li></ul> </td><td><ul class="decimal-leading-zero"> <li><r2>ul { list-style-type: decimal-leading-zero }</r2></li> <li>Google</li> <li>Blogger</li></ul> </td></tr><tr><td><ul class="none"> <li><r2>ul { list-style-type: none }</r2></li> <li>Google</li> <li>Blogger</li></ul> </td></tr></tbody></table> <style>.square {list-style-type: square} .circle {list-style-type: circle } .disc {list-style-type: disc} .lower-roman {list-style-type: lower-roman;} .upper-roman {list-style-type: upper-roman;} .upper-alpha {list-style-type: upper-alpha;} .lower-alpha {list-style-type: lower-alpha;} .cjk-ideographic {list-style-type:cjk-ideographic;} .decimal {list-style-type:decimal;} .decimal-leading-zero{list-style-type:decimal-leading-zero;} .none{list-style-type:none;} r2 {color:red;font-weight:bold} <style>

00

<div style="color: red; font-size: 20px; font-weight: bold; line-height: 26px;">http://html.ug5g.com <br /><ul type="square"> <li>免費 網頁設計方案 </li> <li>Blogger HTML 技巧 </li> <ul type="circle"> <li>馬上創建你的網站</li> <li>網頁設計方案 </li> <ul type="disc"> <li>網頁設計增值服務</li> <li>提供網頁設計服務</li> </ul> </ul></ul></div>

00

<div style="color: red; font-size: 20px; font-weight: bold; ">http://html.ug5g.com <br /><dl><dt>項目標題一</dt><dd>這裡是項目敘述一 ...</dd><dt>項目標題二</dt><dd>這裡是項目敘述二 ...</dd></dl></div>

00

<div id="menu8"> <div id="menu8"> <div id="menu8"><ul><li><a>AAA</a></li><li><a>BBB</a><ul><li><a>BBB1A</a><ul><li><a>BBB1A</a><li><a>BBB1A</a><li><a>BBB1A</a></ul></li><li><a>BBB2A</a><ul><li><a>BBB2A</a><li><a>BBB2A</a><li><a>BBB2A</a><li><a>BBB2A</a><li><a>BBB2A</a></ul></li><li><a>BBB3A</a><ul><li><a>BBB3A</a><li><a>BBB3A</a><li><a>BBB3A</a><li><a>BBB3A</a><li><a>BBB2A</a></ul></li></ul></li><li><a>CCC</a><ul><li><a>CCC</a></li><li><a>CCC</a></li><li><a>CCC</a></li><li><a>CCC</a></li></ul></li><li><a>DDD</a><ul><li><a>DDD</a></li><li><a>DDD</a></li></ul></li></ul></ul></div> <br>123456789123456789<br>123456789123456789123456789123456789123456789123456789<br><br>123456789123456789<br>123456789123456789123456789123456789123456789123456789<br> <style type="text/css">#menu8 { width:600px; /* 選單大小 */ height:30px; } #menu8 ul { list-style-type:none; /* 取消ul樣式符號 */ margin:0; /* 重設ul邊界與留白為零 */ padding:0; overflow: hidden; } /* overflow才會自動調整大小 */ * html #menu8 ul { height:30px; } /* 解決IE6不理overflow問題 */ #menu8 ul li { float:left; } /* 利用float讓第一層li水平排列 */ * html #menu8 ul li { display:inline; } /* 解決IE6條列式餘白問題*/ #menu8 ul li a { display:block; /* 將a改為區塊元件以便指定寬高 */ float:left; /* 要設float，否則IE6會以100%寬度顯示 */ height:30px; width:100px; text-align: center; } #menu8 ul li ul { position:absolute; /* 第二層ul定位 */ width:200px; /* 固定寬度 */ overflow:visible; /* 避免出現捲軸 */ clear:left; /* 讓ul與母階層li相同位置 */ margin-top: 30px; margin-right: 0; margin-bottom: 0; margin-left: 0; } *:first-child+html #menu8 ul li ul { margin-top:0; } /* 修正IE7絕對定位差異 */ * html #menu8 ul li ul { margin-top:0; } /* 修正IE6絕對定位差異 */ #menu8 ul li ul li { float:none; /* 覆寫繼承自第一層的浮動設定 */ text-align: center; } #menu8 ul li ul li a { float:none; /* 覆寫繼承自第一層的浮動設定 */ width: 100%; } #menu8 ul li ul li ul { margin-top: -30px; margin-right: 0; margin-bottom: 0; margin-left: 200px; width: 100%; } *:first-child+html #menu8 ul li ul li ul { margin-top:-30px; } /* 修正IE7絕對定位差異 */ #menu8 ul li ul li ul li { /* width、float繼承第二層，免設定 */ } #menu8 ul li ul li ul li a { /* width、float繼承第二層，免設定 */ } /* ---------- 隱藏與顯示階層 ---------- */ #menu8 ul li ul { /* 預先隱藏第二層 */ visibility:hidden; } #menu8 ul li:hover ul { /* 觸動第一層時，顯示第二層 */ visibility:visible; } #menu8 ul li:hover ul li ul { /* 顯示第二層時，隱藏第三層，避免同時彈出 */ visibility:hidden; } #menu8 ul li ul li:hover ul { /* 觸動第二層時，顯示第三層 */ visibility:visible; } #menu8 ul li ul li:hover ul li ul { /* 顯示第三層時，隱藏第四層，避免同時彈出 */ visibility:hidden; } #menu8 ul li ul li ul li:hover ul { /* 觸動第三層時，顯示第四層 */ visibility:visible; } /* ---------- 以下為美化用，非必需 ---------- */ /* 預設字體 */ #menu8 { font-size:16px; font-family:Arial, Helvetica, sans-serif; } /* 第一層ul背景色彩與邊框 */ #menu8 ul { background:#0099CC; border-style: inset; } /* 第一層a字型 */ #menu8 ul li a { color:#FFF; text-decoration:none; line-height: 30px; } /*第二層ul背景色彩與邊框 */ #menu8 ul li ul { background:#0099CC; border-style: inset; } /* 第二層a字型 */ #menu8 ul li ul li a { font-size:16px; color:#333333; text-decoration:none; } /* 觸動第一層li時，改變背景色 */ #menu8 ul li:hover, #menu8 ul li a:hover { background:#00FFFF; } #menu8 ul li:hover a { color:#333333; } /* 觸動第二層以上li時改變背景色 */ #menu8 ul li ul li:hover, #menu8 ul li ul li a:hover { background:#00FFFF; } </style>

00

#HTML ul li 項目標籤