来一发CSS的list-style注释

只看该作者 · 发表于 2015-1-15 23:19:34

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
破洛洛文章简介：CSSreset中的list-style:none.
本来事情中已经碰着过UL列内外一些非常的体现,
加上今天看到了http://bbs.blueidea.com/thread-2984871-1-1.html这个贴子,以是测试了一下list-style的各类属性,发明了一个成心思的征象
先看一下CSS手册中,关于list-style的注释

界说和用法
list-style简写属性在一个声明中设置一切的列表属性。
申明
该属性是一个简写属性，涵盖了一切其他列表款式属性。因为它使用到一切display为list-item的元素，以是在一般的HTML和XHTML中只能用于li元素，不外实践上它能够使用就任何元素，并由list-item元素承继。
能够按按次设置以下属性：
•list-style-type
•list-style-position
•list-style-image
能够不设置个中的某个值，好比"list-style:circleinside;"也是同意的。未设置的属性会利用其默许值。
默许值：discoutsidenone

在一样平常事情中常常必要对ul,li举行cssreset,将列表标记埋没.
最经常使用的写法就是Ul,li,ol{list-style:none;}(也有人用ul,li,ol{list-style-type:none;})
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="fanfan,xiangrui09@qq.com"/><title>罕见的用法</title><styletype="text/css">body,ul,li,p{padding:0;margin:0;font-size:12px;}p{font:bold16px/180%arial;}div{float:left;display:inline;background:#eee;margin-right:10px;}pspan{text-decoration:line-through;}ul{width:275px;margin:4px0015px;background:aqua;}ul,li{list-style:none;}</style></head><body><div><p>1:list-style:none;</p><ul><li><ahref="#">纯洁的笔墨奇怪的梦境奔跑的头脑</a></li><li><ahref="#">就像对恋爱一样请求是近乎完善的</a></li><li><ahref="#">校园里淡淡的芳华纯真的男孩女孩</a></li><li><ahref="#">我徘徊而又徘徊早已没有了间隔之感</a></li><li><ahref="#">凝睇着她的脸朗读起熟习而又生疏的诗句</a></li><li><ahref="#">那些笔墨刚好地形貌了一个女孩子的灵</a></li><li><ahref="#">交织呈现明暗线索和不断定的配角</a></li><li><ahref="#">精致而真诚的情感垂垂突显出来设身处地</a></li><li><ahref="#">高密度的心情在笔墨中重复发酵</a></li></ul></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
这个页面在IE6,7,8,FF中都没甚么成绩.
可是我们不克不及疏忽的是,list-style:包括了三个属性:
list-style-type
list-style-position
list-style-img
假如不注重这三个属性的话,list-style偶然候就会出来作怪
好比当ul,浮动后,必要display:inline来办理在IE6中的双倍边距成绩时,奇异的事变产生了:
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="fanfan,xiangrui09@qq.com"/><title>奇异的事变产生了</title><styletype="text/css">body,ul,li,p{padding:0;margin:0;font-size:12px;}p{font:bold16px/180%arial;}div{float:left;display:inline;background:#eee;margin-right:10px;}pspan{text-decoration:line-through;}ul{width:275px;margin:4px0015px;background:aqua;}.ul01{float:left;display:inline;}.ul01,.ul01li{list-style:none;}</style></head><body><div><p>1:list-style:none;</p><ulclass="ul01"><li><ahref="#">纯洁的笔墨奇怪的梦境奔跑的头脑</a></li><li><ahref="#">就像对恋爱一样请求是近乎完善的</a></li><li><ahref="#">校园里淡淡的芳华纯真的男孩女孩</a></li><li><ahref="#">我徘徊而又徘徊早已没有了间隔之感</a></li><li><ahref="#">凝睇着她的脸朗读起熟习而又生疏的诗句</a></li><li><ahref="#">那些笔墨刚好地形貌了一个女孩子的灵</a></li><li><ahref="#">交织呈现明暗线索和不断定的配角</a></li><li><ahref="#">精致而真诚的情感垂垂突显出来设身处地</a></li><li><ahref="#">高密度的心情在笔墨中重复发酵</a></li></ul></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
.ul01{float:left;display:inline;}
.ul01,.ul01li{list-style:none;}
下面的页面在ie8,ff中仍旧一般
可是在IE6,7中,ul内侧与li发生了间隔.
因而可知,当我们界说了list-style:none今后,只管列表符其实不呈现,可是在IE6,7中,仍旧留有它的地位.
看看在FF里这个UL究竟具有哪些属性

登录/注册后可看大图

图上可见,当css中界说list-style:none时,对list-style-position并没有影响,仍旧是FF扫瞄器的默许设置,值为outside
而IE6,7中极可能默许list-style-position:inside
为了证明这一点,我把list-style:none换为list-style:noneinsidenone再测试了一下
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="fanfan,xiangrui09@qq.com"/><title>强迫inside</title><styletype="text/css">body,ul,li,p{padding:0;margin:0;font-size:12px;}p{font:bold16px/180%arial;}div{background:#eee;margin-right:10px;}pspan{text-decoration:line-through;}ul{width:275px;margin:4px0015px;background:aqua;list-style:noneinsidenone;}</style></head><body><div><p>强迫insidelist-style:noneinsidenone;</p><ul><li><ahref="#">纯洁的笔墨奇怪的梦境奔跑的头脑</a></li><li><ahref="#">就像对恋爱一样请求是近乎完善的</a></li><li><ahref="#">校园里淡淡的芳华纯真的男孩女孩</a></li><li><ahref="#">我徘徊而又徘徊早已没有了间隔之感</a></li><li><ahref="#">凝睇着她的脸朗读起熟习而又生疏的诗句</a></li><li><ahref="#">那些笔墨刚好地形貌了一个女孩子的灵</a></li><li><ahref="#">交织呈现明暗线索和不断定的配角</a></li><li><ahref="#">精致而真诚的情感垂垂突显出来设身处地</a></li><li><ahref="#">高密度的心情在笔墨中重复发酵</a></li></ul></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
运转后能够发明,在IE6,7中,与list-style:none的体现千篇一律.
以是我推想在IE6,7中当UL具有float:left和display:inline属性后,设置了list-style:none,则list-style-position也默许为inside了;
以是我得出的总结是
在IE6,7下,当UL不具有float:left;display:inline;时:
不管有无list-style:none这个属性,列表符都被埋没,不占地位(上面代码中的5,6)
当UL具有float:left;display:inline;属性时
list-style:none,列表符被埋没,可是仍旧留有地位(list-style-position:inside);(上面代码中的UL1,ul3)
未设置list-style:none;列表符被埋没,也不占位(list-style-position:outside)(代码UL4)
而UL02在介入测试的各扫瞄器中体现都对照幻想
最初这一段代码对照一下各类情形下list-style的体现,特别注重4,5,6在IE6,7下的体现
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>list-style:none仍是list-style:noneoutsidenone;</title><styletype="text/css">body,ul,li,p{padding:0;margin:0;font-size:12px;}p{font:bold16px/180%arial;}div{float:left;display:inline;background:#eee;margin:010px10px0;}pspan{text-decoration:line-through;}ul{width:275px;margin:4px0015px;background:aqua;}.ul01,.ul02,.ul03,.ul04{float:left;display:inline;}.ul01,.ul01li{list-style:none;}.ul02,.ul02li{list-style:noneoutsidenone;}.ul03,.ul03li{list-style:noneinsidenone;}.ul04,.ul04li{}.ul05{}.ul05,.ul05li{list-style:none;}.ul06{}.ul06,.ul06li{}</style></head><body><div><p>1:float:left;display:inline;list-style:none;</p><ulclass="ul01"><li><ahref="#">纯洁的笔墨奇怪的梦境奔跑的头脑</a></li><li><ahref="#">就像对恋爱一样请求是近乎完善的</a></li><li><ahref="#">校园里淡淡的芳华纯真的男孩女孩</a></li><li><ahref="#">我徘徊而又徘徊早已没有了间隔之感</a></li><li><ahref="#">凝睇着她的脸朗读起熟习而又生疏的诗句</a></li><li><ahref="#">那些笔墨刚好地形貌了一个女孩子的灵</a></li><li><ahref="#">交织呈现明暗线索和不断定的配角</a></li><li><ahref="#">精致而真诚的情感垂垂突显出来设身处地</a></li><li><ahref="#">高密度的心情在笔墨中重复发酵</a></li></ul></div><div><p>2:float:left;display:inline;list-style:noneoutsidenone;</p><ulclass="ul02"><li><ahref="#">纯洁的笔墨奇怪的梦境奔跑的头脑</a></li><li><ahref="#">就像对恋爱一样请求是近乎完善的</a></li><li><ahref="#">校园里淡淡的芳华纯真的男孩女孩</a></li><li><ahref="#">我徘徊而又徘徊早已没有了间隔之感</a></li><li><ahref="#">凝睇着她的脸朗读起熟习而又生疏的诗句</a></li><li><ahref="#">那些笔墨刚好地形貌了一个女孩子的灵</a></li><li><ahref="#">交织呈现明暗线索和不断定的配角</a></li><li><ahref="#">精致而真诚的情感垂垂突显出来设身处地</a></li><li><ahref="#">高密度的心情在笔墨中重复发酵</a></li></ul></div><div><p>3:float:left;display:inline;list-style:noneinsidenone;</p><ulclass="ul03"><li><ahref="#">纯洁的笔墨奇怪的梦境奔跑的头脑</a></li><li><ahref="#">就像对恋爱一样请求是近乎完善的</a></li><li><ahref="#">校园里淡淡的芳华纯真的男孩女孩</a></li><li><ahref="#">我徘徊而又徘徊早已没有了间隔之感</a></li><li><ahref="#">凝睇着她的脸朗读起熟习而又生疏的诗句</a></li><li><ahref="#">那些笔墨刚好地形貌了一个女孩子的灵</a></li><li><ahref="#">交织呈现明暗线索和不断定的配角</a></li><li><ahref="#">精致而真诚的情感垂垂突显出来设身处地</a></li><li><ahref="#">高密度的心情在笔墨中重复发酵</a></li></ul></div><div><p>4:float:left;display:inline;未做cssreset</p><ulclass="ul04"><li><ahref="#">纯洁的笔墨奇怪的梦境奔跑的头脑</a></li><li><ahref="#">就像对恋爱一样请求是近乎完善的</a></li><li><ahref="#">校园里淡淡的芳华纯真的男孩女孩</a></li><li><ahref="#">我徘徊而又徘徊早已没有了间隔之感</a></li><li><ahref="#">凝睇着她的脸朗读起熟习而又生疏的诗句</a></li><li><ahref="#">那些笔墨刚好地形貌了一个女孩子的灵</a></li><li><ahref="#">交织呈现明暗线索和不断定的配角</a></li><li><ahref="#">精致而真诚的情感垂垂突显出来设身处地</a></li><li><ahref="#">高密度的心情在笔墨中重复发酵</a></li></ul></div><div><p>5:无display,float属性list-style为none;</p><ulclass="ul05"><li><ahref="#">纯洁的笔墨奇怪的梦境奔跑的头脑</a></li><li><ahref="#">就像对恋爱一样请求是近乎完善的</a></li><li><ahref="#">校园里淡淡的芳华纯真的男孩女孩</a></li><li><ahref="#">我徘徊而又徘徊早已没有了间隔之感</a></li><li><ahref="#">凝睇着她的脸朗读起熟习而又生疏的诗句</a></li><li><ahref="#">那些笔墨刚好地形貌了一个女孩子的灵</a></li><li><ahref="#">交织呈现明暗线索和不断定的配角</a></li><li><ahref="#">精致而真诚的情感垂垂突显出来设身处地</a></li><li><ahref="#">高密度的心情在笔墨中重复发酵</a></li></ul></div><div><p>6:无display,float属性无list-style:none;</p><ulclass="ul06"><li><ahref="#">纯洁的笔墨奇怪的梦境奔跑的头脑</a></li><li><ahref="#">就像对恋爱一样请求是近乎完善的</a></li><li><ahref="#">校园里淡淡的芳华纯真的男孩女孩</a></li><li><ahref="#">我徘徊而又徘徊早已没有了间隔之感</a></li><li><ahref="#">凝睇着她的脸朗读起熟习而又生疏的诗句</a></li><li><ahref="#">那些笔墨刚好地形貌了一个女孩子的灵</a></li><li><ahref="#">交织呈现明暗线索和不断定的配角</a></li><li><ahref="#">精致而真诚的情感垂垂突显出来设身处地</a></li><li><ahref="#">高密度的心情在笔墨中重复发酵</a></li></ul></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
经由过程下面代码体现了局的对照,我以为:
在firefox中只需list-style-type为none,则不管list-stype-position的值为outside或inside,list-style都能很好的被埋没
而在IE6,7中,仅设置list-style:none,其实不足以办理一切成绩
以是我以为在cssreset的时分利用list-style:noneoutsidenone更好
</p>
另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。

只看该作者 · 发表于 2015-1-16 17:42:21

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-1-18 18:54:36

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-1-27 18:28:21

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-2-5 14:47:05

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-2-12 09:44:17

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-3-3 02:38:18

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-11 09:24:32

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-3-18 10:38:50

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-25 22:00:15

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发CSS的list-style注释

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

来一发CSS的list-style注释