这是前端挑战赛 - 12 月版的提交,glam up my markup:冬至

我建造了什么

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

演示

看一下代码

观看直播

旅行

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
登录后复制

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

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

第三步:让它变得更美丽

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

属性

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

以上就是魅力我的标记:冬至的详细内容,更多请关注慧达安全导航其它相关文章!

点赞(0)

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部