div+cssのレイアウトで注意すべき点

最初の注意点: セレクター (ラベル、クラス、ID) の使用

3 つのセレクターの中で、ID (#) が最も優先され、一意の要素は ID 名に基づいて除外されます

;

次のように入力します:

#menu{ width:1200px; height:45px; background:#90F}
<p id="menu"></p>

次に、class(.) の優先順位が高く、一意の要素は ID 名に基づいて除外されます。

次のように入力します。ラベルの優先順位は最も低く、ラベル名の要素に基づいて選択されます。

次のように入力します:

.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}
<p class="text"></p>

2 番目のメモ: 外側マージン、内側マージン パディング、およびフロー フロートの使用

外側マージンと内側マージン パディングの使用は、次のようになります。境界線を調整するには、上、右、下、左

に従って 4 つの境界線を時計回りに調整します。特殊な用途: マージンは通常、フロー フロートと組み合わせて使用​​されます。操作対象のオブジェクトの方向を指定します (左は左に流れ、右は右に流れます) フロー)、操作されるオブジェクトは次のようにこの方向にレイアウトされます

(ナビゲーション バーの生成):

p{text-align:center; vertical-align:middle; line-height:100px}
<p>微软雅黑</p>

さらに、パディング: パディングが追加されると、それに応じて要素が大きくなります。対応する高さ属性で調整する必要があります:

.text{ 
       width:200px; 
    height:45px; 
    float:left; 
    text-align:center; 
    line-height:45px; 
    vertical-align:middle
   }　　　　
.text:hover{ 
            background-color:#000; 
       color:#F00; 
      cursor:pointer
      }
　　<p id="menu">
　　　　<p class="text">首页</p>    　　　　
　　　　<p class="text">产品介绍</p>    　　　　
　　　　<p class="text">产品图片</p>    　　　　
　　　　<p class="text">产品参数</p>    　　　　
　　　　<p class="text">关于服务</p>    　　　　
　　　　<p class="text">联系我们</p>　　
　　</p>

3 番目の注意事項: 階層型 z-index を使用するための条件

を使用する場合階層 Z インデックスは、position 属性と組み合わせて調整する必要があります。position 属性の設定が欠落している場合、表示効果はありません。

次のように入力します:

<p style="width:100px; height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px"></p>（这里height由100px调整为80px，加padding效果）

以上がdiv+cssのレイアウトで注意すべき点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。