css笔记

最新推荐文章于 2024-09-14 17:04:32 发布

chainan1988

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量318

点赞数

分类专栏： jquery 文章标签： css filter function xhtml div class

本文链接：https://blog.csdn.net/chainan1988/article/details/6992809

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css中以下3个均是控制透明度：

opacity: 0.8; 在后来火狐和IE版本上均可以使用
filter: alpha(opacity=80); 主要在IE早期版本上使用
-moz-opacity: 0.8; 在火狐浏览器上使用

css中以下是控制位置：

position:absolute;绝对定位有个特点是可以是标签显示时发生重叠，下一个标签同样在一个位置开始摆放。

css中以下是控制显示：

display: none;不显示；display:block;块显示，显示时会有换行。下一个标签显示时会在下一行显示；display:inline;显示时不会有换行。

css中以下是控制显示层次：

z-index: 99;发生遮盖时（譬如使用position:absolute），控制哪个标签显示在上面（z-index越大越优先）。

========================================================================================================================

可以使用以上css定义实现弹出层：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <%--<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>--%>
    <style type="text/css">

        .bg
        {
            display: none;
            background-color:#e3e3e3;
            width:100%;
            position:absolute;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
        }
        .dia
        {
        display: none;
            position: absolute;
            width: 400px;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            height: auto;
            z-index: 100;
            background-color: #fff;
            border: 1px #8FA4F5 solid;
            padding: 1px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#click").click(function () {
                $(".bg").css({ display: "block", height: $(document).height() });
                $(".dia").css("top", "100px");
                $(".dia").css("display", "block");
            });
        });
    </script>
</head>
<body>
    <div class="bg">遮盖层
    </div>
    <div class="dia">
        <h1>
            弹出层</h1>
    </div>
    <form id="form1">
    <div>
        <input type="button" id="click" value="Click" />
    </div>
    </form>
</body>
</html>