建站學院(LieHuo.Net)心得技巧 今天介紹一篇利用CSS+DIV控制彈出窗口樣式和大小的方法,主要通過在頁面中加入DIV層,并在頁面中控制層的位置及顯示和隱藏來實現。在介紹該方法前,我們先來認識div的兩個屬性。
1、id :<div>標志中的id也可以說是它的名字,常和CSS樣式結合,實現對網頁中任何元素的控制。
2.style :用于設置<div>標志中的元素的樣式。其value值為CSS屬性值。其中比較常用的CSS屬性是position。該屬性有兩個可選值:relative和absolute。relative表示<div>標志的位置是相對于它所在的窗口的,absolute表示<div>標志的位置是絕對的。
style屬性的另一個常用的屬性是控制<div>顯示的display屬性。將display設置為block,<div>中的所有元素都將會被當作一個單獨的塊放入頁面中。將display設置為none,<div>元素就像從頁面中被移走一樣,它下面的所有元素會被自動跟上填充。將display設置為inline,將使其行為和inline一樣,即使是普通的塊元素它也會被組合成像<span>那樣的輸出流輸出到頁面上。
注意:單獨使用<div>而不配合CSS標志的時候,它在網頁中的效果和<p>是一樣的。
示例:
說明:點擊一連接后,顯示一登陸界面。
<div style="position:absolute;width:240px;height:139px;display:none"> <table><tr><td>用戶名<input type="text" ></td></tr> …… </table></div> |
在頁面中加入一個用戶登陸的超鏈接
<a href="#" >建站學院用戶登陸</a> |
編寫open(login)的js函數
說明:document.body.clientWidth為網頁可見區域寬。
function open(divID) |