ul和li 基本用法分析
导读：收集整理的这篇文章主要介绍了ul和li 基本用法分析，觉得挺不错的，现在分享给大家，也给大家做个参考。 导航，少量数据表格，居中 <!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 Tr...
收集整理的这篇文章主要介绍了ul和li 基本用法分析，觉得挺不错的，现在分享给大家，也给大家做个参考。 导航，少量数据表格，居中 !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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： ul和li 基本用法分析
本文地址： https://pptw.com/jishu/587512.html