Task4

2018-06-24 02:08:21来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位和居中问题|百度前端学院</title>
    <link rel="stylesheet" href="css/task4.css">
</head>
<body>
    <div class="content">
        <div class="content-top">
        </div>
        <div class="content-bottom">
        </div>
    </div>
</body>
</html>
.content{
    width: 400px;
    height: 200px;
    background-color: #ccc;
    margin: 200px auto;
    position: relative;
}

.content-top{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #fc0;
    border-radius: 0 0 100% 0;
    top: 0;
    left: 0;
}

.content-bottom{
    position: absolute;
    background-color: #ffcc00;
    width: 50px;
    height: 50px;
    border-radius: 100% 0 0 0;
    bottom: 0;
    right: 0;
}

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML干货

下一篇:html与html5 总结