list-style | 易学教程

list-style:none outside none;的作用

阅读更多关于 list-style:none outside none;的作用

今天在论坛里面看到一篇文章，讲的是以前忽略的一个问题。就是当ul里面有float和display：inline，在ie6、ie7里面会有一些问题。一般对ul进行reset也好，或是设置ul的样式时，往往要写list-style-type：none，有时偷懒点写list- style：none。这个在ff、ie8下面显示正常，列表符隐去不见，li里面的内容与框之间没有距离，但是在ie6、ie7里面虽然也会隐去列表符，但是会保留列表符在li里面占得位置。废话少说直接上代码： <style type="text/css"> body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font:bold 16px/180% arial;} div{float:left;display:inline;background:#eee;margin-right:10px;} p span{text-decoration:line-through;} ul{width:275px;margin:4px 0 0 15px;background:aqua;} .ul01{float:left;display:inline;} .ul01,.ul01 li{list-style:none ;} </style> <div> <p>1: list

list-style:none与list-style:none outside none 引发的思考。

阅读更多关于 list-style:none与list-style:none outside none 引发的思考。

SS手册中,对于list-style的解释是这样的：定义和用法 list-style 简写属性在一个声明中设置所有的列表属性。说明该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。可以按顺序设置如下属性： •list-style-type •list-style-position •list-style-image 可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。默认值： disc outside none 在日常工作中经常需要对ul,li进行css reset ,将列表符号隐藏. 最常用的写法就是Ul,li,ol{list- style:none;}(也有人用ul,li,ol{list-style-type:none;}) body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font:bold 16px/180% arial;} div{float:left;display:inline;background:#eee;margin-right

list-style:none outside none;的作用

阅读更多关于 list-style:none outside none;的作用

今天在论坛里面看到一篇文章，讲的是以前忽略的一个问题。就是当ul里面有float和display：inline，在ie6、ie7里面会有一些问题。一般对ul进行reset也好，或是设置ul的样式时，往往要写list-style-type：none，有时偷懒点写list-style：none。这个在ff、ie8下面显示正常，列表符隐去不见，li里面的内容与框之间没有距离，但是在ie6、ie7里面虽然也会隐去列表符，但是会保留列表符在li里面占得位置。废话少说直接上代码： <style type="text/css"> body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font:bold 16px/180% arial;} div{float:left;display:inline;background:#eee;margin-right:10px;} p span{text-decoration:line-through;} ul{width:275px;margin:4px 0 0 15px;background:aqua;} .ul01{float:left;display:inline;} .ul01,.ul01 li{list-style:none ;} </style> <div> <p>1: list-style

list-style:none outside none

阅读更多关于 list-style:none outside none

昨晚在看一个网站的代码的时候，我发现那个网站去掉ul的列表符采用list-style：none outside none；我平常都是用list-style：none；那为什么要这么用呢？原因是：在IE6,7中,与list-style:none的表现一模一样.在IE6,7中当UL具有float和display:inline属性后,设置了 list-style:none,则list-style-position也默认为inside了，即列表符被隐藏,但是仍然留有位置(list- style-position:inside);当UL不具有float和display:inline;时，无论有没有list-style:none 这个属性,列表符都被隐藏,不占位置。请看下面的代码： <style type="text/css"> body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font:bold 16px/180% arial;} div{float:left;display:inline;background:#eee;margin-right:10px;} p span{text-decoration:line-through;} ul{width:275px;margin:4px 0 0 15px;background:aqua;

列表与超链接

阅读更多关于列表与超链接

无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。基本语法格式： < ul> < li>列表项1< /li> < li>列表项2< /li> < li>列表项3< /li> ... </ul> 不赞成用无序表的type属性,一般通过CSS样式属性替代。 < li>与< /li>之间相当于一个容器，可以容纳所有的元素。但是< ul> < /ul>中只能嵌套 < li>< /li>，直接在< ul> < /ul>标记中输入文字的做法是不被允许的。有序列表ol 有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列。 < ol> < li>列表项1< /li> < li>列表项2< /li> < li>列表项3< /li> ... </ol> 定义列表dl 定义列表常用于对于术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。 < dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl> list-style-type属性使用列表时，经常需要定义列表的项目符号。在CSS中，list-style

【练习】HTML+CSS

阅读更多关于【练习】HTML+CSS

【练习】HTML+CSS 作业要求1 京东首页轮播图，效果如下 jd轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JD轮播图</title> <style> .img_border { width: 790px; height: 340px; border: 1px solid blue; margin: 0 auto; position: relative; } ul.img{ list-style: none; padding: 0; } ul li{ position: absolute; left: 0; top:0; } .img_cont { display: none; } .right_button,.left_button{ width: 30px; height: 100px; /*background-color: #f4bf42;*/ font-size: 40px; text-align: center; line-height: 100px; color:white; } .right_button { position: absolute; right: 0; top:120px; text-decoration: none; } .left

css list-style

阅读更多关于 css list-style

列表样式主要是设置ul或ol前面的那个“列表符”的特性，包括： list-style-type：用于设置列表样式的类型，比如原点(disc)，圆圈(circle)，阿拉伯数字(decimal)，罗马数字，英文字母。有了这个属性，对ul和ol来说，就没有差别了！ list-style-image 用于设置列列表前面的小图标（图像），也就是说，用一个图片来代替上面的列表符。如果设置了这项，则list-style-type就失效。 list-style-image: url(小图标的路径); list-style-position：用于设置列表项目符的位置，只有两个值：outside(外面，默认），inside（里面）。指的是列表符，是放在li盒子的里面，还是放在li盒子的外面。 list-style：上述3个属性的综合属性。说明：实际应用中，通常使用背景图像来代替“list-style-type”和“list-style-image”，更为常见。演示：使用这个自定义图标来实现一个隔行变色的列表，并要求该图标放在li盒子的内部。 ———————————————— 版权声明：本文为CSDN博主「XFlyaa」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_34608447

CSS 列表

阅读更多关于 CSS 列表

列表项符号 list-style-type 属性可以设置符号的样式。符号样式有有序的和无序的。无序列表在无序列表中，list-style-type 属性的值是形状，它有值有： none 什么都没有 disc 实心圆点 circle 空心圆 square 实心方块示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >项目符号样式-无序列表</ title > < style > ol{ list-style-type:disc; } </ style > </ head > < body > < h1 >软件开发，成就梦想</ h1 > < h2 >学编程，上利永贞网 https://www.liyongzhen.com/ </ h2 > < ol > < li >HTML 教程</ li > < li >CSS 教程</ li > < li >JavaScript 教程</ li > < li >AI 教程</ li > < ol > </ body > </ html > 计算结果有序列表在有序列表中，list-style-type

前端学习（94）：css重置样式

阅读更多关于前端学习（94）：css重置样式

CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式（CSS Reset）。举几个例子： 1.淘宝（CSS Reset）： html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body { background-color:#FFFFFF; color:#666666; font-family:Helvetica,Arial,sans-serif; font-size:12px; padding:0 10px; text-align:left; } select { font-size:12px; } table { border-collapse:collapse; } fieldset, img { border:0 none; } fieldset { margin:0; padding:0; }

我需要一个没有任何项目符号的无序列表

阅读更多关于我需要一个没有任何项目符号的无序列表

我创建了一个无序列表。我觉得无序列表中的项目符号很麻烦，因此我想删除它们。可以有没有项目符号的清单吗？ #1楼您可以通过在父元素（通常为 <ul> ）的CSS上将 list-style-type 为 none 来删除项目符号，例如： ul { list-style-type: none; } 如果还希望删除缩进，则可能还需要在其中添加 padding: 0 和 margin: 0 。有关列表格式技术的详细演练，请参见 Listutorial 。 #2楼您需要使用 list-style: none; <ul style="list-style: none;"> <li> ...</li> </ul> #3楼使用以下CSS： ul { list-style-type: none } #4楼在CSS中... ul { list-style: none; } #5楼在CSS中，样式 list-style-type: none; 来源： https://my.oschina.net/stackoom/blog/3136817

订阅 list-style