用css实现一个空心圆,并始终放置在浏览器窗口左下角
        div{
                position:fixed;
                bottom:0;
                left:0;
                width:100px;
                height:100px;
                border:2px solid #000;
                border-radius:100px;
}
        如何让圆水平,垂直居中
        div{
                position:fixed;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                width:100px;
                height:100px;
                border:2px solid #000;
                border-radius:100px;
}
IE7以下不支持position:fixed;的bug

1. 利用 Javascript 计算出需要的 top 值
<!--[if IE lt 7]>
<link rel="stylesheet" href="style.css" type="text/css" />
<![endif]-->
在style.css样式表中针对目标定位元素样式中写入:
position:absolute;
top:expression(eval(document.body.scrollTop + 50));
防止滚动条滚动时的闪动,需要定义HTMl的属性为:
html {
    background-image: url(about: blank); /*用浏览器空白页面作为背景*/
    background-attachment: fixed; /*确保滚动条滚动时,元素不闪动*/
}
在 IE 中特有的 CSS 运算符 expression中我们可以利用 Javascript 计算出需要的 top 值,这样就达到了与 position: fixed 同样的效果。
2.利用容器对溢出内容的处理方式来实现
定义body内外边距为0,实现html和浏览器窗口相同大小,使body出现滚动条,元素相对于html相对定位。
body { padding: 0; margin: 0; }
html { overflow: hidden; }
body { height: 100%; overflow: auto; }
针对IE6定义元素属性:
position: absolute;
top: 50% ;
left: 50% ;
margin-top: -140px;
margin-left: -168px;
让元素固定于浏览器
分别让元素定位于浏览器左侧、右侧、顶部、底部综合样式演示:
position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop));/* IE6 头部固定 */

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,
10)0)-(parseInt(this.currentStyle.marginRight, 10)0));/* IE6 固定右侧 */

position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,
10)0)-(parseInt(this.currentStyle.marginBottom, 10)0)));/* IE6 固定底部  */

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft));/* IE6 左侧固定 */

用css实现一个空心圆,并始终放置在浏览器窗口左下角的更多相关文章

  1. css实现div悬浮层,始终停留在浏览器的最下方,不随页面的滚动条滚动改变位置或消失

    .bottom_xf{ background-color:#1D69A9; width:100%; height:2.8em; margin:0 auto; overflow:hidden; posi ...

  2. css 空心圆

    用css实现一个空心圆,并始终放置在浏览器窗口左下角        div{                position:fixed;                bottom:0;      ...

  3. CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  4. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  5. 纯CSS实现一个微信logo,需要几个标签?

    博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...

  6. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  7. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  8. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  9. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

随机推荐

  1. php——会话控制

    1.什么叫做会话控制 允许服务器根据客户端做出的连续请求. 2.为什么需要会话控制? 因为当你打开一个网站,并想访问该网站的其他页面的时候,如果没有会话控制,当跳转到其他页面的 时候,就需要再次输入账 ...

  2. BIOS讲解

    首先  BIOS其实没什么神奇的 就是  Bisic input/output System,所以基本输入输出系统是一块装入了启动和自检程序的EPROM或EEPROM集成块,实际上它是被固化在计算机R ...

  3. 字符串处理(正则表达式、NSScanner扫描、CoreParse解析器)-备用

    搜索 在一个字符串中搜索子字符串 最灵活的方法 1 - (NSRange)rangeOfString:(NSString *)aString options:(NSStringCompareOptio ...

  4. ios打包ipa的四种实用方法(.app转.ipa)-备

    感谢大神分享这个博客 总结一下,目前.app包转为.ipa包的方法有以下几种: 1.Apple推荐的方式,即实用xcode的archive功能 Xcode菜单栏->Product->Arc ...

  5. VMware vSphere 6 Enterprise Plus License

    Product: VMware vSphere 6 Enterprise Plus Licensed for 2 physical CPUs (unlimited cores per CPU) Lic ...

  6. 从客户端(txtNewsContent="<hr />")中检测到有潜在危险的 Request.Form 值。怎么办呀?

    <system.web><httpRuntime requestValidationMode="2.0" executionTimeout="3600& ...

  7. 实现ECMAScript的引擎

    list of ECMAScript engines From Wikipedia, the free encyclopedia     An ECMAScript engine is a progr ...

  8. MVC4.0系统开发新手历程(四)数据列表查询

    任何系统都不可避免的就是数据的查询展示,我觉得这里最值得一说的就是分部视图以及数据分页了 首先添加控制器 在控制其上面的名字为Index的Action上面右击,添加视图即可添加对应的视图,分部视图呈现 ...

  9. 用友U8.70安装说明

    用友U8.70安装说明 U8.70安装说明一.安装前注意事项:1.       在安装U870之前,我们推荐您确保当前计算机操作系统是“干净”的,即计算机在安装过操作系统和更新过必要的系统补丁后没有安 ...

  10. cf445A DZY Loves Chessboard

    A. DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input stand ...