任务四：定位和居中问题

面向人群：
始终没搞懂定位问题，每次靠碰运气实现定位的人
难度：
简单

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目标

  • 实践HTML/CSS布局方式
  • 深入了解position等CSS属性

任务描述

  • 实现如 示例图（点击打开） 的效果
  • 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。

任务注意事项

  • 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。
  • 动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
  • 注意测试不同情况，尤其是极端情况下的效果。
  • 调节浏览器宽度，灰色元素始终水平居中。
  • 调节浏览器高度，灰色元素始终垂直居中。
  • 调节浏览器高度和宽度，黄色扇形的定位始终准确。
  • 其他效果图中给出的标识均被正确地实现，错一项扣一分。

任务协作建议

  • 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
  • 各自完成任务实践
  • 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
  • 相互讨论，最后合成一份组内最佳代码进行提交

参考资料

posted @ 2016-11-15 21:18  Deardirk  阅读(183)  评论(0)  编辑  收藏  举报
//默认地，为页面上所有的h3标签生成目录