ul、li列表简单实用代码实例
摘要：ul、li列表简单实用代码实例:利用ul和li可以实现列表效果，下面就是一个简单的演示。代码如下:蚂蚁部落 前端专区 js教程 css教程 jquery教程 资源专区 特效下载 移动下载 pc下载 ...
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>
以上代码实现了自定义间距和是否具有前面列表符号的。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢