admin管理员组文章数量:1611206
这是个很小的点:只是为了方便使用
/*方式一*/
.main_center{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto; /*auto属性,相当于移到中心点*/
}
/*方式二*/
.main_center{
position: absolute;
left:0;
right:0;
transform:translate(-50%,-50%); /*浏览器自动计算(css3属性)*/
}
/*方式三*/
.main_center{
position:absolute;
left:0;
top:0;
margin: -50% -50%; /*此处可替换为:margin: -50%*/
}
css div背景图片自适应屏幕大小并按比例缩放
<div style="height: 500px;width: 100%;background: url(fff.jpg) no-repeat center center ; background-size: 100%;"></div>
JS监听窗口大小变化
window.onresize=function(){
var offsetWid = document.documentElement.clientWidth;
if(offsetWid<800){
document.getElementById("cyberexdesc").style.width="60%";
}
if(offsetWid>800){
document.getElementById("cyberexdesc").style.width="30%";
}
}
JS动态改变css样式
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>全局样式</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="row" style="width:100%;background-color:greenyellow;">
<div class="col-md-6" >
<div id="footerbl" style="float: right;">
<a target="_blank" href="" style="text-decoration:none;height:20px;line-height:20px;">
<img src="http://www.beian.gov/portal/download?token=6ec78cc1-9222-4801-853f-c80d8e2b2cd4" />
<font style="color:#939393;">粤公网安备 44010402001763号</font >
</a>
</div>
</div>
<div class="col-md-6" >
<div id="footerbr" style="float: left">
<font style="color:#939393;width:100px;">粤ICP备18155667号</font >
</div>
</div>
</div>
<script>
window.onload=function(){
var fbl = document.getElementById('footerbl')
var fbr = document.getElementById('footerbr');
var cw = document.documentElement.clientWidth;
var ch = document.documentElement.clientHeight;
if(ch>=cw){
fbl.style.cssText = "text-align:center";
fbr.style.cssText = "text-align:center";
}else{
fbl.style.cssText = "float: right;";
fbr.style.cssText = "float: left";
}
}
window.onresize=function(){
var fbl = document.getElementById('footerbl')
var fbr = document.getElementById('footerbr');
var cw = document.documentElement.clientWidth;
var ch = document.documentElement.clientHeight;
if(ch>=cw){
fbl.style.cssText = "text-align:center";
fbr.style.cssText = "text-align:center";
}else{
fbl.style.cssText = "float: right;";
fbr.style.cssText = "float: left";
}
}
</script>
</body>
</html>
监听浏览器滚动条距离顶部变化
<div id="ipv6" style="border-radius: 5px;background-color: dodgerblue;display: inline-block;padding: 8px;position: absolute;top: 20px;left: 20px;">
<font color="white" style="font-weight: 600;font-family:'新宋体';">网址支持IPV6</font>
</div>
<div style="height: 2000px;"></div>
<script>
window.onscroll= function(){
var t = document.documentElement.scrollTop||document.body.scrollTop;
if(t>10){
var ipv6 = document.getElementById('ipv6');
ipv6.style.display = 'none';
}else{
var ipv6 = document.getElementById('ipv6');
ipv6.style.display = 'inline-block';
}
}
</script>
版权声明:本文标题:css 定位position: absolute居中 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728605438a1165389.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论