zoukankan      html  css  js  c++  java
  • CSS 杂记

    1. z-index

    img{ position:absolute; left:0px; top:0px; z-index:-1;}

    所有主流浏览器都支持 z-index 属性。

    注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

    注释:元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效(例如 position:absolute;)。

    说明:该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

    可能的值:

    描述
    auto 默认。堆叠顺序与父元素相等。
    number 设置元素的堆叠顺序。
    inherit 规定应该从父元素继承 z-index 属性的值。

    2.back-round:

    background-color   规定要使用的背景颜色。
    background-position background-position:center; 规定背景图像的位置。
    background-size background-size:80px 60px; 规定背景图片的尺寸。
    background-repeat   规定如何重复背景图像。
    background-origin background-origin:content-box; 规定背景图片的定位区域。
    background-clip background-clip:content-box; 规定背景的绘制区域。
    background-attachment background-attachment:scroll/fixed/inherit; 规定背景图像是否固定或者随着页面的其余部分滚动。
    background-image background-image: url(bgimage.gif); 规定要使用的背景图像。
    inherit   规定应该从父元素继承 background 属性的设置。

    背景图片居中:

    BODY {background-image: URL(图片名称.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;}
    3. IE中使用table时<tr>间有空白
    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="LicenceOK" runat="server">
            <tr>
                <td>
                    <img name="index_r1_c1" src="images/NewImages/Login/sc_header.jpg" width="100%"
                        height="212" border="0" id="index_r1_c1" alt="" style="display: block;" />
                </td>
            </tr>
            <tr>
                <td>
                    <img name="index_r1_c1" src="images/NewImages/Login/sc_header.jpg" width="100%"
                        height="212" border="0" id="index_r1_c1" alt="" style="display: block;" />
                </td>
            </tr>
    

    首先,必须用Table的话,加style="display: block;"即可解决;其次,可以换用div布局。

    4. 完美解决对span的宽高或margin或padding设置,兼容个浏览器

    CSS中添加:display:-moz-inline-box;  display:inline-block;

    5. 去掉<ul><li>前的默认样式(小黑点)

    CSS中添加:list-style:none;

    6. 让<div>中的<table>居中

    有时候在Div中加上 <div  style="text-align:center"></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto:

    7. 图片和文字对齐,及兼容模式下Img错乱(加float属性)

    <div style=" 320px; height:20px;">
           <img src="../images/Default/erji/jia.png" alt="" style=" float:left;"/>
           <span class="height:20px; color:Green; line-height:20px; display:inline-block; float:left; margin-left:5px;">基本信息</span>
    </div>

    8. 鼠标指上显示小手样式,使用cursor:pointer或者cursor:hand

    <span onclick="onEdit(' rowdata.UserID ')" style="color:Green; cursor:pointer; line-height:20px;">修改密码</span>

    9. html,body{margin:0; padding;0;} 网页顶端仍有空白

    CSS中添加 * {margin:0px; padding:0px;}

    10. 圆角设置(上右下左)(兼容个浏览器)

    border: 2px solid #C0C0C0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position:relative;
    z-index:2;
    behavior: url(此处为ie-css3.htc文件的绝对路径);

    Webkit内核的浏览器支持“-webkit-border-radius: 10px;” 属性,可以直接解析出圆角;

    Firefox浏览器支持“-moz-border-radius:  10px;”属性,也可以直接解析出圆角;

    IE系浏览器则需要加上“border-radius: 15px;”的属性。

    注意

    1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为 IE浏览器找该文件是相对当前页面路径来找的,所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。(ie-css3.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。)

    2、一定要有定位属性:position:relative;

    3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大,如2。

    4、如果在IE浏览器下某些模块无法用此渲染,可以试着绝对定位相应的层,即加上“ 400px;  height:400px;”属性。

    5、radius属性的10px是圆角半径,还可以给两个值如“border-radius: 10px  5px;”,为“上  右  下  左”。

    11.当在一个容器里设置" font:10pt 微软雅黑; "样式时,对这个容器设置的line-height数值会失效。
    解决方法两种:(1)增加父元素,在父元素设置font样式,内容元素(子元素)设置line-height;(2)增加子元素包含设置line-height的内容,父元素设置font样式;

    12.iframe背景色为父DIV的背景色

      只要在子页面的<body>设置样式如下:

    <body style="background:transparent;">
  • 相关阅读:
    51 Nod 1086 多重背包问题(单调队列优化)
    51 Nod 1086 多重背包问题(二进制优化)
    51 Nod 1085 01背包问题
    poj 2559 Largest Rectangle(单调栈)
    51 Nod 1089 最长回文子串(Manacher算法)
    51 Nod N的阶乘的长度 (斯特林近似)
    51 Nod 1134 最长递增子序列(经典问题回顾)
    51 Nod 1020 逆序排列
    PCA-主成分分析(Principal components analysis)
    Python中cPickle
  • 原文地址:https://www.cnblogs.com/xinaixia/p/3966015.html
Copyright © 2011-2022 走看看