腾讯前端实习一道题目

最新推荐文章于 2024-07-18 10:40:41 发布

ryanscn

最新推荐文章于 2024-07-18 10:40:41 发布

阅读量296

点赞数

文章标签：腾讯 div float

本文链接：https://blog.csdn.net/ryanscn/article/details/6314437

版权

勇气拼一拼，让你超越别人的加分题目来了！ （不限于一种方法，共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