ホームページ >ウェブフロントエンド >htmlチュートリアル >div+css レイアウトでのパディングとマージンの使用、および適応型 100% width_html/css_WEB-ITnose
全体的なレンダリング:
あまり言うことはありません。ご自身の目で確認してください。役立つと思います
< div class ="cBody" > > 黒 背景部分の幅は 1002px で、両側の赤い枠線の幅は 1004px です。 div > " > < div class =" BabyContent" >
"Babyleft" >
"lefttop" < div class "lefttop" > div >
"leftbg" >
" =" LbgTop " > div >
;/ div >
div >
< div class ="ベビーセンター" >< / div >
クラス ="ベイビーライト" > ; / div >
以下はCSSスタイル部分です
ボディ { マージン : 0 ; 背景 : #fff }
div { カラー : #333 ; verdana","arial", "sans-serif","宋体"; font-size: 12px; }
.Top_Bg { 幅: 1002px; 背景色: #000000 ; テキスト整列: 0 自動 ;
幅: 1004 ピクセル ; /* 左部分 */.Babyleft { 幅 : 202px ; float : left ; }
.lefttop { 幅 : 202px ; 背景 : url(http://www.imythu.cn/images/BLeftTop.jpg) ) リピートなし : 非表示 ;.leftbg { 幅 : url(http://www.imythu.cn/images/BLeftBg.jpg) パディング : 1px 4px 2px 2px ;
.LbgTop { 幅 : 100 % ; 背景 : URL(http://www.imythu.cn/images/warror.gif) 繰り返しなし 3px 5px ; 高さ : 20px } { マージン上 : 10 ピクセル; マージン左 : 5 ピクセル; ボーダー下 : 1 ピクセル #ccc ; パディング左 : 10 ピクセル5px; フォントサイズ: 16px; 位置: 静的: 継承;幅: 202px; 背景: url(http://www.imythu.cn/ BLeftButtom.jpg) オーバーフロー : 非表示 ;
/* 左部分 */ .Babycenter { 幅 : 左 : 2px ; 境界線 : 1px ;.Babyright { 幅 : 466px ; フロート : 左マージン : 2px ; 実線 1px #ccc ;