数日前、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はショッピングウェブサイトの商品の拡大鏡効果を実現します
目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...
1. ファイル削除コマンド:対応するディレクトリを検索します -mtime + 日数 -name &...
必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...
HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 •HTML...
目次1. 使用方法2. 出力結果1.id 2.選択タイプ3.表4.パーティション5.タイプ6.可能な...
目次js の1. グローバルガードを登録する2. Vuex 状態管理グローバルキャッシュルート3. ...
>>>>>Ubuntu のインストールと設定の SSH チュートリア...
目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...
1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...
序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...
同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...
目次序文原因を発見するカスタムフィルタリングルール要約する序文インターネットの急速な発展に伴い、情報...
この質問は、Nuggets のメッセージから生まれました。友人が、次のコードの高さ遷移アニメーション...
【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...
この記事では、例を使用して、MySQL サーバーのスレッド数を表示する方法について説明します。ご参考...