ホームページ > ウェブフロントエンド > htmlチュートリアル > 1 行 3 列の DIV コードからなる最も単純なレイアウトである DIV+CSS を学びましょう!_html/css_WEB-ITnose

1 行 3 列の DIV コードからなる最も単純なレイアウトである DIV+CSS を学びましょう!_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:28:28
オリジナル
1587 人が閲覧しました

CSS代码如下:

body{
text-align:center;
margin:0px;
padding:0px;

}
#father
{
position:relative;
width:750 px;
text-align :center;
}
#banner{height:96px;background-color:#999;text-align:left; padding:0px;margin:0px;}
#b-left{width:159px;margin:0px;padding:0px;float:left;}
#b-center{margin:0px;float:left;}
#b -right{
text-align:left;
marign:0px;
padding:0px;
width:108px;
background-color:#00ffff;
height:96px;
float:right;
}
HTML代码如下:

现在总结一下:

一行三列布局有以下几アイデア:

第一都が成した布局、各ブロックと周囲の距離を設定する

2 番目の方法は、嵌め込み方式を利用して、いずれか 2 つを先に 1 つにし、その後、さらに他のものと 3 つ目を立ち上げる方法です。直掴三块都是分开设的,好像也不问题!呵呵!

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート