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