zoukankan      html  css  js  c++  java
  • 取消UL和OL符号以及padding和margin后恢复默认值的CSS

    之前取消UL和OL符号以及padding和margin,CSS代码如下:

    ul,ol{list-style:none; margin:0px; padding:0px;} 

    但想恢复默认确费了点力气!

    先解释一下为什么要取消:

    • ul,ol开头这样写就是控制所有的ul和ol
    • list-style:none; 就是把列表的项目符号取消,不显示符号,因为在写导航的时候不用单独来取消,并且在输入文章列表的时候我也不想用默认的一个圆点。
    • margin:0px; 在IE里面列表默认有外边距,所以设置成0像素,方便控制。
    • padding:0px;在火狐里面列表默认有内边距,所以设置成0像素,也是未来方便控制。

    因为我一开始就控制了所有的UL和OL,但是后来由于某种需求在某些地方又需要恢复为默认的样式,研究了很久终于搞定:

    ul{list-style-type:disc; list-style-position:inside;} 
    ol{list-style-type:decimal; list-style-position:inside;}  

    再解释一下:

    • list-style-type:就是控制列表符号的意思 上面的disc就是圆点 下面的decimal就是阿拉伯数字 开始以为这样就可以了,结果一浏览还是一样不会显示列表符号,最后才发现需要加上这一句
    • list-style-position:就是控制列表位置的意思 inside是列表缩进的意思 因为之前把外边距和内边距都设成0像素了 所以一定要加上这一句 才能恢复到默认

    这两句代码还可以简写,如下

    ul{ list-style:disc inside;}  
    ol{ list-style:decimal inside;}  
    出处:http://www.zhaiqianfeng.com    
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    行政区划代码和关键字提取
    清洗数据之地理纬度
    第三周学习进度
    性能战术在代码中的体现
    第二周学习进度
    淘宝网-质量属性场景
    如何做一名好的软件架构师
    寒假学习笔记16
    寒假学习笔记15
    寒假学习笔记14
  • 原文地址:https://www.cnblogs.com/zhaiqianfeng/p/4616645.html
Copyright © 2011-2022 走看看