2021年-06-04、開発ログデンマークショッピングセンター実習

学習の内容

デンマークショッピングモール、https://helbak.com/レイアウト、

頂部領域

梅仁英駅

底部領域

その他HTML、CSS

デンマークのショッピングモールは反応型レイアウトです.
画像はhttps://placeholder.com/に置き換えられた.
上部、メイン領域を移動

下部領域の移動

PC画面

操作手順は上、主、下です.
html領域
css移動画面
css pc画面
上部領域の使用
ロゴ、3メニュー
PCは1行の移動を2行(トップバッジ、ボトムメニュー)に分けます.
上端は大きく二つに分かれている.
(バージョンの移動から開始)
CSS
デフォルトラベルcssを指定します.余白0、塗りつぶし0、リスト内の点、およびaラベルの下線を削除します.
メディアクエリはem単位を使用します.
見出し領域
携帯電話では2行のマークが100%、3メニューが33.33%だった.
移動中は、タイトル領域が固定されず、スクロール時にタイトル領域が見えなくなります.
PC分野で:位置付け;top: 0; left: 0; スクロールを固定するように設定します.
ロゴ領域の設定
「移動」で、バッジのクリック可能な領域をすべてに設定します.
PCでは、この点は重要ではありません.
上下中央揃え

top: 50%;
transform: translateY(-50%);

梅仁英駅
リスト形式なのでul,liラベルで
h 2ラベルと画像ラベルを文章ラベルとして使用します.
高さを56.25%に設定し、画像サイズ563 pxに近づけます.
@media(min-width:60 em)を設定する場合は、幅を50%、高さを56.25の半分、28.125%に設定します.
下部領域
Terms and Conditions、クッキー、支払い方法、上部ボタン.
移動画面で、垂直方向の中央揃えで表示されます.
PC画面には、左、中、右の画面が表示されます.
左側と右側にfloatを使用して配置します.
中間画面はposition:absolute;bottom: 0; left: 50%; margin-left:-33 pxを使用して中央に配置しました.
htmlにはidが1つしか存在しません.複数のclssを使用できます.
cssでidを選択するときに#を使用します.
href=「#」をデフォルト値としてaタグに配置します.タグをクリックすると、現在のページの上部に移動します.
href=「#footer」の場合、idがfooterの位置に移動します.
テキストの使用時に画面が自動的に改行されるのを防止するwhite-space:nowrap;使用します.
オーバーフロー:hidden;使用します.
text-overflowを使用して、枠枠の中の裁断テクスチャを略語としてマークします.
共通プロパティをクラスとして作成しhtmlに追加すればいいです.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}   

学習中の難点や未解決の問題

ショッピングモールfooterエリアにある兄弟関係のleft-navクラスとright-methodsクラスのレイアウトは正常ですが、to-top-buttonのタイトルは下に移動します.

ソリューションの作成

結果はclear:dothを用いて解決した.
解決の過程で、私たちは原因を知っていますが、何回か試した後、コードをどこに置くべきかを解決しました.

学習の心得.

レイアウトは依然として容易ではありません.
重複タスクを減らすクラスは便利に見えます.