本文是一篇关于CSS布局和样式的练习，目标包括实现一行显示的导航条、固定顶部的导航、文本包围图片、双列弹性布局以及照片网格展示。通过Positioning、Float、Flexbox和CSS Grid布局技术，逐步完成网页美化。文章展示了每个步骤的效果和代码应用，强调了响应式设计和提升用户体验的重要性。
题目所给的html、css代码及图片：下载链接
目标：
你需要实现你自己的布局。下面是你应该完成的目标：
- 在一行中显示导航选项，并且选项之间拥有相同的空间。
- 导航条应随着内容一起滚动并且在触碰到视口顶部之后于顶部固定。
- 文章内的图片应该被文本包围。
- <article> 与 <aside> 元素应该为双列布局。它们的列尺寸应该是弹性的，以便在浏览器窗口收缩得更小的时候能够变窄。
- 照片应该以有 1px 间隔的两列网格显示出来。
在实现布局的过程中你不需要修改 HTML，下面是你应该使用的技术：
- Positioning
- Float
- Flexbox
- CSS Grid Layout
HTML布局结束后未加任何样式的效果如下（html源码看文章顶部下载链接）：
最低0.47元/天 解锁文章
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
