html頁面的遮罩層以及提示載入中
在寫網站時 經常出現載入中,遇到載入遮罩層的頁面。
這是我自己寫的一個遮罩層頁面,記錄一下,以便檢視。
如圖:
HTML 原始碼
//載入的gif圖片和提示文字
<div class="liadloging">
<div class="ldl_Conten">
<img src="../images/loading-lo.gif"/>
<p>載入中請稍後......</p>
</div>
</div>
<!--灰色遮罩層 begin-->
<div class="floatLayer"></div>
<!--灰色遮罩層 end-->
CSS 樣式
/*遮罩層 begin 2016-6-14 13:22:20*/
.floatLayer{ width:100%; height:100%; position:fixed; background:#000; z-index:9990; top:0px; left:0px;filter:alpha(Opacity=50);-moz-opacity:0.50;opacity: 0.50;}
.liadloging{ width:100%; height:auto; position:absolute; top:45%; left:auto; z-index:9995; }
.ldl_Conten{ width:500px; height:100px; line-height:100px; overflow:hidden; text-align:center; }
.ldl_Conten img{ width:60px; height:20px; line-height:100px;display:block; float:left; margin:39px 5px; background-size:60px 20px; filter:chroma(color=#ffffff);}
.ldl_Conten p{ width:auto; height:auto; font-size:20px; height:100px; line-height:100px; color:#000; display:block; float:left;}
/*遮罩層 begin*/
想要學習更多的載入樣式 清楚看網站:http://codepen.io/search/pens?q=load&limit=all&type=type-pens 裡面有很多的例項 可以多看看