画像を使わないでシンプルな枠を作るXHTML+CSS＃２～日刊にしこり－埼玉版

画像を使わないでシンプルな枠を作るXHTML+CSS＃２

投稿者:てつを投稿日時:2007/11/30 15:35:10

画像を使わないでシンプルな枠を作るXHTML+CSS
前のエントリーを改造してより良く見せるシンプルな枠をご紹介します。

1 画像を使わないでシンプルな枠を作るXHTML+CSS: div.nsflame {border:1px solid #000;}
div.nsflame dl {padding:5px; margin:0; display:block; background:#444;
border-top:1px solid #999;
border-right:1px solid #393939;
border-bottom:1px solid #393939;
border-left:1px solid #999;
}
div.nsflame dl dt {padding:0 0 5px 0; margin:0; display:block; color:#fff;}
div.nsflame dl dd {padding:0; margin:0; display:block; background:#fff;
border-top:1px solid #aaa;
border-right:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #aaa;
}
div.nsflame dl dd span {padding:10px; margin:0; display:block; background:#fff;
border-top:1px solid #777;
border-right:0;
border-bottom:0;
border-left:1px solid #777;
}
div.nsflame dl dt span.fig {padding:1px 2px; color:#fff; background:#c00; font:bold 9px Verdana;}