繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > ul和li 基本用法分析
- HTML/XHTML教程
- 添加和删除HTML节点的简单示例
- HTML教程:收集的常用的HTML标签(6)
- 深层优化 提高网站的访问速度的一些技巧
- HTML教程:收集的常用的HTML标签(5)
- 总结XHTML代码常见的应用问题
- 网页制作中使用规范的HTML代码的几点
- 学习超级链接A标记
- 网页元素单位全分析
- HTML validate HTML验证
- ul和li 基本用法分析
- HTML 特殊字符彻底剖析
- HTML 行间距的设置方法与问题
- 按钮在IE中两边被拉伸的 BUG
- html 鼠标 css 控制
- html 网页跳转代码
- 当td为空时怎样显示其边框
- 使用相对宽度调整表格问题
- Web分页打印 细线表格+分页打印之终极攻略
- W3C教程(12):W3C Soap 活动
- W3C教程(11):W3C DOM 活动
HTML/XHTML教程 中的 ul和li 基本用法分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 65 ::
收藏到网摘: n/a
导航，少量数据表格，居中
<!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>
评论 (0) All
