导航 , 少量数据表格 居中 居中
<
<html xmlns = http: //www.w3.org/1999/xhtml>
<Evista>
<title> ul 和 li 应用 </title>
<estilo type = text/css>
#menu {ancho: 1000px; altura: 35px; float: derecha; margen: 0px; claro: ambos; alineado vertical: fondo;}
#ul li {list-style-type: none; claro: ambos; ancho: 100px; pantalla: en línea; tamaño de fuente: más grande;}
#myul li {float: izquierda; ancho: 100px;}
</style>
</ablo>
<Body>
<div ID = menú>
<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/ropa.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> Hola </li>
<li> Hola </li>
<li> Hola </li>
<li> Hola </li>
</ul>
</div>
<div>
<ul>
<li style = list-style-type: none;> 去掉圆点 </li>
<li style = display: inline;> hola </li>
<li> Hola </li>
<li style = display: inline;> hola </li>
</ul>
</div>
<!-横向的方法, 如果要居中 , 需要设置宽度才可以 这个宽度要和里面的 这个宽度要和里面的 li 总长度一样。-->
<div style = text-align: centro; fondo: #def>
<ul style = ancho: 150px; fondo: #eee;>
<li style = float: izquierda;> hola </li>
<li style = float: izquierda;> hola </li>
<li style = float: izquierda;> hola </li>
<li style = float: izquierda;> hola </li>
<li style = float: izquierda;> hola </li>
</ul>
</div>
<!-制作表格的原理 , ul 宽度为 300px, li 宽度为 100px , 则成三列->
<div style = text-align: centro; fondo: #eef>
<ul id = myul style = ancho: 300px; fondo: #eee>
<li> Hola </li>
<li> Hola </li>
<li> Hola </li>
<li> Hola </li>
<li> Hola </li>
<li> Hola </li>
<li> Hola </li>
<li> Hola </li>
<li> Hola </li>
</ul>
</div>
</body>
</html>