百度前端技术学院-task1.4源代码
任务描述
- 实现如 示例图(点击打开) 的效果
- 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。
任务注意事项
- 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案。
- 动手试一试各种情况的组合,父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义,尤其是 absolute 究竟是相对谁而言的。
- 注意测试不同情况,尤其是极端情况下的效果。
- 调节浏览器宽度,灰色元素始终水平居中。
- 调节浏览器高度,灰色元素始终垂直居中。
- 调节浏览器高度和宽度,黄色扇形的定位始终准确。
- 其他效果图中给出的标识均被正确地实现,错一项扣一分。
-
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="task4" /> <meta name="author" content="sjq,fm,qcl" /> <title>task4-center</title> <style> html.body{margin: 0px;padding: 0px;height: 100%} .rect { width: 400px; height: 200px; background-color: #ccc; position: absolute; top:50%;left: 50%; margin: -100px 0px 0px -200px;; } .rect1 { width: 50px; height: 50px; border-top-left-radius:50px; background-color: #fc0; position: absolute; top:150px;left: 350px; } .rect2 { width: 50px; height: 50px; border-bottom-right-radius:50px; background-color: #fc0; position: absolute; top:0px;left: 0px; } </style> </head> <body> <div class="rect"> <div class="rect1"></div> <div class="rect2"></div> </div> </body> </html>
树林美丽、幽暗而深邃,但我有诺言尚待实现,还要奔行百里方可沉睡。 -- 罗伯特·弗罗斯特