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

时间: 2024-10-03 22:15:32

ul、li列表简单实用代码实例的相关文章

Java简单实用代码分享,这里一定有你想要的!

Java简单实用代码分享,这里一定有你想要的! 今天开始给大家分享一些简单实用的代码,之前的小项目文章因为篇幅有限,没办法一篇文章说清楚,便想着分享一些小代码.都是完整有效的,可直接取用. 电脑密码制作 #include <stdio.h> void InputPass(char pw[])//获取用户输入的密码 { char ch;//用户输入的密码字符 char* pold = pw;//保存密码数组的首地址,用于循环内的比较 while((ch=getch())!='\r')//ASCI

JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)

前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" name="wxChoi

jQuery实现的删除指定子元素代码实例

jQuery实现的删除指定子元素代码实例:可能在实际应中可能要删除元素的指定子元素,下面就通过简单的代码实例进行一下介绍.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落

javascript简单计算器代码分析

javascript简单计算器代码分析:也许网页中需要一个简单的计算器功能,这个时候就要掌握如何编写,起码应该会修改,下面就通过一个简单的实例介绍一下如何实现简单的计算器效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&

为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性

会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. 假如要布局出这样简单导航条效果 比如以下代码: 1.可以使用Ul li布局导航条 <ul> <li><a href="http://www.divcss5.com/">网站首页</a> <li><a href="

js日期格式简单转换代码

js日期格式简单转换代码: 未经修饰的东西总是狂野粗糙的,比如人没有经过良好的教育,这人可能会有各种问题,同样js中的时间格式也是如此,所以要对时间进行一定的格式化操作,下面是一段非常简单的代码实例和大家分享一下. 代码如下: function dateStr(x,y) { var z={ y:x.getFullYear(), M:x.getMonth()+1, d:x.getDate(), h:x.getHours(), m:x.getMinutes(), s:x.getSeconds() }

JavaScript 日期格式化 简单实用

JavaScript 日期格式化 简单实用 代码如下,引入jquery后直接后加入以下代码刷新可测试 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.

ajax请求且带返回值的代码实例

ajax请求且带返回值的代码实例: 现在比较流行使用jquery的ajax来实现一些无刷新请求效果,本章节提供一个非常简单的代码实例供大家参考之用,希望能够给需要的朋友带来一定的帮助,代码如下: <script type="text/javascript"> /* 请求Ajax 带返回值,并弹出提示框提醒 --------------------------------------------------*/ function getAjax(url,parm,callBa

清除ul li里面的浮动并让ul自适应高度的一个好办法

有时候会遇到ul li列表里面的东西会用到浮动,这个时候ul的高度就不会被撑开,这怎么办呢? 1)最笨的方法就是设置ul的高度,但这种方法很死板,高度不能自适应 2)有次我试着在ul里面加一个清除浮动的div,这样能实现效果,但这种做法是错误的,不符合规范,所以绝对不能这样写. <ul> <li></li> <div style="clear:both"></div> </ul> 坚决不能这样写哦! 3)最好的一个