一道腾讯实习生面试题+本人的加分题解答

2010/08/07-点击4247次

五、勇气拼一拼,让你超越别人的加分题目来了! (不限于一种方法,共30分)

使用重构的方式制作出一个如下图的水平、垂直都居中短边为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>
返回