导航 ， 少量数据表格 ， 居中
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<title> ul 和 li 应用 </title>
<نوع النمط = text/css>
#menu {width: 1000px ؛ الارتفاع: 35px ؛ عطف: يمين ؛ الهامش: 0px ؛ واضح: كلاهما ؛ المحاذاة العمودية: أسفل ؛}
#ul li {style-style-type: none ؛ واضح: كلاهما ؛ العرض: 100px ؛ العرض: مضمّن ؛ حجم الخط: أكبر ؛}
#myul li {float: اليسار ؛ العرض: 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>
<viv> 默认是竖排 ， 并且带圆点
<ul>
<li> مرحبا </li>
<li> مرحبا </li>
<li> مرحبا </li>
<li> مرحبا </li>
</ul>
</div>
<viv>
<ul>
<li style = type-style-type: none ؛> 去掉圆点 </li>
<li style = display: inline ؛> hello </li>
<li> مرحبا </li>
<li style = display: inline ؛> hello </li>
</ul>
</div>
<!-横向的方法 ، 如果要居中 ， 需要设置宽度才可以 ， 这个宽度要和里面的 li 总长度一样。-->
<style div = text-align: center ؛ background: #def>
<ul style = العرض: 150px ؛ الخلفية: #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 = العرض: 300px ؛ الخلفية: #EEE>
<li> مرحبا </li>
<li> مرحبا </li>
<li> مرحبا </li>
<li> مرحبا </li>
<li> مرحبا </li>
<li> مرحبا </li>
<li> مرحبا </li>
<li> مرحبا </li>
<li> مرحبا </li>
</ul>
</div>
</body>
</html>