导航 ， 少量数据表格 ， 居中
<! 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>
<adal>
<Title> UL 和 LI 应用 </TITME>
<style type = text / css>
#Menu {largeur: 1000px; hauteur: 35px; float: droit; marge: 0px; Clear: les deux; Adigne vertical: en bas;}
#ul li {list-style-type: Aucun; Clear: les deux; largeur: 100px; affichage: en ligne; taille de police: plus grand;}
#myul li {float: gauche; largeur: 100px;}
</ style>
</ head>
<body>
<div id = menu>
<ul id = ul>
<li> <a title = href = http: // localhost: 1435 / libshop / index.aspx> 首页 </a> </li>
<li> <a title = href = http: // localhost: 1435 / libshop / hybooks.aspx> 行业图书 </a> </li>
<li> <a title = href = http: // localhost: 1435 / libshop / vêtements.aspx> 服饰潮流 </a> </li>
<li> <a title = href = http: // localhost: 1435 / libshop /> 美容会所 </a> </li>
<li> <a title = href = http: // localhost: 1435 / libshop /> 妈咪宝贝 </a> </li>
<li> <a title = href = http: // localhost: 1435 / libshop /> 礼品书籍 </a> </li>
<li> <a title = href = http: // localhost: 1435 / libshop /> 新闻资讯 </a> </li>
<li> <a title = href = http: // localhost: 1435 / libshop /> 用户留言 </a> </li>
<li> <a title = href = http: // localhost: 1435 / libshop /> 联系我们 </a> </li>
</ul>
</div>
<div> 默认是竖排 ， 并且带圆点
<ul>
<li> Bonjour </li>
<li> Bonjour </li>
<li> Bonjour </li>
<li> Bonjour </li>
</ul>
</div>
<div>
<ul>
<li style = style list-style: Aucun;> 去掉圆点 </li>
<li style = affichage: en ligne;> Bonjour </li>
<li> Bonjour </li>
<li style = affichage: en ligne;> Bonjour </li>
</ul>
</div>
<! - 横向的方法, 如果要居中 ， 需要设置宽度才可以 ， 这个宽度要和里面的 li 总长度一样。-->
<div style = text-align: centre; fond: #def>
<ul style = largeur: 150px; arrière-plan: #eee;>
<li style = float: gauche;> Bonjour </li>
<li style = float: gauche;> Bonjour </li>
<li style = float: gauche;> Bonjour </li>
<li style = float: gauche;> Bonjour </li>
<li style = float: gauche;> Bonjour </li>
</ul>
</div>
<! - 制作表格的原理 ， ul 宽度为 300px, li 宽度为 100px ， 则成三列 ->
<div style = text-align: centre; fond: #EEF>
<ul id = myul style = largeur: 300px; fond: #eee>
<li> Bonjour </li>
<li> Bonjour </li>
<li> Bonjour </li>
<li> Bonjour </li>
<li> Bonjour </li>
<li> Bonjour </li>
<li> Bonjour </li>
<li> Bonjour </li>
<li> Bonjour </li>
</ul>
</div>
</docy>
</html>