ホームページ >ウェブフロントエンド >htmlチュートリアル >ページレイアウトの整理_html/css_WEB-ITnose

ページレイアウトの整理_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-06-21 08:55:041028ブラウズ

以前は、CSS レイアウトには 2 列、3 列、等しい幅、等しい高さなどが含まれることしか知りませんでした。レイアウトについてある程度意識し始めたのは Sina.com を見てからでしたが、ウェブサイトを模倣したり、設計図を復元したりするときは、まず全体の構造を観察し、それから同じ部分を見つけるために一般化します。コーディングを段階的に分割する方法について考えています。Zhang Xinxu のブログを参照するのが好きです。彼には非常に栄養価の高い内容がたくさんあります。また、彼からのフロー レイアウトも見て、いくつかの情報をランダムにチェックしました。もう一度レイアウトを出します。これは完全に個人的なメモです。必要に応じて参照してください。「CSS の習得」には、より詳細な情報が記載されています。それらの多くは私たちが考える価値があります。 Web ページのレイアウトには、固定幅レイアウト、流動レイアウト、およびフレキシブル レイアウトがありますが、より一般的に使用されるのは固定幅レイアウトです。その理由は非常に単純で、シンプルでラフで使いやすいからです。流動的で柔軟なレイアウトは、フォーラム Web サイトや個人のブログでよく使用されます。モバイル側で急速に発展した、制限のある柔軟なレイアウトも広く使用され始めています。rem の導入により、em の使用も修正され、改善されました。

固定レイアウトは主にピクセル モードを使用します。流体レイアウトを使用する場合、サイズはピクセルの代わりにパーセンテージを使用して設定されます。これにより、ウィンドウが変化するにつれて、流体レイアウトが拡大したり縮小したりすることができます。列幅も広くなります。逆に、ウィンドウが小さくなると、列の幅も小さくなります。流動的なレイアウトにより、スペースを非常に効率的に使用できます。ただし、流動的なレイアウトにも問題があるはずです。ウィンドウの幅が小さいと、行が非常に狭くなり、読みにくくなります。したがって、レイアウトが狭くなりすぎないように、最小幅をピクセルまたは em 単位で追加する必要があります。ただし、min-width の設定が大きすぎる場合は、固定幅レイアウトと同じ制限が発生します。

CSS3で導入された新機能のうち、メディアクエリはメディアを操作することでレスポンシブレイアウトを完成させるために使用されます。いわゆる応答性とは、Web サイトが複数の端末と互換性があることを意味します。柔軟なレイアウトは、要素の幅を (ブラウザーの幅ではなく) フォント サイズに応じて設定し、幅を em 単位で設定します。これにより、フォント サイズが大きくなるにつれてレイアウト全体が拡張されます。これにより、行が読みやすいサイズに保たれます。

もちろん、他のレイアウトと同様に、フレキシブル レイアウトにも固定幅レイアウトと同じ問題がいくつかあり、利用可能なスペースを最大限に活用できません。また、テキストのフォント サイズを大きくすると全体のレイアウトが大きくなるため、フレックス レイアウトがブラウザ ウィンドウよりも広くなり、水平スクロール バーが表示されます。この状況を防ぐには、コンテナ div に max-width を 100% に追加する必要がある場合があります。IE6 と互換性を持たせたい場合は、

拡張機能: 柔軟なレイアウト

柔軟なレイアウトの最大の利点は、画面スペースを最大限に活用できることです。クライアントの解像度に関係なく、幅の変化に自動的に適応できます。

上の図を見てください。これは固定幅レイアウトです。この図をもとにレイアウトを説明します。もちろん、この完全なページの作成方法を包括的に紹介するわけではありません。重要なポイントのみを説明します。

実際、柔軟なレイアウトを作成するのは比較的簡単ですが、このレイアウトはシンプルですが、このレイアウトの本質は詳細を把握することです。伸縮性のあるレイアウトにはこのような優れた利点がありますが、次のような致命的な欠陥があります。

1. このレイアウトに最小幅が設定されていない場合、ユーザーがウィンドウを十分に小さいサイズに縮小すると、致命的な影響が生じます。レイアウト上。レイアウトズレに重大な影響を与えます。

2. ページを柔軟にレイアウトすると、中の写真に大きな影響を与えます。なぜなら、これまでのところ、パーセンテージによる画像の拡大縮小の問題は解決されていないからです。

したがって、この記事ではレイアウトについてはあまり説明せず、上記の 2 つの問題を解決することについて説明します。上記 2 つの問題が解決されていれば、このレイアウトは比較的簡単になると思います。

1. 最小幅を解決​​します

一般に、フレキシブル レイアウトでは、コンテナーの幅を設定するためにパーセンテージが使用されます。これにより、画面の幅に自動的に適応されます。ただし、ユーザーは幅の値を完全に自由に拡大縮小することはできません。その最小幅をこのパーセンテージ幅に制限する必要があります。ユーザーがウィンドウを特定の値まで縮小すると、それ以上拡大することはできなくなります。

CSS に詳しい友人なら、次の 4 つの属性があることを知っています:

1) Min-width: 最小幅

2) Max-width: 最大幅

3) Min-height: 最小の高さ

4) Max-height: 最大の高さ

これら 4 つのプロパティだけでこの問題を解決できます。満足していますか?この問題は解決できますが、ユーザーが最も使用しているブラウザである IE6 ではこれらの属性がサポートされていないという重大な問題があります。最もユーザー数の多いブラウザを捨てるわけにはいきません。

現在、IE6 にこれら 4 つの属性をサポートさせる問題を解決するには、インターネット上で 4 つの一般的な方法があります。

1)在CSS中expression来设置最小宽度,比较费内存。

2)用嵌套DIV,然后用margin偏移模仿实现,多冗余结构。

3)用JQ框架实现,为一个属性加一个JS框架,有点不划算。

4)用纯JS代码实现。

前面三种都有劣势,请各自选择最合适的方法,我偏重于最后一种,这是国外的一个牛人实现的,相关例子可以看这儿: http://www.doxdesk.com/software/js/minmax.html

有了这个JS文件,你只需要在头部调用这个JS文件就可以了。

PS:在演示模型中为了方便,我将这个JS作为内部引用的方式调用,你们在实际应用中将这个JS文件新建为一个JS外部文件,如下方式调用:

2fb563e6a580395055c25ed0de3538b22cacc6d41bbb37262a98f745aa00fbf0

我们在样式表中将min-width应用到#wrapper和#footer这两个容器就行了,并分别设置它们宽度为100%,OK,现在我们解决了最小宽度的问题。

二、解决弹性图片

我们看看上面哪张图片,要做成弹性布局,就要解决页头图片的动态缩放。而这是一张图片,我们都知道图片是没有办法随比例缩放的,该怎么办呢?

我们可以换一个思维方式,将这张图片在PS中做一点改动,我们可以将这张图片分割成左右两部分,并将它们合并成一张图片。如下图所示:

第一图片在容器中以背景定位的方式左上定位,而第二张片则右下定位,用两个容器分装两张图片,内层的图片级别比外层图片级别高,它会浮动到第一张图片上盖住它,当然这第二张要做成透明底色的png或gif图片,因为png-24位透明图片在IE6下不受支持,所以我们改成PNG-8位的透明图片,这样虽说图片质量上有点影响,但可以保证在IE6中畅通无阻。

所以页头的结构层应该是如下的样子:

ab464f465e20bbdaa69bcec6b8290196

0b1a9562d0fd1961c00c9e56594a1f6e

e388a4556c0f65e1904146cc1a846bee页头内容94b3e26ee717c64999d7867364b1b4a3

16b28748ea4df4d9c2150843fecfba68

16b28748ea4df4d9c2150843fecfba68

そのような構造の場合、次のスタイルを書くことができます:

外部スタイル:

#header{height:150px;width:100%;background:#000 url(image/header-bg.png) no-repeat left top;}

内部スタイル:

#inhead{height:150px;width:100%;background:url(image/header-bg.png) no-repeat right bottom;text-align:center;color:#fff;}

その後改良により、ページヘッダーは柔軟な画像になり、ブラウザでは次のように表示されます。

このようにして、基本的に柔軟なレイアウトが完成します。最終的な効果は以下のとおりです:

追記:

最後に、このレイアウトには制限があり、すべての Web ページに適しているわけではないことを言及しなければなりません。このように配置されます。流体弾性レイアウト自体に欠陥があるためです。あまりに豪華なデザインや写真が豊富なページには、上記画像のように後退できない写真もあるため、使用できません。このため、このレイアウトの広範な普及が制限されていると思います。

デモ:

コード ボックスの実行

74420b74d0c2469781aa51079d59d11f

68ccb177a5de0ef9542dde7d35bae727

93f0f5c25f18dab9d176bd4f6de5d30e

97f2b6ae5f4f65bc7d15c6c9b9e8be8c

380b0ca107277daba5b4a8a01a9c30d9

4ec11beb6c39d0703d1751d203c17053

// JavaScript Document

/ / minmax.js: IE5+/Win サポート CSS min/max-width/height

// バージョン 1.0、2003 年 8 月 8 日

// Andrew Clover 7a96c34a18893984f83bccb3e7100987 の場合、すべての

// 要素の minmax プロパティを確認します。

function minmax_bind(el) {

var i, em , ms;

var st= el.style, cs= el.currentStyle;

if (minmax_elements==window.unknown) {

// body要素の初期化表示されましたが、IE のみです

if (!document.body || !document.body.currentStyle) return;

minmax_elements= new Array();

window.attachEvent('onresize', minmax_layout);

// フォント サイズ リスナーを作成します

em= document.createElement('div');

em.setAttribute ( 'id', 'minmax_em');

em.style.position= 'absolute'; em.style.visibility= 'hidden';

em.style.fontSize= 'xx -大きい'; em.style.height= '5em';

em.style.top='-5em'; em.style.left= '0';

if (em . style.setExpression) {

em.style.setExpression('width', 'minmax_checkFont()');

document.body.insertBefore(em, document.body.firstChild); 🎜>

}

}

// ブラウザーがキャッチできなかったハイフンで囲まれたプロパティをキャメルケースに変換します

for (i= minmax_props.length; i--> ; 0;)

if (cs[minmax_props[i][0]])

st[minmax_props[i][1]]= cs[minmax_props[i][0]] ;

// プロパティを持つ要素をリストに追加し、最適なサイズ値を保存します

for (i= minmax_props.length; i-->0;) {

ms = cs[minmax_props[i][1]];

if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') {

st.minmaxWidth= cs.width; st.minmaxHeight= cs.height;

minmax_elements[minmax_elements.length]= el;

// 後でレイアウトが必要になります

minmax_layout();

break;

} }

}

// フォント サイズの変更を確認します

var minmax_fontsize= 0;

function minmax_checkFont() {

var fs= document.getElementById('minmax_em').offsetHeight;

if (minmax_fontsize!=fs && minmax_fontsize!=0)

minmax_layout();

minmax_fontsize= fs;

return '5em';

}

/ / レイアウト。ウィンドウとフォント サイズの変更後に呼び出されます。

// 前に選択した要素を調べて、そのサイズを最小、最大、最適に設定します。

//適切な

// 次に利用可能な時点で再レイアウトを要求します

var minmax_laying= false;

function minmax_layout() {

if (minmax_laying) return ;

minmax_delaying= true;

window.setTimeout(minmax_layout, 0);

}

function minmax_stoplaying() {

minmax_layout= false;

}

function minmax_layout() {

window.setTimeout(minmax_stoplaying, 100);

var i, el, st , cs、最適、範囲;

for (i= minmax_elements.length; i-->0;) {

el= minmax_elements[i]; el.currentStyle;

// 水平方向のサイズ境界

st.width= st.minmaxWidth; optimal= el.offsetWidth;

inrange= true;

if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') {

st.width= cs.minWidth;

inrange= (el.offsetWidth5c4cdc38191cf7b38fec3d87e4cdf4a7optimal);

}

if (inrange) st.width= st.minmaxWidth;

// vertical size bounding

st.height= st.minmaxHeight; optimal= el.offsetHeight;

inrange= true;

if (inrange && cs.minHeight && cs.minHeight!='0' && cs.minHeight!='auto' && cs.minHeight!='') {

st.height= cs.minHeight;

inrange= (el.offsetHeight250b829335741945859cd311b67b929eoptimal);

}

if (inrange) st.height= st.minmaxHeight;

}

}

// Scanning. Check document every so often until it has finished loading. Do

// nothing until 6c04bd5ca3fcae76e30b72ad730ca86d arrives, then call main init. Pass any new elements

// found on each scan to be bound

var minmax_SCANDELAY= 500;

function minmax_scan() {

var el;

for (var i= 0; i

el= document.all[i];

if (!el.minmax_bound) {

el.minmax_bound= true;

minmax_bind(el);

} }

}

var minmax_scanner;

function minmax_stop() {

window.clearInterval(minmax_scanner);

minmax_scan();

}

minmax_scan();

minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY);

window.attachEvent('onload', minmax_stop);

@end @*/

2cacc6d41bbb37262a98f745aa00fbf0

9a6c6593cd224a767d2b5172bc71b53a

/*本例中运用到一个永远固定到页脚的footer容器,这个层是独立于主内容区的.*/

*{margin:0;padding:0;}

a:link,a:visited{color:orange;font-weight:bold;}

html, body, #wrapper {height: 100%;font-size:12px;}

#wrapper{width:100%;background:#777;min-width:960px;}

body > #wrapper {height:auto; min-height:100%;}

#main {padding-bottom: 54px;}/* 必须使用和footer相同的高度,最小宽度ie6中加JS解决 */

#header{height:148px;width:100%;text-align:center;color:#fff;background:#000 url(http://images.cnblogs.com/cnblogs_com/binyong/tanxin/header-bg.png) no-repeat left top;}

#inhead{height:148px;width:100%;text-align:center;color:#fff;background:url(http://www.blueidea.com/articleimg/2009/05/6692/header-bg.png) no-repeat right bottom;}

h3{font-size:14px;line-height:90px;}

#header p{font-size:12px;line-height:30px;}

#footer {

position: relative;

margin-top: -54px; /* footer高度的负值 */

height: 54px;/* footer高度*/

width:100%;

clear:both;

background:#000;

text-align:center;

color:#fff;

min-width:960px;

}

#footer p{line-height:26px;}

#content{background:#999;width:80%;margin:0 auto;height:654px;}

#content p{line-height:30px;padding:0 30px;color:#fff;}

/*说明: 需要注意的就是#main的padding值、footer的高度和负margin值,需要保持一致。下面是著名的万能float闭合Clearfix Hack*/

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/

* html .clearfix { height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

531ac245ce3e4fe3d50054a55f265927

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

e18c97f3b138b1f7d8337a6dc20f2dca

59d685dbb8fd349bd2f14e34e4431ccd

ab464f465e20bbdaa69bcec6b8290196

0b1a9562d0fd1961c00c9e56594a1f6e

684271ed9684bde649abda8831d4d355弹性流体布局39528cedfa926ea0c01e69ef5b2ea9b0

e388a4556c0f65e1904146cc1a846bee页头背景可平铺整个浏览器宽度,而正文内容则始终居中显示,不管分辩率是多大。94b3e26ee717c64999d7867364b1b4a3

16b28748ea4df4d9c2150843fecfba68

16b28748ea4df4d9c2150843fecfba68

845bc0347d2f48a149098cc22d7a5f95

e388a4556c0f65e1904146cc1a846beeこのページでは、最小幅と伸縮性のある画像という 2 つの重要なテクニックを説明します。

e388a4556c0f65e1904146cc1a846bee フレキシブル レイアウトは min-width 属性を使用しますが、この属性は IE6 ではサポートされていないため、外国人による JS スクリプトが追加されました。このスクリプトにより、IE6 は幅 (高さ) の最小値と最大値の 4 つの属性もサポートできるようになります。 ).94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee 94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee実際、伸縮性のあるレイアウトで最も難しいのはレイアウトではありません。内部の写真がどのように適応できるかについて、つまり写真も柔軟にできるということです。このレイアウトを行う場合、これが最も優先されます。 94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeヘッダー画像は弾性画像の典型的な応用例です。ウィンドウを縮小してご覧ください。 94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee関連記事リンク:「6cab257fca5f2a35676c3662acfe1666フレキシブル + 固定幅レイアウト5db79b134e9f6b82c0b36e0489ee08ed》94b3e26ee717c64999d7867364b1b4a3

16b28748ea4df4d9c2150843fecfba68

16b28748ea4df4d9c2150843fecfba68

863495074457d4db2c3ff631359395c0

e388a4556c0f65e1904146cc1a846bee私は、中央のテキストコンテンツがそうでないかどうかに関係なく、常に下部に固定される浮動 DIV です。 1 画面に十分な高さがある場合は、下部に表示することもできます。

e388a4556c0f65e1904146cc1a846bee中央のコンテンツが 1 画面を超える場合は、下にフローティングできます19f59521accc644efed41891261afd54 🎜>

記事のソース: フロントエンド ネットワーク

リンク 1: http://www.w3cfuns.com/notes/17878/325443e7fd790671a338c72c2eb62a96.html

リンク 2: http://www .blueidea.com/tech/web/2009/6692.asp

このサイトの記事は、HTML5 DreamWorks の編集者によって他のメディアから選択され、転載されています。私たちの作品があなたの権利を侵害されている場合は、時間内に編集者QQ: 123464386にご連絡ください。できるだけ早く対処します。投稿や協力については、tommy@html5dw.com

まで電子メールを送信してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。