用css实现一个空心圆,并始终放置在浏览器窗口左下角
用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实现一个空心圆,并始终放置在浏览器窗口左下角的更多相关文章
- css实现div悬浮层,始终停留在浏览器的最下方,不随页面的滚动条滚动改变位置或消失
.bottom_xf{ background-color:#1D69A9; width:100%; height:2.8em; margin:0 auto; overflow:hidden; posi ...
- css 空心圆
用css实现一个空心圆,并始终放置在浏览器窗口左下角 div{ position:fixed; bottom:0; ...
- CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 纯CSS实现一个微信logo,需要几个标签?
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...
- 如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- 纯 CSS 创建一个三角形
[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
随机推荐
- 文成小盆友python-num10 socketserver 原理相关。
本节主要内容: 1.IO多路复用 2.多线程多进程 3.小知识点补充(python中作用域相关) 4.socketserver源码分析补充 一.IO多路复用 I/O多路复用指:通过一种机制,可以监视多 ...
- JAVA回调函数ANDROID中典型的回调地方
在计算机中回调函数是指通过函数参数传递到其他代码类的,某一块可执行代码的引用,这以设计允许了底层代码调用者在高层定义的子程序. 在JAVA里面我们使用接口的方式来实现函数的回调. 回调的通俗就是:程序 ...
- VMware vSphere 6 Enterprise Plus License
Product: VMware vSphere 6 Enterprise Plus Licensed for 2 physical CPUs (unlimited cores per CPU) Lic ...
- Linux方面收藏的一点儿资料
初来乍到,也算是第一次写技术类相关的博客,就分享几篇收藏的Linux相关的资料吧,希望可以给需要的人一点帮助. 1.<高级Bash脚本编程指南>:该网站详细讲解了Bash Shell编程的 ...
- C8051F学习笔记:单片机的驱动能力
学习51单片机的时候我们就知道51单片机的I/O口的特点:P0口没有弱上拉,所以做地址线时不用上拉,但输出“1”时就要加上拉电阻,不然输出电平到不了高电平,P1~P3则不存在这个问题,每个输出管脚都有 ...
- java I/O之装饰者模式
装饰者: Decorator模式(别名Wrapper):动态将职责附加到对象上,若要扩展功能,装饰者提供了比继承更具弹性的代替方案. 装饰者模式意图: 动态的给一个对象添加额外的职责.Decorato ...
- JVM基础和调优(一)
最近的项目中,出现了内存和性能的问题,需要优化,所以趁着这个机会,把自己关于java虚拟机的东整理一下,不对的地方,欢迎指出. 数据类型,因为在java的优化的过程中,检测到的数据类型一般比较的基础, ...
- Thinkphp 3.2 中词分词 加权搜索
原文地址:http://www.cnblogs.com/kekukele/p/4544349.html 前段时间,利用业余时间做了一个磁力搜索的网站Btdog,其中使用到了简单的中文分词与加权搜索,在 ...
- POJ1845 数论 二分快速取余
大致题意: 求A^B的所有约数(即因子)之和,并对其取模 9901再输出. 解题思路: 应用定理主要有三个: (1) 整数的唯一分解定理: 任意正整数都有且只有一种方式写出其素因子的乘积表达式. ...
- 第29讲 UI组件之 ListView与 BaseAdapter,SimpleAdapter
第29讲 UI组件之 ListView与 BaseAdapter,SimpleAdapter 1.BaseAdapter BaseAdapter是Android应用程序中经常用到的基础数据适配器,它的 ...