CSS定位与居中问题实践

来源：互联网发布：cc攻击的端口怎么防御编辑：程序博客网时间：2024/06/05 11:49

任务目标

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

任务介绍为：http://ife.baidu.com/task/detail?taskId=4

[demo]https://happyshj.github.io/mygit-test_ife-task_04/task_04.html

HTML代码为：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link type="text/css" rel="stylesheet" href="task_04.css">    <title>task_04</title></head><body>         <div class="div1">             <div class="cir1"></div>             <div class="cir2"></div>         </div></body></html>

CSS代码为：

*{    margin: 0px;    padding: 0px;}.div1{    width: 400px;    height: 200px;    position: absolute;    top: 50%;    left: 50%;    margin: -100px 0 0 -200px;    background-color: #CCCCCC;}.cir1,.cir2{    background-color: #FC0;    width: 50px;    height: 50px;}.cir1{    position: absolute;    border-radius: 0 0 50px 0;    -moz-border-radius: 0 0 50px 0;    -webkit-border-radius: 0 0 50px 0;}.cir2{    position: absolute;    right: 0px;    bottom: 0px;    border-radius: 50px 0 0 0;    -moz-border-radius: 50px 0 0 0;    -webkit-border-radius: 50px 0 0 0;}

0 0