2016/4/17 去除 ul ol 前标记 list-style:none list-style-type:none

对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除。

1、在CSS中写入代码。找到相关性的CSS,在。.li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。

2、在相关的页面找到head部分写入下面的代码

<style type="text/css">

list-style:none;

</style>

3、在li,ul内加入list-style。如<ul style="list-style-type:none><li><a herf="http://blog.csdn.net/business122">我的博客</a></li>< /ul> 当然这种是很麻烦的了。

最简单的就是第一种了,通过CSS来控制,这个当然会有不错的效果了。

这几种方法都是通过设置list-style:none来设置的,有的是会用list-style-type,下面我们来看一看它的属性.

none不使用项目符号

disc实心圆,默认值

circle空心圆

square实心方块

decimal阿拉伯数字

lower-roman小写罗马数字

upper-roman大写罗马数字

lower-alpha小写英文字母

upper-alpha大写英文字母

这些都可以来代替上文中的none,想要什么样的都会有一个相应的对应。

A).运用CSS格式化列表符: ul li{

list-style-type:none;

}

B).如果你想将列表符换成图像,则: ul li{

list-style-type:none;

list-style-image: url(images/icon.gif);

}

C).为了左对齐,可以用如下代码: ul{

list-style-type:none;

margin:0px;

}

D).如果想给列表加背景色,可以用如下代码: ul{

list-style-type: none;

margin:0px;

}

ul li{

background:#CCC;

}

E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码: ul{ list-style-type: none; margin:0px; }

ul li a{ display:block; width: 100%; background:#ccc; }

ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!

F).LI中的元素水平排列,关键FLOAT:LEFT: ul{

list-style-type:none;

width:100%;

}

<li class="alt"><span><span>对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除。&nbsp;&nbsp;</span></span></li><li class=""><span><span class="value">1</span><span>、在CSS中写入代码。找到相关性的CSS,在。.li和.ul下写入list-sytle:</span><span class="value">none</span><span>;当然有的会这样来写</span><span class="keyword">list-style-type</span><span>:</span><span class="value">none</span><span>,&nbsp;这种写法特别是在一些CMS中最常见。&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="value">2</span><span>、在相关的页面找到head部分写入下面的代码&nbsp;&nbsp;</span></span></li><li class=""><span><style&nbsp;type=<span class="string">"text/css"</span><span>>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="keyword">list-style</span><span>:</span><span class="value">none</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span></style>&nbsp;&nbsp;</span></li><li class="alt"><span><span class="value">3</span><span>、在li,ul内加入list-style。如<ul&nbsp;style=</span><span class="string">"list-style-type:none><li><a&nbsp;herf="</span><span>http://blog.csdn.net/business</span><span class="value">122</span><span>">我的博客</a></li><&nbsp;/ul>&nbsp;当然这种是很麻烦的了。&nbsp;&nbsp;</span></span></li><li class=""><span>最简单的就是第一种了,通过CSS来控制,这个当然会有不错的效果了。&nbsp;&nbsp;</span></li><li class="alt"><span>这几种方法都是通过设置<span class="keyword">list-style</span><span>:</span><span class="value">none</span><span>来设置的,有的是会用list-style-type,下面我们来看一看它的属性.&nbsp;&nbsp;</span></span></li><li class=""><span><span class="value">none</span><span>不使用项目符号&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="value">disc</span><span>实心圆,默认值&nbsp;&nbsp;</span></span></li><li class=""><span><span class="value">circle</span><span>空心圆&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="value">square</span><span>实心方块&nbsp;&nbsp;</span></span></li><li class=""><span><span class="value">decimal</span><span>阿拉伯数字&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="value">lower-roman</span><span>小写罗马数字&nbsp;&nbsp;</span></span></li><li class=""><span><span class="value">upper-roman</span><span>大写罗马数字&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="value">lower-alpha</span><span>小写英文字母&nbsp;&nbsp;</span></span></li><li class=""><span><span class="value">upper-alpha</span><span>大写英文字母&nbsp;&nbsp;</span></span></li><li class="alt"><span>这些都可以来代替上文中的<span class="value">none</span><span>,想要什么样的都会有一个相应的对应。&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;A).运用CSS格式化列表符:&nbsp;ul&nbsp;li{&nbsp;&nbsp;</span></li><li class=""><span><span class="keyword">list-style-type</span><span>:</span><span class="value">none</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li><li class=""><span>B).如果你想将列表符换成图像,则:&nbsp;ul&nbsp;li{&nbsp;&nbsp;</span></li><li class="alt"><span><span class="keyword">list-style-type</span><span>:</span><span class="value">none</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">list-style-image</span><span>:&nbsp;</span><span class="value">url</span><span>(images/</span><span class="value">icon</span><span>.gif);&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li><li class=""><span>C).为了左对齐,可以用如下代码:&nbsp;ul{&nbsp;&nbsp;</span></li><li class="alt"><span><span class="keyword">list-style-type</span><span>:</span><span class="value">none</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">margin</span><span>:</span><span class="value">0px</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li><li class=""><span>D).如果想给列表加背景色,可以用如下代码:&nbsp;ul{&nbsp;&nbsp;</span></li><li class="alt"><span><span class="keyword">list-style-type</span><span>:&nbsp;</span><span class="value">none</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">margin</span><span>:</span><span class="value">0px</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li><li class=""><span>ul&nbsp;li{&nbsp;&nbsp;</span></li><li class="alt"><span><span class="keyword">background</span><span>:</span><span class="value">#CCC</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>}&nbsp;&nbsp;</span></li><li class="alt"><span>E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:&nbsp;ul{&nbsp;<span class="keyword">list-style-type</span><span>:&nbsp;</span><span class="value">none</span><span>;&nbsp;</span><span class="keyword">margin</span><span>:</span><span class="value">0px</span><span>;&nbsp;}&nbsp;&nbsp;</span></span></li><li class=""><span>ul&nbsp;li&nbsp;a{&nbsp;<span class="keyword">display</span><span>:</span><span class="value">block</span><span>;&nbsp;</span><span class="keyword">width</span><span>:&nbsp;</span><span class="value">100%</span><span>;&nbsp;</span><span class="keyword">background</span><span>:</span><span class="value">#ccc</span><span>;&nbsp;}&nbsp;&nbsp;</span></span></li><li class="alt"><span>ul&nbsp;li&nbsp;a:hover{&nbsp;<span class="keyword">background</span><span>:</span><span class="value">#999</span><span>;&nbsp;}说明:</span><span class="keyword">display</span><span>:</span><span class="value">block</span><span>;这一行必须要加的,这样才能块状显示!&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>F).LI中的元素水平排列,关键FLOAT:LEFT:&nbsp;ul{&nbsp;&nbsp;</span></li><li class=""><span><span class="keyword">list-style-type</span><span>:</span><span class="value">none</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="keyword">width</span><span>:</span><span class="value">100%</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>}&nbsp;&nbsp;</span></li>

时间: 2024-11-05 16:02:19

2016/4/17 去除 ul ol 前标记 list-style:none list-style-type:none的相关文章

div span ul ol 区别

一不小心跑偏了qwq 1.ol和ul <ol> <li> </li> <li> </li> <ul> <ul> <li> </li> <li> </li> </ul> 上面那两块的区别在于ul块中的行有小圆点,<li>是行的意思: 2.div和span div和span都是块,但是div是自动分行的:

html 中的ul,ol标签

ul为无序列表 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> ol 为有序列表 <ol type="A"> <li>1</li> <li>2dd</li> <li>3</li>

关于css中列表(ul ol)存在默认间距的问题

一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在前辈的博客中了解到:ul或ol中的li与li之间之所以会有间隙,是因为空白符引起的. 因为我们一般都是一行一个li,换行都会产生空白符.上面的日历也可以看到每个数之间有明显的间隙. 解决办法:将ul或ol的font-size设置为0,消去空白间隙,重新在给li定义字体的大小. 修改后的效果: 需要注

关键自li,em,dl,ul,ol,footer,header,nav,aside,article

1 section 版块 用于划分页面上的不同区域,或者划分文章里不同的节 2 3 header 页面头部或者版块(section)头部 4 5 footer 页面底部或者(section)底部 6 7 nav 导航 (包含链接的的一个列表) 8 9 article 用来在页面中表示一套结构完整且独立的内容部分 10 可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等. 11 12 aside 元素标签可以包含与当前页面或主要内容相关的引用.

list-style-type 去除li 前面的标记(小黑点)

list-style-type 设置标记的样式(或者隐藏标记) <!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> &l

ul ol li的序号编号样式

首先来那看一个序号样式的例子,下面是html代码(做参考) <ol> <li>列表内容列表内容列表内容列表</li> <li>列表内容列表内容列表内容列表</li> <li>列表内容列表</li> <li>列表内容列表内容4</li> <li>列表内容列表内容5</li> </ol> 一.示例 1.自定义序号, 一般的列表顺序都是以1.2.3.为序号,但需要“.”

(2016.4.17)文献总结Learning Hierarchical Features for Scene Labeling

LearningHierarchical Features for Scene Labeling Introduction: Full-scenelabeling 就是 scene parsing 关键在于用ConNet提取特征向量!!! 1.sceneparsing的困难之处在于一个过程里要结合detection, segmentation,multilabel recognition. 2.问题有两个:一是对视觉信息产生好的表达,二是使用背景信息保证对图片解释的一致性 3.文章的主要方法:使

2016.6.17——Remove Duplicates from Sorted Array

Remove Duplicates from Sorted Array 本题收获: 1.“删除”数组中元素 2.数组输出 题目: Given a sorted array, remove the duplicates in place such that each element appear only once and return the new length. Do not allocate extra space for another array, you must do this i

css基础 去除ul,li无序列表前面的符号

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"