一、修改【ul】和【li】的行间距或间距的方法!
首先,用下面的方法,但发现太小了字体也显示一半了。
缩小行li的间距应改变行高line-height
li{line-height:20px;}
其次,用下面的方法还是比较管用!
ul,li{margin:0;padding;0}放在css的第一行。
二、去掉【ul】和【li】前面的点!
#center_b_left ul li {list-style:none;}
三、列表综合示例
<!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></title>
</head>
<body>
<b>HTML列表:</b><br />
<hr size="5" color="#FF0000;" />
<br />
<!--第一,无序列表(ul:unordered list)-->
<font size="+1" color="#00FF00" face="华文楷体">I.无序列表(Unordered List):</font><br />
1.默认:<br />
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
2.用type属性:<br />
<!--ul type属性的取值:
disc:实心圆、circle:空心圆、square:实心方块-->
<!--ol type属性的取值:
<ul type="I"/"a"/"A"/"1">
-->
<ul type="circle">
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
<ul type="square">
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
3.属性值的混合使用,起强调作用:<br />
<ul type="circle">
<li>香蕉</li>
<li type="disc">苹果</li>
<li>橘子</li>
</ul>
<!--第二,有序列表(ol,ordered list)-->
<font size="+1" color="#00FF00" face="华文楷体">II.有序列表(Ordered List):</font><br />
1.默认:<br />
<ol>
<li>篮球</li>
<li>排球</li>
<li>足球</li>
</ol>
2.使用type属性:<br />
<ol type="i">
<li>篮球</li>
<li>排球</li>
<li>足球</li>
</ol>
<ol type="A">
<li>篮球</li>
<li>排球</li>
<li>足球</li>
</ol>
3.改变有序列表项的前导编号:<br />
<blockquote>
a.<font color="#FF00FF">start</font>属性单独使用:<br />
<ol start="3">
<li>篮球</li>
<li>排球</li>
<li>足球</li>
</ol>
b.<font color="#FF00FF">vlaue</font>属性单独使用:<br />
<ol>
<li>篮球</li>
<li value="5">排球</li>
<li>足球</li>
</ol>
c.<font color="#FF00FF">start、value</font>属性的共同使用:<br />
<ol start="8">
<li>篮球</li>
<li value="15">排球</li>
<li>足球</li>
</ol>
</blockquote>
<font size="+1" color="#00FF00" face="花纹楷体">III.嵌套列表(Nested Lists):</font><br />
1.无序列表中嵌套无序列表:<br />
<ul>
<li>饮料</li>
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</li>
<li>蔬菜</li>
<li>茶叶</li>
</ul>
2.无序列表中嵌套有序列表:<br />
<ul>
<li>饮料</li>
<li>水果
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ol>
</li>
<li>蔬菜</li>
<li>茶叶</li>
</ul>
3.有序列表中嵌套有序列表:<br />
<ol>
<li>饮料</li>
<li>水果
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ol>
</li>
<li>蔬菜</li>
<li>茶叶</li>
</ol>
4..有序列表中嵌套无序列表:<br />
<ol>
<li>饮料</li>
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</li>
<li>蔬菜</li>
<li>茶叶</li>
</ol>
5.列表的多级嵌套:<br />
<ol>
<li>饮料</li>
<li>水果
<ul>
<li>香蕉</li>
<li>苹果
<ul>
<li>产自巴西</li>
<li>产自中国</li>
</ul>
</li>
<li>橘子</li>
</ul>
</li>
<li>蔬菜</li>
<li>茶叶</li>
</ol>
<!--第三,定义列表(dl,definition list)-->
<font size="+1" color="#00FF00">IV.定义列表:</font><br />
1.定义列表:<br />
<!--
<dl>
<dt>第一个标题项</dt>
<dd>对第一个标题项的解释性文字</dd>
<dt>第二个标题项</dt>
<dd>对第二个标题项的解释性文字</dd>
</dl>
其中:<dl>用来标识定义列表的开始;
<dt>用来标识定义列表的列表项;
<dd>用来标识定义列表中列表项的解释性文字。
-->
<dl>
<!--dt:definition term(定义术语)定义“北京”这个标题项-->
<dt>北京</dt>
<!--dd:definition definition(定义对术语的解释定义)对“北京”这个标题项的解释-->
<dd>
中国的政治中心</dd>
<dt>上海</dt>
<dd>
中国的经济中心</dd>
<dt>深圳</dt>
<dd>
中国改革开放的前沿城市</dd>
</dl>
</body>
</html>
分享到:
相关推荐
ul li表格.htm ul li表格.htm ul li表格.htm
ul li 样式
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...
怎么实现ul的横向排列和去掉li那个烦人的点,现在找到方法了,在此与大家分享下,感兴趣的朋友可以参考下,以备不时之需
jquery实现ul_li菜单展开收起效果.
首先我们需要一个html结构 <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> 我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,...
HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 方法/步骤 1无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表始于 <ul> 标签。每个列表项始于 <li>。
li浮动还可以居中ul.html
通过jquery 控制ul下li标签中的ul li列表,来实现ul的收缩和展开功能
ul li 换色 li 列表布局隔行,color from red tabs 背景颜色
UL+LI模拟selcet标签demo
CSS中的ul与li样式详解共5页.pdf.zip
DIV CSS布局教程:应用ul、li实现表格形式DIV CSS布局教程:应用ul、li实现表格形式DIV CSS布局教程:应用ul、li实现表格形式
NULL 博文链接:https://javaskyle.iteye.com/blog/693508
jquery+css实现的ul+li模仿下拉框表单美化效果源码.zip
使用ul li 标签实现的表格样式,可代替table标签,避免搜索引擎收录不了表格中的关键字
可以设置<li>的内容上下滚动,很好的东西哦
纯CSS UL LI下拉式菜单特效,鼠标悬停于一级菜单时,会向下显示出二级子菜单,代码中没有涉及JavaScript代码,完全CSS代码来实现这款下拉菜单,符合WEB2.0标准哦。
CSS中的ul与li样式详解.docx