css控制固定在左下，右下，左上角的漂浮层

来源：互联网发布：手机炒股软件筹码编辑：程序博客网时间：2024/05/01 14:53
主题：使用CSS控制一个固定在左下，右下，左上角的漂浮层
兼容在IE7，IE8，firefox，safari，opera，google chrome，360 browser
<!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>    <title></title>    <style type="text/css">        body, button, input, select, textarea {            font: 12px/1.5 tahoma,arial,宋体;            /*              background-attachment:fixed;background-image:url(text.txt); 一起用，解决固定层飘浮在窗口上，在IE6下抖动的问题。              作用：如果body本身没有定义背景图片，添加这个背景图片属性，固定背景图层，使背景不受页面滚动而变化，解决IE6下抖动问题。            */            background-image: url(text.txt); /* for IE6 */            background-attachment: fixed; /* for IE6 */        }        #tstart-toolbar-top {            top: 0; /*最上*/            color: #3E3E3E;            right: 0;            position: fixed;            text-align: left;            width: 100%;            z-index: 10000;            _position: absolute; /* for IE6 */            _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */            overflow: visible;        }            #tstart-toolbar-top .tstart-right {                float: right; /*在右*/                margin: 5px 5px 5px 5px;                padding: 10px;                border: 1px solid silver;                background-color: white;                box-shadow: 0px 0px 5px #000;                -moz-box-shadow: 0px 0px 5px #000;                -webkit-box-shadow: 0px 0px 5px #000;            }        #tstart-toolbar-bottom {            position: fixed; /*固定*/            bottom: 0; /*在最下*/            color: #3E3E3E;            left: 0;            text-align: left;            width: 100%;            z-index: 10000;            _position: absolute; /* for IE6 */            _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */            overflow: visible;        }            #tstart-toolbar-bottom .tstart-left {                float: left; /*在左*/                width: 300px;                margin: 5px 5px 5px 5px;                padding: 5px;                border: 1px solid silver;                background-color: white;                /*椭圆与阴影*/                box-shadow: 0px 0px 5px #000;                -moz-box-shadow: 0px 0px 5px #000;                -webkit-box-shadow: 0px 0px 5px #000;            }            #tstart-toolbar-bottom .tstart-right {                float: right; /*在右*/                width: 300px;                margin: 5px 5px 5px 5px;                padding: 5px;                border: 1px solid silver;                background-color: white;                box-shadow: 0px 0px 5px #000;                -moz-box-shadow: 0px 0px 5px #000;                -webkit-box-shadow: 0px 0px 5px #000;            }    </style></head><body>    <div style="height: 2000px; width: 2000px;">        div style=height:2000px    </div>    <div id="tstart-toolbar-top">        <div class="tstart-right">            <img src="T237JfXbBcXXXXXXXX_!!26503949.gif" alt="营业时间" />        </div>    </div>    <div id="tstart-toolbar-bottom">        <div class="tstart-left">            左下角-工具条        </div>        <div class="tstart-right">            右下角-工具条        </div>    </div></body></html>
0 0