<!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{ 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>