1. 程式人生 > >【CSS】一種相容純粹CSS的IE6的面板

【CSS】一種相容純粹CSS的IE6的面板

面板這東西,隨著前端框架的逐漸流行,已經大量地佔據網頁封面了。

其實這東西可以用純粹CSS的方式寫出來了。

比如如下面板:


其程式碼如下:

<!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>
其構造很簡單的,一個為灰色外框的div裡面鑲嵌兩個div。一個是面板標題的div,這個div無須設定高度,讓其自適應。關鍵是背景顏色,設定為非常流行的柔和藍色#06F。另一個內容的div,無須設定任何東西。