在網(wǎng)頁設(shè)計中,使用合適的樣式可以使頁面呈現(xiàn)出更美觀、舒適的視覺效果。而在某些情況下,我們需要實現(xiàn)一些特殊的效果,例如模仿窗體的樣式。下面我們就來介紹一下如何使用CSS實現(xiàn)這種效果。
/*定義窗體框架*/ .window{ width: 500px; height: 300px; position: fixed; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px; background-color: #FFFFFF; border: 2px solid #000000; box-shadow: 5px 5px 10px #444444; } /*定義窗體標題*/ .title{ width: 100%; height: 30px; background-color: #000000; color: #FFFFFF; text-align: center; font-size: 14px; line-height: 30px; } /*定義窗體內(nèi)容*/ .content{ width: 100%; height: 220px; background-color: #FFFFFF; padding: 10px; overflow-y: auto; overflow-x: hidden; } /*定義窗體底部按鈕*/ .bottom{ width: 100%; height: 50px; background-color: #F2F2F2; position: absolute; bottom: 0; left: 0; border-top: 1px solid #CCCCCC; } /*定義按鈕樣式*/ .button{ width: 80px; height: 30px; background-color: #000000; color: #FFFFFF; text-align: center; line-height: 30px; margin: 10px; cursor: pointer; float: right; }
上述代碼中,我們定義了一個名為window的class樣式,用來實現(xiàn)窗體框架的效果。同時,我們也定義了窗體標題、內(nèi)容、底部按鈕的樣式。其中,底部按鈕使用了.button樣式,并定義了鼠標懸停后的效果。使用上述代碼可以實現(xiàn)一個基本的模仿窗體的CSS樣式。