CSS中灵活使用:before和:after

        background: rgba(255,255,255,.5); /*给定背景白色，透明度50%*/  

        z-index:-1 /*日常元素堆叠顺序(重要，下面内容也会略带介绍)*/  

    }   

</style>   

<!--这里容兽偷个懒，布局简单写写-->   

<div class="test-div">   

    <table>   

        <tr>   

            <td>Name</td>   

            <td><input placeholder="your name" /></td>   

        </tr>    

        <tr>   

            <td>Password</td>   

            <td><input placeholder="your password" /></td>   

        </tr>    

        <tr>   

            <td></td>   

            <td><input type="button" value="login" /></td>   

        </tr>   

    </table>   

</div>  

上面的代码拷贝过去，加上张图片可测试效果。

当然，:bofore和:after也还有其他更多的巧妙用法，这里也不一一列出来了，这里放上一个用这两个伪元素加上css3动画实现一些比较好看及实用的动态效果的链接：HoverEffectIdeas

说完了:before和:after，我们稍微扯扯一些其他的css样式及布局注意点(可能大家不怎么注意，从而导致一些布局和样式出问题)。

position 定位的问题

position属性规定了元素的定位类型，默认为static。

该属性还可以有下值：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
inherit：规定应该从父元素继承 position 属性的值。

代码：

CSS Code复制内容到剪贴板

<!--position:absolute-->   

  <style>   

      body{   

          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/  

      }   

      .test-div{   

          position:absolute;   

          left:50px;   

          top:50px  

      }   

  </style>   

  <div class="test-div">Hello World</div>   

<!--position:fixed-->   

  <style>   

      body{   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!