魅力我的标记：冬至

这是前端挑战赛 - 12 月版的提交，Glam Up My Markup：冬至

我建造了什么

我创建了一个关于冬至的交互式响应式登陆页面。

演示

看一下代码

观看直播

旅行

第 1 步：设置导航栏和页脚的样式

我在整个页面中使用了CSS网格，并在导航栏中使用了CSS弹性框来布局链接。最后，当在较小的屏幕上显示时，我使用媒体查询来堆叠导航链接。

了解此视口元标记对于使页面具有响应能力的重要性非常有趣

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

第 2 步：在选项卡之间切换

第二步涉及使用 JavaScript 根据单击/活动的导航链接来切换每个部分的显示。这赋予了它在不同页面之间导航的交互性

第三步：让它变得更美丽

最后一步，我为每个部分分配了各种背景图片，使其更有趣

属性

• 树照片由 Fabrice Villard 在 Unsplash 上拍摄
• 打雪仗 图片来自 freepik
• 冬季人物图片来自 freepik
• 虚拟现实图像 by freepik
• 爱斯基摩女人和狗 图片来自 freepix
• 冬季爱斯基摩人 图片来自 freepix

以上是魅力我的标记：冬至的详细内容。更多信息请关注PHP中文网其他相关文章！