この記事はhtml css jsレイアウトに関するもので、最も単純なものから始めて
最も単純なものから始めましょう。
1列の中央レイアウト
標準のタスクは、コンテンツを画面の中央に配置することです。
コンテンツ部分は固定または伸縮することができ、中央ユニットの高さを全画面に拡張する必要もあります...
前回このようなスキームを使用したとき
html
< div class ="wrap" >
< div class ="contentdiv" >
< br />< br />
</ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
css
html, body {height:100%;}
.wrap {
/**/
position:relative;
width:50%; /* */
margin: 0px auto ;
/* */
height:auto !important;
height:100%;
min-height:100%;
/**/
border-left:1px solid #69b401;
border-right:1px solid #69b401;
}
.contentdiv {padding:10px;}
* This source code was highlighted with Source Code Highlighter .
ネストされたブロックが2つあり、外側のブロックはコンテンツ部分を配置するラッパーであり、内側のブロックはコンテンツ自体です。
中央にプッシュし、マージンをインデントします：0px auto; および幅：50％; サイズはpxと％の両方にすることができます
高さを伸ばす：それと他のすべてのために、いつものように、異なる方法なので、高さを4回-ブロックで3回、htmlで1回、bodyで示します
upd {
なぜ正確に？
通常のブラウザでコンテンツが失敗しないように、高さを書きます：auto！重要、以下
高さ：100％
通常のブラウザは理解しています！優先度を高くして使用することが重要です。
ue6は、その狂気の結果として、「重要」を「低い意味」として書き直します...
}
ラッピングに垂直インデントを使用することはできません。これにより不要なスクロールが発生するため、室内ユニットで必要なインデントをすべて使用します
例
フッター
常に一番下にあるフッターも、些細な作業の1つであり、多くの場合、これは混乱を引き起こします。
上記の記事で説明したページ全体にコンテンツを拡大する方法は、正しいフッターによって完全に補完されます
ここに例があります
ソースコードを見ると、2つの新しいブロックがあります。
< div class ="empty_inner" style ="" > </ div >
* This source code was highlighted with Source Code Highlighter .
内側のラッパー
このブロックの後のフッター自体
< div id ="footer" >
© Vilz 09
</ div >
* This source code was highlighted with Source Code Highlighter .
コンテンツ部分は高さでページ全体に引き伸ばされるため、フッターはその直後になります。その後、不要なスクロールが表示されます
そしてすぐにそれを取り除き、フッターの高さまでブロックを上に押します
css
#footer {
position:relative;
height:20px;
margin-top:-21px;
line-height: 20px;
vertical-align:middle;
border-top: 1px solid #e8e9e8;
width:100%;
text-align:right;
font-size:10px;
}
* This source code was highlighted with Source Code Highlighter .
ブロックの高さを指定し、上部の負のマージンを使用してこの高さまでブロックを上げます。 この場合、高さは境界のためにもう1つあります。フッターにパディングを使用する場合は、それぞれに高さとマージンが追加され、合計値を指定する必要があります。
upd {
.wrap wrapperブロックの負の下マージンを使用して上げることもできます。
上部の負のマージンを.footerから.wrapの下部の負のマージンに転送します
margin:0 auto -21px;
例
}
コンテンツ部分にあるブロックの意味は、ページが引き伸ばされたときに、フッター上のサイトのコンテンツを登ることではなく、単にブロックの高さを示すことではありません
.empty_inner {
height:20px;
}
* This source code was highlighted with Source Code Highlighter .
ポパップ
かなり一般的な質問は、画面の中央に固定サイズの小さなブロックを配置する方法です
< div class ="popup" > </ div >
* This source code was highlighted with Source Code Highlighter .
ここにブロックのようなCSSがあります
.popup {
position:absolute;
top:50%;
left:50%;
width:360px;
height:180px;
margin-left:-180px;
margin-top:-90px;
border:1px solid #69b401;
padding:5px;
}
* This source code was highlighted with Source Code Highlighter .
例
ここで何が見えますか？ 絶対に配置し、画面の中心点に50％50％を送信します。
ブロックが画面の中央の左隅にはっきりとぶら下がっていることがわかります。 当然、これは私たちに合わないでしょう。
ブロックの寸法がわかっているので、必要なピクセル数だけ左および上に移動します。 このため、マージンは最適です。必要な負の値を取ることができます
このソリューションには1つの重要なマイナスがあります。 ブロックの中央にある左上のポイントを取得し、そこから位置決めを実行します。 したがって、ブラウザのサイズがブロックのサイズを超えると、スクロールせずに画面の境界の外側の上部と左側が非表示になります。
そして最後に
標準テンプレート
新しいレイアウトで作業を開始するために使用するテンプレートを次に示します
含まれるもの：
標準構造とcssおよびjsがすでに接続されているindex.html
cssフォルダー
reset.css-デフォルトのブラウザ値をリセットします
main.css-いくつかの標準クラスの説明を含むメインcssファイル
jsフォルダー
jquery.js-最新の1.3.1.minバージョンのお気に入りのjsフレームワーク
app.js-ネイティブjs関数のメインファイル
ie6の不正なpngに対する完全な戦いのためのボーナスiepngfix.htcおよびiepngfix_tilebg.jsとして
imgフォルダー-毎回作成しない
複雑なことは何もありませんが、作業の開始を数回高速化します
ダウンロードする
それがすべての一般的なことです。