导航、少量数据表格、居中
<！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;クリア：両方;垂直アライイン：ボトム;}
#ul li {list-style-type：none;クリア：両方; width：100px; display：inline;フォントサイズ：大きい;}
#myul li {float：left; width：100px;}
</style>
</head>
<body>
<div id = menu>
<ul id = ul>
<li> <タイトル= href = http：// localhost：1435/bookshop/index.aspx> </a> </li>
<li> <タイトル= href = http：// localhost：1435/bookshop/hybooks.aspx>行业图书</a> </li>
<li> <a title = href = http：// localhost：1435/bookshop/colood.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：inline;> hello </li>
<li>こんにちは</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>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
</ul>
</div>
</body>
</html>