腾讯前端实习一道题目

来源：互联网发布：花生壳ddns 免费域名编辑：程序博客网时间：2024/04/30 11:38

勇气拼一拼，让你超越别人的加分题目来了！ （不限于一种方法，共30分）

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。

十字架

要求：
1.使用2个div完成
2.使用3个div完成
3.使用5个div完成

一、用两个div完成：

<html><head><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#d2{background-color:red;width:50px;height:150px;margin-left:50px;}#d1{background-color:red;height:50px;width:150px;margin-top:50px;float:left;}</style></head><body><div id = "d1"></div><div id="d2"></div></body></html>

二、用3个div完成
<html><head><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#d1{background-color:red;width:50px;height:50px;margin-left:50px;}#d2{background-color:red;height:50px;width:150px;}#d3{background-color:red;height:50px;width:50px;margin-left:50px;}</style></head><body><div id ="d1"></div><div id="d2"></div><div id="d3"></div></body></html>

三、使用五个div完成
<html><head><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#d1{background-color:red;width:50px;height:50px;margin-left:50px;}#d2{background-color:red;height:50px;width:50px;float:left;}#d3{background-color:red;height:50px;width:50px;margin-left:50px;clear:both;}</style></head><body><div id="d1"></div><div id="d2"></div><div id="d2"></div><div id="d2"></div><div id="d3"></div></body></html>主要是注意到float块元素后加clear:both