Clever Geek Handbook

列レイアウト

列レイアウトをレイアウトするには多くの方法があります。 特定の方法の使用について発火したホリバー中に、すでに複数の鼻が折れています。 すべてが非常に明確で理解可能であるように思えますが、それでも多くの困難が生じます。 私は共通の大義への貢献に貢献したいので、次の長所と短所がある別の方法を作成することになった実験に比較的時間を費やしませんでした。



長所


短所


建設的な批判は大歓迎です。 どこかに似たようなものを見たことがあるなら、証明しましょう。 子供の頃から、自転車を発明するのが大好きでした。 サンプルを改善するためのヒントも歓迎します。 私たちは高いレベルに集まります。 時間があります-私はcsstemplater.comの人たちのようなレイアウトジェネレーターのようなことをします。そのツールは時々使用し、あらゆる点で推奨します。 記事が詳細に見える場合は、下にスクロールして、この手法を使用して作成された例へのリンクをいくつか投稿しました。 それでは、ビジネスに取り掛かりましょう...



ステージ1：ウィンドウの下部に付着するフッター



私たちの仕事では、フッターの貼り付けは最も一般的なトピックの1つです。 彼には何が必要ですか？

この場合のマークアップは次のようになります。

< div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .



  1. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .



  2. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .



  3. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .



  4. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .



  5. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .



  7. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .



  8. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .



  9. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .



< div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .





そして、それに応じて、彼女のためのCSS：





  1. html、body {
  2. 最小高さ：100％！重要;
  3. 最小高さ：自動;
  4. 高さ：100％;
  5. ボーダー：なし;
  6. }
  8. body {
  9. マージン：0;
  10. パディング：0;
  11. }
  13. .wrapper {
  14. ディスプレイ：ブロック;
  15. 位置：相対;
  16. 最小高さ：100％;
  17. 高さ：auto！重要;
  18. 高さ：100％;
  19. 幅：100％;
  20. 最小幅：800px;
  21. 背景：黄色;
  22. }
  23. .container {
  24. ディスプレイ：ブロック;
  25. 高さ：1％;
  26. パディング：0 0 50px 0;
  27. }
  28. .footer {
  29. マージン：-50px 0 0 0;
  30. 高さ：50px;
  31. 背景：＃BFF08E;
  32. 位置：相対;
  33. }
*このソースコードは、 ソースコードハイライターで強調表示されました。


ここではすべてがはっきりしていると思うので、深く掘り下げません。 .containerブロックの下部のパディングと.footerブロックのマイナスの上部マージンに注意を払うことができます。 マイナスシフトでは、フッターを曲げてコンテナの上に合わせます。 コンテンツブロックのパディングは、コンテンツがフッターの下でクロールされず、プッシュされるという事実に影響します。

また、ドキュメントの本体を100％の高さになるように引き伸ばします。 いくつかのプロパティ-オプションで指定された背景など。



ステージ2：次のステップの検討



このステップの後、通常、.wrapperブロックにページヘッダーを作成します。





  1. .header {
  2. 位置：相対;
  3. 幅：100％;
  4. 高さ：50px;
  5. 背景：シアン;
  6. }
*このソースコードは、 ソースコードハイライターで強調表示されました。


そして、スピーカーの高さを同じにします。 私は多くのオプションを試しました。 考えられるオプションと考えられないオプションをすべて調べた後、列がドキュメントの100％を占めて占有するためには、2つのブロックが列の作成に関係しているときにオプションを使用するのが論理的であるという結論に達しました。 最初のブロックは絶対位置にあり、幅と高さは100％に固定されています。2番目のブロックは絶対位置にあるブロックに対して相対的に配置され、その上に重ねられます。

したがって、絶対ボックスを追加する必要があります。

私のレイアウトから例を挙げます：





  1. < div class = "wrapper" >
  2. < div class = "column-l" >
  3. </ div >
  4. < div class = "column-r" >
  5. </ div >
  6. < div class = "column-m" >
  7. </ div >
  8. < div class = "header" >
  9. 帽子
  10. </ div >
  11. < div class = "container" >
  12. < div class = "column-l" >
  13. 最初の列
  14. </ div >
  15. < div class = "column-r" >
  16. 2列目
  17. </ div >
  18. < div class = "content" >
  19. 内容
  20. </ div >
  21. < div class = "clear" >
  22. </ div >
  23. </ div >
  24. </ div >
  25. < div class = "footer" >
  26. クッション付きフッター
  27. </ div >
*このソースコードは、 ソースコードハイライターで強調表示されました。


記事をこれ以上混乱させないために、 このファイルをダウンロードできるリンクを提供します 。

コメントに喜んであなたが持っているすべての質問に答えます。



結論：スタジオでの例！



また、このシステムによって収集されたレイアウトの例をいくつか示します。

一般に、好きなだけの組み合わせがあります。 z-indexが絶対位置のブロックと位置の両方で機能することを知らない人に思い出させるか、伝えます。



これらのサンプルはすべて1つのアーカイブ（ 11 kb ）でダウンロードできます



私が誰かを助けたことを願っています）。 混乱してすみません。

ご清聴ありがとうございました。


More articles:


All Articles