数日前、CSS で 3 列レイアウトを書いていたときに、突然この方法を思いつきました。このアイデアはちょっとクレイジーだと思います。何か間違っている点があれば、遠慮なく指摘してください。 3 列のレイアウトを記述する必要がある場合、通常は次の DIV レイアウトを使用します。 ![]() このようなネストされたメソッドを使用すると、コード エラーの可能性を大幅に減らすことができますが、同時に、このようなレイアウトは少し複雑で、その後のメンテナンスには少し不便です。ナビゲーションをレイアウトする場合、レイアウトに <ul> リストを使用する方法がよく使用されます。ナビゲーションは、複数列レイアウトとして説明できます。この場合、<ul> を使用してページの複数列レイアウトを実行することもできます。 ![]() <!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"> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <title>複数列レイアウトに UL を使用する</title> <スタイル タイプ="text/css"> * {マージン:0; パディング:0;} 体 { 幅:100%; 高さ:100%; 背景:#ddedfb; } #メインコンテンツ{ 幅:600ピクセル; マージン:10px 自動; } #ヘッダー、#フッター { 背景:#8AC7FA; 高さ:80px; クリア:両方; } #フッター{ クリア:両方; パディング上部:10px; } #コンテンツ { 高さ:300px; マージン:10px 自動; } #コンテンツul { リストスタイル:なし; 高さ:100%; } #コンテンツ ul li { 幅:150ピクセル; 高さ:100%; 背景:#8AC7FA; フロート:左; } #コンテンツ ul li#li2 { 幅:280ピクセル; マージン:0 10px; } #content ul li#li2 ul li { 幅:270px; 高さ:140px; マージン:5px; 背景:#0581F0; } </スタイル> </head> <本文> <div id=”メインコンテンツ”> <div id="header">これがヘッダーです</div> <div id=”コンテンツ”> <ul> <li>これは左側です</li> <li id=”li2″> <ul> <li>これは上部の真ん中です</li> <li>これは下中央部分です</li> </ul> </li> <li>こちらが右側です</li> </ul> </div> <div id="footer">これが一番下です</div> </div> </本文> </html> このコードはIE7とFF3では正常に表示されます。他のブラウザはテストされていません。より良い方法があれば、遠慮なく提案してください。 |
<<: Dockerは元のタグのイメージの再タグ付けと削除を実装します
>>: jsはショッピングウェブサイトの商品の拡大鏡効果を実現します
目次結合構文: 1. InnerJOIN: (内部結合) 2. LeftJOIN: (左結合) 3....
間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...
目次導入Intel CPUをサポートApple M1のサポートテスト導入このプロジェクトでは最近、P...
1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...
目次方法1 1. 構成とインストールの手順:方法2方法3要約する方法1 1. 構成とインストールの手...
目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...
1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...
問題の説明: 非同期リクエストの数が不確定な場合、数百の http リクエストが瞬時に発生したときに...
背景:最近、同社のプロジェクトは同時実行のプレッシャーに耐えられないようなので、最適化が差し迫ってい...
目次1. 索引1.1 コンセプト1.2 機能1.3 索引作成の原則1.3.1 ディスクアクセス回数を...
/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...
重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...
目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....
お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...
ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...