コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS パーフェクト DIV+CSS レイアウト_html/css_WEB-ITnose

CSS パーフェクト DIV+CSS レイアウト_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:32:56
オリジナル
1045 人が閲覧しました

-- コツは、まず、大きい DIV の CSS スタイルで境界線を 1 ピクセルの青で実線に設定し、全体のレイアウトを調整した後に削除することです

1. 最初に最も外側のフレームを取得します

コードを表示します 

1 <div id="outterDiv">2 3 </div>
ログイン後にコピー

2. すぐにCSSを追加

コードを表示

1 <style type="text/css">2 3 #outterDiv{ width:600px; }4 5 </style>
ログイン後にコピー

3. レイアウトの左右の構造を分析

コードを表示

1 <div class="InnerDiv">2 3 </div>4 5 <div class="InnerDiv">6 7 </div>
ログイン後にコピー

CSSを追加

れーれー

5 . left-right-bottom 構造の場合

コードを表示 

1 .InnerDiv { width:49%; float:left; overflow:hidden; margin-left:5px; display:inline; }
ログイン後にコピー

6. CSS を追加

コードを表示 

 1 <div class="LeftDiv"> 2  3 </div> 4  5 <div class="RightDiv"> 6  7 </div> 8  9 <div class="DownDiv">10 11 </div>
ログイン後にコピー

7. 左側の部分は上下 2 つの DIV に分かれています

コードを表示

rrリー

8.CSSを追加

コードを表示

1 .LeftDiv { width:200px; float:left; margin-left:17px;margin-top:10px; display:inline; }2 .RightDiv { width:40px; float:left; display:inline; margin-left:5px; margin-top:100px; }3 .DownDiv { width:200px; text-align:center;margin-bottom:8px; }
ログイン後にコピー

9. 各DIVコンテンツを入力

10. すべてのコード

コードを表示

<div class="NameDiv"></div><div class="SortDiv"></div>
ログイン後にコピー











関連ラベル：
CSS 完美DIV+CSS布局
ソース：php.cn
前の記事：CSS Div 半透明効果_html/css_WEB-ITnose 次の記事：CSS+DIV Webページ再構成技術の基礎_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSSのグリッドレイアウトのボックスプロトコル 最初の 2 つのボックスを最大幅で上に移動させ、2 番目のボックスを最大幅で下に移動させたいのです。コードは次のとおりです。これは CSS コードです: /*StartServic...
から 2024-04-03 16:36:04
0
2
334
HTML <pre><code> タグをラップせずにオーバーフローしようとすると、フレックススペースが壊れる GitHub などで見られるようなスタイル付きのコード ブロックを作成するために、CSS をプリコード セレクターに適用します。レイアウトに Flexbox を使用しており、「bo...
から 2024-04-01 12:22:06
0
1
296
CSSでグリッド線を表示できますか? CSSグリッドレイアウトを学び始めました。理想的な世界では、複数のグリッド ボックスを含む div を設定し、その中に要素を正確に配置し、必要に応じてオーバーレイを提供できるように...
から 2024-03-31 20:38:21
0
2
395
React.js CSS ウィンドウの幅 Reactを使用してレスポンシブWebサイトを開発しています。スタイル設定には CSS スタイルシートを使用します。応答部分は @media クエリを使用して CSS で実装されま...
から 2024-03-31 16:31:23
0
1
386
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート