0

次のようなモバイル Web アプリ用のランドスケープ ページを設計する必要があります: (CSS3 と jQuery が許可されています)

ここに画像の説明を入力

A、C、E はパーセンテージで同じ幅を共有します (おそらく 50%、多かれ少なかれ)。B、D、F で残りの幅を埋めます。

ヘッダー A と B を上に貼り付けます。中央部分を埋めるためのコンテナCとD。フッター E と F をビューポートの下部に貼り付けます。

ピクセルまたはパーセンテージで固定された高さのヘッダーとフッターを設定する必要があり、それらには絶対位置の画像または DIV タグが含まれます。

C コンテナは、パーセント単位の絶対位置 (そのコンテナの左または右、上または下) を持つさまざまなタグを受け取ります。

overflo-Yw で長いテキストを受け取るには D コンテナーが必要であり、ページの残りの部分がスクロールされていなくても、コンテンツは指のジェスチャー (Android / iPhone) でスクロール可能でなければなりません。

一部の CSS グルは、似たようなデザインのサンプルを持っていますか?

4

1 に答える 1

0

HTML

<div class="left">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>
<div class="right">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

CSS

.left,.right{
 float:left;
 width:48,5%
}
.left{
 margin:0 3% 0 0;
}
.header{
height:20px;
width: 100%;
}
.content{
height:500px;
width: 100%;
}
.footer{
height:20px;
width: 100%;
}
于 2013-02-11T09:49:29.600 に答える