私のマークアップをグラムアップ: 冬至

これはフロントエンド チャレンジ - 12 月版、Glam Up My Markup: Winter Solstice への提出です

私が作ったもの

冬至に関するインタラクティブでレスポンシブなランディング ページを作成しました。

デモ

コードを覗いてみましょう

ライブを見る

旅

ステップ 1: ナビゲーションバーとフッターのスタイルを設定する

ページ全体には CSS グリッドを使用し、ナビゲーション バーのリンクのレイアウトには CSS フレックスボックスを使用しました。最後に、メディア クエリを使用して、小さな画面に表示されるときにナビゲーション リンクを積み上げました。

ページをレスポンシブにするためのこのビューポート メタ タグの重要性を学ぶのは興味深かったです

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

ステップ 2: タブ間の切り替え

この 2 番目のステップでは、JavaScript を使用して、どのナビゲーション リンクがクリックされたか、アクティブになったかに応じて各セクションの表示を切り替えます。これにより、異なるページ間を移動する対話性が得られます

ステップ 3: より美しくする

最後のステップでは、各セクションにさまざまな背景画像を割り当てて、より興味深いものにしました

属性

• Unsplash の Fabrice Villard による木の写真
• 雪合戦 画像 by freepik
• 冬の人々 画像 by freepik
• freepik による仮想現実画像
• 女性エスキモーと犬 画像 by freepix
• 冬のエスキモー 画像 by freepix

以上が私のマークアップをグラムアップ: 冬至の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。