div完全純css自適應居中【兼容IE7+ Chrome FireFox 等】

新的博客文章將逐步轉移到我的新個人主頁:

http://blog.guaidm.com/shocky


當然主入口在這裏,點這裏纔有驚喜:



..從產品設計css一直做到linux運維的程序猿...  很多技術都是皮毛,各位見諒,只求和大家交流一點小技術,歡迎拍磚!..


1. 純CSS,完全無需JS,對JS程序猿來說一種解放!

2. IE7、8 下rgba屬性會失效,所以如果要做半透明要新加一個div,這個步驟我偷個懶就省了哈哈,重點是中間的div大笑

3. 對於彈出層,各位針對自己的情況設置z-index,這裏我沒有設置了

4. IE6沒有測試,抱歉= = 



DOM結構

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    
    <body>
        <p>
            fdsfsdfsadfsdafsdafdssad
        </p>
        <div class="pop-wrap">
            <table>
                <tr>
                    <td>
                        <div class="pop">
                            <p>
                                感覺如何?
                            </p>
                            <input type="button" value="確定" />
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

stye.css :

.pop-wrap{
	position: fixed;
	top: 0;
	background: rgba(0, 0, 0, .8);
	left: 0;
	width: 100%;
	height: 100%;
}

.pop-wrap table {
	height: 100%;
	width: 100%;
}

.pop-wrap td {
	width: 100%;
	height: 100%;
}

div.pop {
	margin: 0 auto;
	width: 200px;
	background: #ECECEC;
	padding: 20px;
	text-align:center;
}

div.pop p {
	font: 200 14px/20px Microsoft YaHei;
}

div.pop input {
	background: #FFFFFF;
	border: 1px solid #ADADAD;
	padding: 3px 10px; 
	border-radius : 2px;
	cursor: pointer;
}



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章