聖杯レイアウト概要_html/css_WEB-ITnose

聖杯レイアウトについては昔から聞いたことはありましたが、詳しくは理解していませんでしたが、最近あるプロジェクトでプロダクトページをお借りして初めて使いました。 Xinrenxinshi 社のこのレイアウト。そこで、時間をかけてすべての列レイアウト コードをテストしました。各コードは非常に単純ですが、レイアウト効果は完璧で、以前に使用した方法よりもはるかに使いやすかったです。この記事はその実装の概要であり、これまで私のようにこのテクノロジーに慣れていない開発者にこのテクノロジーをお勧めしたいと思っています:)

1. 2 つの実際的な要件から始めましょう。今年のプロジェクトはどちらも管理システムのプロジェクトで、この種のプロジェクトのインターフェイスの特徴は、基本的に左側のサイドバーにメニューが表示され、右側に Web ページの本文が表示される、またはメニューが表示されるというものです。上部のナビゲーション バーに、Web ページがナビゲーション バーの下に表示されます。私のプロジェクトはどちらも最初のタイプです:

プロジェクト 1:

プロジェクト 2:

プロジェクト 1 に取り組んでいるとき、ERP ソフトウェアに取り組んでいたときに、iframe を Web ページのメイン領域に配置しました。各メニューをクリックした後にページを表示する権限 このように、各メニューをクリックした後は外部ページは表示されず、メニュー領域内のみのスクロールが発生します。外部ページの上部ナビゲーション バーは変更されないため、ユーザーが操作するのに非常に便利です。このインターフェイスのレイアウトは、サイドバーと Web ページのメイン領域が固定配置されている限り、非常にシンプルです:

このプロジェクトは内部プロジェクトであるため、これを採用することは完全に可能ですインターフェイス構造 結局のところ、これは単なる管理システムであり、ユーザー エクスペリエンスをそれほど気にする必要はありません。最近プロジェクト 2 に取り組んでいたときは状況が異なりました。このプロジェクトは単なる管理システムではなく、ユーザーからのプラットフォーム ビジネスに参加するために提供される端末アプリケーションです。経験の観点から言えば、プロジェクト 1 の固定的で厳密な方法は他の人が使用するのにはあまり適していません。そうしないと、他の人は間違いなくあなたのアプリケーションが非常に低品質であると考えるでしょう。プロジェクト 1 のインターフェイスと比較すると、プロジェクト 2 には次の特徴があります。

<div class="sidebar"></div><div class="page-content"></div>.sidebar {    position: absolute;    width: 200px;    left: 0;    bottom: 0;    top: 50px;    border-right: 1px solid #E7E7E7;}.page-content {    position: absolute;    left: 205px;    bottom: 0;    top: 50px;    right: 0;}

1) メニューをクリックすると、iframe なしでインターフェイス全体が更新されます。

2) サイドバー。

3) Web ページがスクロールされると、メイン コンテンツだけでなくページ全体がスクロールします。

数週間前、Xinren Xinshi の資金調達に関するニュースを見て、なぜこれまで聞いたこともなかったのか、どのような事業を行っているのか疑問に思い、調べてみました。 Baidu に登録してその製品を体験してみたところ、インターフェイスは典型的な管理システムのように見えましたが、その時点では全体的なエクスペリエンスは非常に優れていると思いました。今後の参考になるかもしれません。たまたま先週、暫定的にプロジェクト 2 を行う予定があり、プロジェクト 1 をベースにいくつかの要件を作成したので、Xinrenxinshi のアプリケーションを思いつきました。この作業を完了するには、インターフェイスに加えて 4 つのビジネス モジュール機能も完了する必要があります。このレイアウト方法は完全に金人新氏のやり方を参考にしています。今までになかった方法なので、とても斬新だと思い、知識を集めて勉強したところ、この方法が以前聞いたことのある聖杯配置でした。プロジェクト 2 で使用されたレイアウト方法は、サイドバーが固定され、メイン コンテンツ列がアダプティブである聖杯レイアウト方法です。

2. 聖杯レイアウトの従来の実装方法

聖杯レイアウトの方法を使用すると、次のようなレイアウト効果を簡単に実現できます。

上の図にある 5 つのレイアウト効果を実装する方法を 1 つずつ説明していきます (この記事に関連するコードをダウンロードしてください)。

1) レイアウト 1: 2 列レイアウト、サイドバーが左側に固定され、メインコンテンツ列が右側にあります:

<div class="layout">    <aside class="layout__aside">侧边栏宽度固定</aside>    <div class="layout__main">主内容栏宽度自适应</div></div>

効果は次のとおりです:

<style type="text/css">    .layout:after, .layout:before {        clear: both;        content: " ";        display: table;    }    .layout__aside, .layout__main {        float: left;    }    .layout {        padding-left: 210px;    }    .layout__main {        width: 100%;    }    .layout__aside {        width: 200px;        margin-left: -210px;    }</style>

2) レイアウト 2: 2 列レイアウト、サイドバーは右側に固定され、メインコンテンツ列は左側にあります:

<div class="layout">    <div class="layout__main">主内容栏宽度自适应</div>    <aside class="layout__aside">侧边栏宽度固定</aside></div>

効果は次のとおりです:

<style type="text/css">    .layout:after, .layout:before {        clear: both;        content: " ";        display: table;    }    .layout {        padding-right: 210px;    }    .layout__main {        width: 100%;        float: left;    }    .layout__aside {        float: right;        width: 200px;        margin-right: -210px;    }</style>

3) レイアウト 3: 3 列レイアウト、2 つのサイドバーがそれぞれ左右に固定され、メイン コンテンツ列が中央にあります:

<div class="layout">    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>    <div class="layout__main">主内容栏宽度自适应</div>    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside></div>

効果は次のとおりです:

<style type="text/css">    .layout:after, .layout:before {        clear: both;        content: " ";        display: table;    }    .layout__aside, .layout__main {        float: left;    }    .layout {        padding:0 210px;    }    .layout__main {        width: 100%;    }    .layout__aside {        width: 200px;    }    .layout__aside--left {        margin-left: -210px;    }    .layout__aside--right {        margin-right: -210px;        float: right;    }</style>

4) レイアウト 4: 3 列レイアウト、2 つのサイドバーが同時に左側に固定され、メインコンテンツ列は右側にあります:

<div class="layout">    <aside class="layout__aside layout__aside--first">第1个侧边栏宽度固定</aside>    <aside class="layout__aside layout__aside--second">第2个侧边栏宽度固定</aside>    <div class="layout__main">主内容栏宽度自适应</div></div>

効果は次のとおりです:

<style type="text/css">    .layout:after, .layout:before {        clear: both;        content: " ";        display: table;    }    .layout__aside, .layout__main {        float: left;    }    .layout {        padding-left: 420px;    }    .layout__main {        width: 100%;    }    .layout__aside {        width: 200px;    }    .layout__aside--first {        margin-left: -420px;    }    .layout__aside--second {        margin-left: -210px;    }</style>

5) レイアウト 5: 3 列レイアウト、2 つのサイドバーが固定されています

<div class="layout">    <div class="layout__main">主内容栏宽度自适应</div>    <aside class="layout__aside layout__aside--first">第1个侧边栏宽度固定</aside>    <aside class="layout__aside layout__aside--second">第2个侧边栏宽度固定</aside></div>

効果あり:

<style type="text/css">    .layout:after, .layout:before {        clear: both;        content: " ";        display: table;    }    .layout {        padding-right: 420px;    }    .layout__main {        width: 100%;        float: left;    }    .layout__aside {        width: 200px;        float: right;    }    .layout__aside--first {        margin-right: -210px;    }    .layout__aside--second {        margin-right: -420px;    }</style>

追記:

1) この記事で提供されているレイアウト方法は、インターネットで見られるものよりも単純です。これは主に、IE8 以前との互換性を考慮していないためです。古典的なアプローチでは、layout__main 要素を先頭に置く必要があります。 Web ページのメインコンテンツが最初に表示されるように、layout__main メソッドを前面に配置する必要があるため、この 2 つの要素の表示順序はまったく異なります。実際の違いはどれくらいですか?肉眼では見えない違いに対して、より複雑なアプローチを採用する価値はありません。

2) CSS レイアウト クラスの命名規則は BEM の命名規則を採用しており、これは構造化され標準化された記述に役立ちます。 css にご興味があれば、詳細をご覧ください:

http://www.zhihu.com/question/21935157

3. 圣杯布局的flex实现

flex布局是一种新的网页布局方式，目前的兼容性如下：

如果你还没有了解过flex布局，建议你赶紧去学习，虽然它在pc上兼容性还有点问题，但是在移动端已经完全没有问题了，微信官方推出的weui这个框架就大量地使用了这种布局，以下是2个学习这种布局方式的非常好的资源：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

flex布局即将成为网页布局的首选方案，当你看到用flex来实现圣杯布局的代码有多简单的时候，你就会觉得前面那句话一点都没错。使用flex，可以只用同一段css实现第2部分提到的五种布局：

<div class="layout">    <aside class="layout__aside">侧边栏宽度固定</aside>    <div class="layout__main">主内容栏宽度自适应</div></div><div class="layout">    <div class="layout__main">主内容栏宽度自适应</div>    <aside class="layout__aside">侧边栏宽度固定</aside></div>
    
左侧边栏宽度固定
    
主内容栏宽度自适应
    
右侧边栏宽度固定
    
第1个侧边栏宽度固定
    
第2个侧边栏宽度固定
    
主内容栏宽度自适应
    
主内容栏宽度自适应
    
第1个侧边栏宽度固定
    
第2个侧边栏宽度固定

<style type="text/css">    .layout {        display: flex;    }    .layout__main {        flex: 1;    }    .layout__aside {        width: 200px;    }    .layout > .layout__aside:not(:first-child),    .layout > .layout__main:not(:first-child){        margin-left: 10px;    }</style>

效果与第2部分每种布局做法的结果一模一样，但是代码减少了很多，而且适用的场景更多，比如4栏布局，5栏布局。

4. 结束语

本文介绍了2种圣杯布局的方法，每种方法在当前或者将来的工作中，肯定会有很多场景都需要使用，所以有必要完全掌握这2种技术，内容不多，也不复杂，希望能对你有用，谢谢阅读：）