<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百分比&悬浮栏</title>
<!-- 几乎所有的宽度都可以用百分比来表示!! border,line-height不能-->
<style type="text/css">
.box{
width: 90%;
background-color: gray;
border: 0px solid #000;
margin-left:-45%;
/* margin数值相当于width数值的负一半 */
font-size: 16px;
/* 行高默认为*/
position: fixed;
top: 0%;
left: 50%;
/* left数值永远等于50%(想要居中的话)*/
text-align: center;
color: #fff;
/*
或者直接省略margin.
left=(100%-width百分比)除以2
*/
}
.text{
width: 30%;
margin: 2% auto 2%;
font-weight: bold;
background-color: lime;
text-align: center;
}
/* .pop_windows{
width: 60%;
height: 50%;
margin-left: -30%;
background-color: #ffff90;
border: 2px solid #000f;
text-align: center;
position: fixed;
top: 25%;
left: 50%;
}*/
.pop_con{
display: block;
/*display: none;*/
}
.pop_windows{
width: 60%;
height: 50%;
/*margin-left: -30%;*/
background-color: #ffff90;
border: 2px solid #000f;
text-align: center;
position: fixed;
top: 25%;
left: 20%;
z-index: 999;
}
.pop_windows h3{
line-height: 250px;
}
.pop_mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.3;
background-color: black;
z-index: 998;
}
</style>
</head>
<body>
<div class="box">悬浮栏</div>
<div class="pop_con">
<div class="pop_windows">
<h3><a href="#">点击</a></h3>
</div>
<div class="pop_mask"></div>
</div>
<div class="text">
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="text">
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="text">
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="text">
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="text">
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
<em>asdfa</em>
<br>
<br>
<br>
<br>
<br>
</div>
</body>
</html>
浙公网安备 33010602011771号