任务描述
- 实现如 示例图(点击打开) 的效果
- 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。
任务注意事项
- 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案。
- 动手试一试各种情况的组合,父元素和子元素分别取不同的 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>
转载于:https://www.cnblogs.com/huansky/p/5291653.html