一般的な div+css レイアウトの例をいくつかまとめます-CSSチュートリアル-php.cn

一般的な div+css レイアウトの例をいくつかまとめます

伊谢尔伦

リリース： 2017-06-03 17:21:45

オリジナル

7983 人が閲覧しました

フロントエンド HTML と CSS テクノロジーを学ぶ上で最も重要なことは実践することです。友達がどれだけ多くのチュートリアル、ビデオコース、関連書籍を読んでも、自分で実践することによってのみこれらについて新たに理解できるようになります。他人のコードはひと目で理解できるのに自分では書き始められない、専門的な知識や問題が理解できない、いくら考えてもわからない、など。。この記事では、一般的な div+css のさまざまなレイアウト方法と実践的なスキルを友人に紹介します。

DIV + CSS レイアウト関連コンテンツ

DIV+CSS レイアウトスタイルの詳細な説明

a W3C 標準に準拠しており、Microsoft およびその他の企業は W3C サポーターです。

b Web ページのレイアウト、フォント、色、背景、その他のグラフィックスやテキスト効果をより正確に制御でき、調整がより便利になり、多くの Web サイトで p+CSS フレームワークモードが使用されていることがさらに証明されています。 p+CSS が一般的な傾向です

c フォーマットと構造を分離すると、チーム開発では、フォーマットの再利用や Web ページの変更と保守が容易になり、相互依存が軽減されます。

d CSS の大きな利点は、導入部分のコードが実稼働ボリュームで小さくなり、ダウンロードが簡単になることです。高速で、帯域幅を大幅に節約でき、周知のとおり、検索エンジンはクリーンなコードを好みます。

e CSS スタイルシートを使用すると、サイト上のすべての Web ページが同じ CSS ファイルを参照できるため、多くの Web ページを同時に更新できます。

Html+CSS レイアウトスキルのコード共有

誰もが異なる趣味を持っていることを誰もが知っています。甘いものを食べるのが好きな人もいれば、辛い食べ物を食べるのが好きな人もいますし、セロリを食べるのが好きではない人もいます。人々は羊肉などを食べるのが好きではありません。 CSS の一部の要素にも同じことが当てはまります。中には牛乳だけに興味がある要素や、ナッツとゼリーだけを食べるのが好きで牛乳が嫌いな要素もあります。そして、バーティカルアラインはゼリーだけを食べるのが好きで、ゼリーがないと癇癪を起こしてあなたを無視します。私はこれを「ゼリー依存要素」と呼び、「インラインブロック依存要素」とも呼びます。つまり、1 つの要素だけがインラインまたはインラインブロック (テーブルセルはインラインブロックレベルとしても理解できます) レベルに属します。、その上のvertical-align属性が有効になります。

DIV+CSS レイアウトにおける適応型高さの解決策

固定のピクセルベースの設計方法から柔軟な相対的な設計方法に切り替えるのは簡単ではありません。しかし、正しく使用すれば、デザインを犠牲にすることなくアクセシビリティと使いやすさを向上させるための自然な選択となる可能性があります。

サイズが同じであれば、考慮すべき点が比較的少ないため、印刷された固定デザインを使用する方が簡単かもしれません。ただし、柔軟な設計アプローチを採用すれば、コンピューターのモニターとブラウザーを最大限に活用できます。

聖杯レイアウトの詳細説明とCSSレイアウトのダブルウィングレイアウト例

HTMLコードでは、まず中央の部分をコンテナの先頭に配置し、次に左、右に配置する必要があります

1) 3 つすべてを float:left 、position:relative に設定します (相対位置は後で使用するため)

2) 中央は幅を 100% に設定して線を塗りつぶします
3) この時点で、中央は線を占めるため、ドラッグする必要があります中央が位置する線の左端に左を置き、マージン -left:-100% を使用します
4) このとき、左は中央の左端の線に引き戻されますが、中央の左端をカバーします。真ん中のコンテンツを取り出すには、外側のコンテナにpadding: 0 210pxを追加します
5) 中央のコンテンツが取り出されますが、左側も取り出されるので、それを復元するには、相対位置指定 left:-210px を使用します。
6) 同様に、中央が位置する行の右端に右に引っ張るには、margin-left:- 210px、right:-210px を使用します

5

必見の CSS レイアウトのヒント共有

ページの左右の幅が狭くなった場合、左右のスクロールバーの不快なエクスペリエンスを回避するために、max-width を使用できます。ページが幅より小さい場合は自動的に縮小されます〜

要素にbox-sizing:border-boxを設定した後、幅を決めてからパディングとボーダーを設定すると幅は変わりません。コンテンツに合わせてグローバル境界線のサイズを設定できます。

6. CSS レイアウトは中央揃えで、左側が固定幅、右側が適応型です。

CSS ページレイアウトは Web フロントエンドによって開発されます。最も基本的なスキルであるこの記事では、ボックスレイアウト、カラムレイアウト、フレックスレイアウトなどを含む、いくつかの一般的なレイアウト方法を紹介します。この記事では、水平方向と垂直方向の中央揃え方法、左側に固定幅、右側に適応方法を示します。