モバイル カテゴリ page_html/css_WEB-ITnose のレンダリングの実装

他には何も言わずに、まずレンダリングを見てみましょう。

レンダリングを見て、まずページを次のモジュールに分割しました。

注意すべき点がいくつかあります:

1. セクション 1 で「City 1」、「City 2」などをクリックすると、セクション 2 の別の div モジュールに切り替わります。それぞれに異なる div モジュールが含まれており、そのレイアウトはパネル 2 に示されていますが、1 つの div モジュールのみが表示され、他のモジュールは非表示になります。

3. div モジュールの左バーにある項目をクリックし、対応する項目は、対応する rightBar モジュールに表示され、他の rightBar モジュールは非表示になります。

4. ヘッダーはページの上部に固定する必要があります。

5. ページ レイアウトはパーセンテージで設定され、幅はさまざまな画面に適応するように調整されます。

6. さまざまな携帯電話の画面に適応させるには、次のコードを head タグに追加します:

次に、各部分の実装の難しさを説明します。

1. ヘッダー部分

1. ページの上部を固定する必要があるので、ヘッダーを次のように設定します。

2. ヘッダーの高さを設定します。これは後で役立ちます。 。

3. セクション 1 の「City 1」と「City 2」については、ul と li を直接使用してレイアウトします。

li を inline-block; に設定します。以下）、li のパディングと border-right を削除した後、最後の li に border-right:none; を設定します。

4. ヘッダーの背景画像はCSS3の背景色のグラデーションまたは写真で解決できます。私は面倒だったので写真を直接使用しました。

2. leftBar 部分

1. leftBar のオプションは引き続き ul と li を使用してレイアウトされます。 leftBar に関しては、float:left を設定します。

2. leftBar を完成させる過程で、2 つの問題に遭遇しました。まず、rightBar でコンテンツをスクロールするときに leftBar を実装する方法、leftBar は画面の左端に固定されたままであり、高さは画面の下部まで拡張する必要があります。画面。

まずこの問題を解決する方法について話しましょう。最初は leftBar の高さを直接 100% に設定しましたが、役に立たないことがわかりました。上司の指示で、まずhtmlやbodyなどのleftBarの親要素の高さを100%に設定し、次にleftBarの高さを100%に設定したところ、高さの問題は解決しました。

rightBar のコンテンツをスクロールするときに leftBar を画面の左端に固定するために、leftBar の高さが画面の高さの 100% であり、leftBar も同様であるため、leftBar を Position:fixed に設定します。この問題を解決するには、スクロール バーが長く、理由もなく垂直に表示されます。この問題を解決するには、セクション 2 全体をposition:Absolute;に設定し、leftBar と rightBar のパディングトップを高さに調整します。ヘッダーの。 (セクション 2 で、leftBar&rightBar をラップできるように、float: left; も設定しました)

しかし、このとき、leftBar の一部がヘッダーを覆っているのが問題です。 -index:100; ヘッダーを leftBar にフロートさせるだけです。

質問 2: leftBar で選択したオプションの右側にエッジを持たせないようにするにはどうすればよいですか?

最初、各オプションの境界線を右に設定しましたが、このエッジが下まで伸びていることがわかりました。

上司のプロンプトで、leftBar の border-right を直接設定し、選択した項目に対して margin-right:-1px; を使用してエッジをブロックしましたが、私は使用しませんでした。理由はわかりません。最初は margin-right が機能していましたが、その後機能しなくなりました (誰かが説明してくれることを願っています。O(∩_∩)O ありがとう)。

3. 右バー部分

rightBar 部分は比較的シンプルで、テーブルを直接使用してレイアウトをレイアウトします。同様に、rightBar のパディングトップはヘッダーの高さに設定する必要があります。その他の問題。

JS切り替えモジュール部分は比較的簡単なので省略します。

議論したい人やソースコードをリクエストしたい人は、メッセージを残してください。O(∩_∩)Oありがとうございます

不備があれば、ご指摘ください。