ul、li列表简单实用代码实例

ul、li列表简单实用代码实例:

利用ul和li可以实现列表效果，下面就是一个简单的演示。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
</head>
<body>
<ul>
  <li>前端专区
    <ul>
      <li>js教程</li>
      <li>css教程</li>
      <li>jquery教程</li>
    </ul>
  </li>
  <li>资源专区
    <ul>
      <li>特效下载</li>
      <li>移动下载</li>
      <li>pc下载</li>
    </ul>
  </li>
  <li>交流专区
  <ul>
    <li>搜索优化</li>
    <li>seo专区</li>
    <li>站长交流</li>
  </ul>
  </li>
</ul>
</body>
</html>

上面代码实现了对于列表实用的简单演示，上面的比较原生，有时候我们希望自己设置子条目左间距和是否具有条目前面的原点等等，代码实例如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
*{
  margin:0px;
  padding:0px;
}
#box{margin:50px;}
#box>li>ul{
  margin-left:20px;
  list-style:none;
}
</style>
</head>
<body>
<ul id="box">
  <li>前端专区
    <ul>
      <li>js教程</li>
      <li>css教程</li>
      <li>jquery教程</li>
    </ul>
  </li>
  <li>资源专区
    <ul>
      <li>特效下载</li>
      <li>移动下载</li>
      <li>pc下载</li>
    </ul>
  </li>
  <li>交流专区
  <ul>
    <li>搜索优化</li>
    <li>seo专区</li>
    <li>站长交流</li>
  </ul>
  </li>
</ul>
</body>
</html>

以上代码实现了自定义间距和是否具有前面列表符号的。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0615/4383.html

最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13926

爱程序网

Tags：[db:关键字]