ul和li应用
来源：互联网 发布：axure的mac版怎么安装 编辑：程序博客网 时间：2024/04/28 16:25
<!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:800px;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="">首页1 </a></li><li><a title="" href="">首页2 </a></li>
<li><a title="" href="">首页3 </a></li>
<li><a title="" href="">首页4 </a></li>
<li><a title="" href="">首页5 </a></li>
<li><a title="" href="">首页6 </a></li>
<li><a title="" href="">首页7 </a></li>
<li><a title="" href="">首页8 </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:300px;background:#000;"><li style="list-style-type:none;float:left;width:60px;">hello1 hello1</li><li style="list-style-type:none;float:left;width:60px;">hello2 hello2</li><li style="list-style-type:none;float:left;width:100px;">hello3 hello3</li><li style="list-style-type:none;float:left;width:100px;">hello4 hello4</li><li style="list-style-type:none;float:left;width:60px;">hello5 hello5</li></ul></div></br></br></br></br></br></br><!--制作表格的原理，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>
