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空心圆
CSS代码:改变border的大小控制空心的大小 div { width: 100px; height: 100px; background: #ffffff; border-radius: 50%; ...
- 用css实现一个空心圆,并始终放置在浏览器窗口左下角
用css实现一个空心圆,并始终放置在浏览器窗口左下角 div{ position:fixed; bottom:0; ...
- Div+Css制作圆
Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...
- css画圆
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- android shap画圆(空心圆、实心圆)
实心圆: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" ...
- iOS空心圆下载进度指示器控件
self.layer = [CAShapeLayer layer]; self.layer.frame = CGRectMake(, , , ); self.layer.position = self ...
- android的布局 (如何实现空心圆效果的布局)
layer-list : 简单来说layer-list就是图层列表的意思,是用来创建LayerDrawable的,LayerDrawable是DrawableResource的一种,所以,layer- ...
- CSS知识总结(七)
CSS常用样式 5.背景样式 1)背景颜色 background-color : transparent | color 常用值:①英文单词,②十六进制,③RGB或RGBA 另外,还有一种是 渐变色彩 ...
- CSS 基础篇、绝对有你想要
本章内容: 简介 CSS 定义 四种引入方式 样式应用的顺序 选择器(Selector) * 通用元素选择器 标签选择器 class 类选择器 # ID选择器 , 多元素选择器 后代元素选择器 > ...
随机推荐
- Spring Boot教程(三十二)多数据源配置与使用
之前在介绍使用JdbcTemplate和Spring-data-jpa时,都使用了单数据源.在单数据源的情况下,Spring Boot的配置非常简单,只需要在application.propertie ...
- 查看线程的cpu占用率
1) top -H -p 进程pid 查看线程的线程ID与CPU占用情况.或者使用 ps -eLo pid,lwp,pcpu | grep 进程pid2) pstack ...
- AES加密算法在Linux下出现随机加密结果
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 查准率(precision)和召回率(recall)
1.定义 查准率(precision):预测患有癌症且预测正确的人数 / 预测有多少人患有癌症 召回率(recall):预测患有癌症且预测正确的人数 / 实际有多少人患有癌症 2.关系 他俩的关系如下 ...
- Linux高级调试与优化——Address Sanitizer
Address Sanitizer ASAN最早可以追溯到 LLVM 的 sanitizers项目(https://github.com/google/sanitizers),这个项目包含了Addre ...
- shell编程常用命令
Linux中常用的命令 #nl filename 使用nl命令打印文件内容并显示行号 #sed '/nw/,$d' filename 使用sed命令删除匹配nw至最后一行的内容 ...
- mysql数据库简单补充
1.只有拥有特定权限的用户才能执行特定的操作.就好像我们在现实生活中,一般没有权利进入军事禁区,除非我们被某个很有权利并且可以指定其他人进入军事基地的人赋予了进入军事禁区的权利. 命令: GRANT ...
- Object 源码阅读
Object 源码阅读 /** * Object 类是类继承结构的根类,每一个类型都以 Object 作为其父类,包括数组. */ public class Object { private stat ...
- Error-ASP.NET:The Value of property CloneFrom can not be empty string!
ylbtech-Error-ASP.NET:The Value of property CloneFrom can not be empty string! 1.返回顶部 1. “/”应用程序中的服务 ...
- MyBatis如何传入多个参数
一.单个参数 mapper public List<Test> getTestList(String id); xml <select id = "getTestList& ...