table里css画空心圆,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 值

在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代码:改变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画圆

android shap画圆(空心圆、实心圆)

实心圆: <?xml version="1.0" encoding="utf-8"?>

oc 正则图片&lt&semi;img &sol;&gt&semi; 标签

-(NSString *)getImageAttributeValue:(NSString *)content attributeKey:(NSString *)key { NSString *reg ...

小猪Android越来越方式 Day 5 - part 2

小猪的Android入门之路 Day 5 - part 2 Activity片段:Fragment(碎片)                                  ------转载请注明出处 ...

mongoDB之数据类型

mongoDB之数据类型 Object  ID :文档的id String: 字符串,最常用,必须是utf-8 Boolean:布尔值,true 或者false Integer:整数 Double:浮 ...

Python爬虫——request实例：爬取网易云音乐华语男歌手top10歌曲

requests是python的一个HTTP客户端库,跟urllib,urllib2类似,但比那两个要简洁的多,至于request库的用法, 推荐一篇不错的博文:https://cuiqingcai. ...

Spring众多jar包的特点&comma;及Spring jar包官网下载方法

下面给大家说说spring众多jar包的特点吧,无论对于初学spring的新手,还是spring高手,这篇文章都会给大家带来知识上的收获,如果你已经十分熟悉本文内容就当做一次温故知新吧.spring. ...

kafka各个版本特点介绍和总结

kafka各个版本特点介绍和总结 1.1 kafka的功能特点: 分布式消息队列 消息队列的数据模型, 形成流式数据. 提供Pub/Sub方式的海量消息处理.以高容错的方式存储海量数据流.保证数据流的 ...

javascript公有静态成员

公共静态成员在javascript中并没有特殊语法来表示静态成员.但是可以通过使用构造函数向其添加属性这种方式. //构造函数 var Gadget = function(){}; //静态方法 Ga ...

ZROI &num;365&period; 【2018普转提day18专题】嘤嘤嘤嘤

ZROI #365. [2018普转提day18专题]嘤嘤嘤嘤 直接放代码 具体做法见注释 #include #include #inclu ...

leetcode 4&period;两个排序数组的中位数

题目: 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 . 请找出这两个有序数组的中位数.要求算法的时间复杂度为 O(log (m+n)) . 你可以假设 nums1 和 nums ...