五、勇气拼一拼,让你超越别人的加分题目来了!
使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px,长边为150px的红色十字架。
原文链接在这里
<title>无标题文档</title>
<style>
/*---------第1种方法实现-------*/
div{background:red;}
.a1{ width:150px; height:50px; position:absolute; top:250px; left:0;}
.a2{width:50px; height:150px;position:absolute; top:200px; left:50px;}
/*---------第2种方法实现-------*/
.a3,.a5{ width:50px; height:50px; float:left; margin-top:50px;}
.a4{width:50px; height:150px; float:left;}
/*---------第3种方法实现-------*/
.a6,.a7,.a8,.a9,.a10{ width:50px; height:50px; float:left; background:green }
.a6{ margin:0 0 0 50px;}
.a7{ margin:50px 0 0 -100px;}
.a8{ margin:50px 0 0 -50px;}
.a9{ margin:50px 0 0 0}
.a10{ margin:100px 0 0 -100px;}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2">方法1</div>
<div class="a3"></div>
<div class="a4">方法2</div>
<div class="a5"></div>
<div class="a6"></div>
<div class="a7"></div>
<div class="a8">方法3</div>
<div class="a9"></div>
<div class="a10"></div>
</body>