导航，少量数据表格，居中
<!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>
<head>
<title>ul和li应用</title>
<style type=text/css>
#menu{width:1000px;height:35px;float:right;margin:0px; clear:both; vertical-align: bottom;}
#ul li{list-style-type:none; clear:both;width:100px;display:inline; font-size: larger;}
#myul li{float:left;width:100px;}
</style>
</head>
<body>
<div id=menu>
<ul id=ul>
<li><a title= href=http://localhost:1435/BookShop/index.aspx>首页 </a></li>
<li><a title= href=http://localhost:1435/BookShop/hybooks.aspx>行业图书 </a></li>
<li><a title= href=http://localhost:1435/BookShop/Clothing.aspx>服饰潮流 </a></li>
<li><a title= href=http://localhost:1435/BookShop/>美容会所 </a></li>
<li><a title= href=http://localhost:1435/BookShop/>妈咪宝贝 </a></li>
<li><a title= href=http://localhost:1435/BookShop/>礼品书籍 </a></li>
<li><a title= href=http://localhost:1435/BookShop/>新闻资讯 </a></li>
<li><a title= href=http://localhost:1435/BookShop/>用户留言 </a></li>
<li><a title= href=http://localhost:1435/BookShop/>联系我们 </a></li>
</ul>
</div>
<div>默认是竖排，并且带圆点
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
<div>
<ul>
<li style=list-style-type:none;>去掉圆点</li>
<li style=display:inline;>hello</li>
<li>hello</li>
<li style=display:inline;>hello</li>
</ul>
</div>
<!--横向的方法,如果要居中，需要设置宽度才可以，这个宽度要和里面的li总长度一样。-->
<div style=text-align:center;background:#def>
<ul style=width:150px;background:#eee;>
<li style=float:left;>hello</li>
<li style=float:left;>hello</li>
<li style=float:left;>hello</li>
<li style=float:left;>hello</li>
<li style=float:left;>hello</li>
</ul>
</div>
<!--制作表格的原理，ul宽度为300px,li宽度为100px，则成三列-->
<div style=text-align:center;background:#eef>
<ul id=myul style=width:300px;background:#eee>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</body>
</html>