【CSS】一種相容純粹CSS的IE6的面板
阿新 • • 發佈:2019-01-08
面板這東西,隨著前端框架的逐漸流行,已經大量地佔據網頁封面了。
其實這東西可以用純粹CSS的方式寫出來了。
比如如下面板:
其程式碼如下:
其構造很簡單的,一個為灰色外框的div裡面鑲嵌兩個div。一個是面板標題的div,這個div無須設定高度,讓其自適應。關鍵是背景顏色,設定為非常流行的柔和藍色#06F。另一個內容的div,無須設定任何東西。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>panel</title> </head> <body> <div style="border:1px solid #CCC; height:100px;"> <div style="background:#06F;"> <b style="color:#FFF">面板標題</b> </div> <div> 面板內容…… </div> </div> </body> </html>