怎么去掉li、ul等前面的点及如何去掉空格的方法
2013-07-02 21:36来源:未知发布者:laiquliu
http://www./wangluo/201204wl4947.html
大部分DIV+CSS网站制作布局时经常会遇到LI点的情况，特别是对新手来说可能有点陌生，如何去掉
中的点呢，或者如何改变点成数字1234或者改成空心圆方块等呢，又如何改变点的颜色？其实很简单：直接定义LI的CSS为list-style-type :none即可去掉点，如
li{
list-style-type :none;
}
如果要改变点的颜色，那么li里的字也会变颜色与大小的了，但你可以使用图片来作为前面的点，这样就可以随心所欲地装饰了。
li{
list-style: url("pre.gif") outside circle;
}
LI点的其他用法CSS代码：
list-style-type :
disc 默认值。实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用项目符号
也可以在body样式里加上list-style:none;就Ok了。
值得注意的是，如果在CSS里面定义了BODY的样式，请注意在CSS里面定义。不要直接在代码里加入。
如果是要去掉单个UL，LI前面的点可以直接：
...
...
...
...
css对li标签前面圆点和空白的显示控制方式：
去掉标签前的点：#ul{list-style:none; }
要去掉空格，则添加 #ul{margin:0; padding:0; }
在ul中加入margin:0px; 空白处没了,不过圆点也没了。其实在ul中加margin:0px; 不是圆点没了,而是看不到了，可以用空白定义来控制设置显示，看如下演示：
HTML代码
- 志文工作室
- 计算机技术学习博客
- 志文工作室
- 计算机技术学习博客
- 志文工作室
- 计算机技术学习博客
- 志文工作室
- 计算机技术学习博客
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
HTML代码
- 志文工作室
- 计算机技术学习博客
- 志文工作室
- 计算机技术学习博客
- 志文工作室
- 计算机技术学习博客
- 志文工作室
- 计算机技术学习博客
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
使用margin控制：
HTML代码
- 志文工作室
- 计算机技术学习博客
- 志文工作室
- 计算机技术学习博客
- 志文工作室
- 计算机技术学习博客
- 志文工作室
- 计算机技术学习博客
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
不过值得注意的是，各浏览器对margin的解释不同，在IE下是这样的，在FF下可能完全是另一个样子。
所以如果真的需要显示这个圆点的话，可以用background来设置。
其他几点DIV+CSS设计参考建议：
div最好只用在大部区块
细部的地方尽量别用div
h1标题在一个页面最好只出现一次
次标题就用h2
段落标题用h3
以此类推
不是属於资料的图片尽量以背景插入的方式来呈现
如果真有心迈向标准
style="..."这个东西就尽量别用
img标签记得加上alt=""
外一篇拓展参考学习：
如何应用ul、li标签 创建css横向导航菜单？
我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成，或者由单元格内的文字所组成，由于人们不再推荐用表格来定位任何非表格的页面内容，所以很多制作Web的人正在寻找新的方法，用结构化的XHTML标记和CSS格式来创建导航条。这样的创建方式也更对搜索引擎蜘蛛友好，这对我们来说是非常重要的。
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。但这样有意义吗？
现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered list）来标识。再应用CSS样式对其进行控制，按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的，因为我们习惯于把无序列表作为一个竖着推起来的列表项目，每个前面都放着一个列表预设标记。这似乎不符合导航条水平方向的习惯。但作为独立列表项目集合的列表逻辑结构能够适用于导航条里的链接；而CSS的规则让你能够强制取代列表项目缺省的表现形式，以消除它们并安排列表项在容器内按水平方向排列，而不是从上而下的规则。现在让我们来看看实例，根据无序列表创建CSS样式和XHTML标签的横向导航菜单。
我们看看下面的xhtml代码：
复制内容到剪贴板程序代码 程序代码
HomePage
Div+CSS教程
CSS布局实例
CSS2.0教程
CSS在线手册
Web标准
XHTML教程
我们再看看关于这段xhtml的CSS代码：
复制内容到剪贴板程序代码 程序代码
#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
我们来看看上面的代码的运行效果：
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
或许你并不能完全理解这些代码都是什么意义，都用来控制什么，达到什么效果。
下面我们来解析上面的代码：
xhtml代码首先定义了一个容器div id="nav"。这个容器用来放置这个无序列表横向导航菜单的内容，但也有人认为这个容器是多余的，直接定义ul id="nav"就可以了。我们不建议你这样做，要知道我们的站点是可扩展的，我们要为将来的扩展留有足够的余地，如果我们的导航样式设计的更加复杂，仅有的ul是不能满足需要的。我们定义这样的容器也更符合我们编写代码的习惯。
#nav定义了窗口的宽高及背景颜色。#nav ul包含有margin和padding声明，字体及颜色声明。line-height: 30px;是非常重要的定义，如果取消掉行高的定义，我们的链接文字垂直居中就可能受到影响。white-space: nowrap;或许大家并不能理解有什么作用，它定义了强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。关于white-space属性可以参考这里。
#nav li中的list-style-type: none;去除了列表项所使用的预设标记。使其更象是纯文本，而没有列表标记。display: inline;声明则能够让列表项目在页面上从左向右浮动，而不会让每个项目显示在单独的行里而从上至下的排列。这两项声明是我们实现无序列表横向导航菜单的关键。
#nav li a和#nav li a:hover定义了链接的样式。其中的内容就不作深入了，唯一要讲的就是：padding: 7px 10px;它是用来控制链接文字之间的空白间隔的，你可以试着改变数值试试看。
至此，无序列表创建css横向导航菜单的工作就结束了。
在CSS中经常会使用到li标签，默认情况下使用li时，会在文字前面自动加上一个黑色的小圆点，有时候会觉得这个圆点多余，所以要去掉。下面介绍几种常用的方法。
方法一：
百度
雅虎
新浪
谷歌
方法二：
li {list-style-type:none;}
百度
雅虎
新浪
谷歌
方法三：
.li_style {list-style-type:none;}
百度
雅虎
新浪
谷歌
ul li{list-style-type: none;} 这个是去点的，不过一般网页都会在li的前面加上一个自己做的背景点，这个就去不掉了，你可以试试ul li {background:none;}。不要复制，我这里面有汉语的标点
li {
display: inline;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
sds
如何去掉LI列表前面的空白！
去掉LI前面的圆点，使用了list-style-type: none;不过前面出现了空白，无法消除，使用0margin,0padding也无效。可以用.ul{ list-style-type:none; padding:0; margin:0;} 试试看
去掉圆点的LI:
测试
(责任编辑：laiquliu)
|
