导航, 少量数据表格, 居中
<! doctype html public- // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http : //www.w3.org/1999/xhtml>
<헤드>
<title> ul 和 li 应用 </title>
<스타일 유형 = 텍스트/CSS>
#menu {너비 : 1000px; 높이 : 35px; float : 오른쪽; 마진 : 0px; Clear : 둘 다; 수직 정비 : 하단;}
#UL Li {List 스타일 유형 : 없음; Clear : 둘 다; 너비 : 100px; 디스플레이 : 인라인; 글꼴 크기 : 더 큰;}
#myul li {float : 왼쪽; 너비 : 100px;}
</스타일>
</head>
<body>
<div id = 메뉴>
<ul id = ul>
<li> <제목 = href = http : // localhost : 1435/bookshop/index.aspx> </a> </li>
<li> <a Title = href = http : // localhost : 1435/bookshop/hybooks.aspx> </a> </li>
<li> <제목 = href = http : // localhost : 1435/bookshop/clothing.aspx> </a> </li>
<li> <제목 = href = http : // localhost : 1435/bookshop/> </a> </li>
<li> <제목 = href = http : // localhost : 1435/bookshop/> </a> </li>
<li> <제목 = href = http : // localhost : 1435/bookshop/> </a> </li>
<li> <제목 = href = http : // localhost : 1435/bookshop/> </a> </li>
<li> <제목 = href = http : // localhost : 1435/bookshop/> </a> </li>
<li> <제목 = href = http : // localhost : 1435/bookshop/> </a> </li>
</ul>
</div>
<div> ，, 并且带圆点
<ul>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
</ul>
</div>
<div>
<ul>
<li style = List-Style-Type : none;> 去掉圆点 </li>
<li style = display : 인라인;> hello </li>
<li> 안녕하세요 </li>
<li style = display : 인라인;> hello </li>
</ul>
</div>
<!-如果要居中, 横向的方法, 需要设置宽度才可以, 这个宽度要和里面的 li 总长度一样。-->
<div style = 텍스트-정렬 : 중심; 배경 : #def>
<ul Style = 너비 : 150px; 배경 : #eee;>
<li style = float : 왼쪽;> 안녕하세요 </li>
<li style = float : 왼쪽;> 안녕하세요 </li>
<li style = float : 왼쪽;> 안녕하세요 </li>
<li style = float : 왼쪽;> 안녕하세요 </li>
<li style = float : 왼쪽;> 안녕하세요 </li>
</ul>
</div>
<!-，, ul 宽度为 300px, li 宽度为 100px, 则成三列->
<div style = 텍스트-정렬 : 중심; 배경 : #eef>
<ul id = myul style = 너비 : 300px; 배경 : #eee>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
<li> 안녕하세요 </li>
</ul>
</div>
</body>
</html>