WEB前端面试题分别使用2个、3个、5个DIV画出一个大的红十字

时间：2018-02-25 00:12:52 阅读：235 评论：0 收藏：0 [点我收藏+]

标签：100% 面试 start for 复制 copyto col 红色 comment

[html] view plain copy

<!DOCTYPE html>
<html>
<body>
<div style="width:100%;height:200px;margin-top:500px;location:center;border:none;background-color:red;position:absolute">
</div>
<div style="width:16%;height:1000px;margin-left:42%;margin-right:42%;margin-top:0px;border:none;background-color:red;style=clear:both;position:absolute">
</div>
</body>
</html>

[html] view plain copy

<!DOCTYPE html>
<html>
<body>
<div style="width:100%;height:100px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:100%;height:100px;margin-top:400px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:16%;height:1000px;margin-left:42%;margin-right:42%;margin-top:0px;border:none;background-color:red;position:absolute">
</div>
</body>
</html>

[html] view plain copy

<!DOCTYPE html>
<html>
<body>
<div style="width:100%;height:65px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:100%;height:65px;margin-top:435px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:100%;height:65px;margin-top:370px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:8%;height:1000px;margin-left:42%;margin-right:50%;margin-top:0px;border:none;background-color:red;position:absolute"></div>
<div style="width:8%;height:1000px;margin-left:49%;margin-right:42%;margin-top:0px;border:none;background-color:red;position:absolute"></div>
</body>
</html>

法二：

具体思想为：两个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并；三个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并，然后在外面包一个空的DIV盒子；五个，红十字标志由五个正方形组成，代表五大洲，画一个正方形，然后复制成五个，再将五个正方形摆放好位置，组成红十字形状，圈选五个正方形之后，选择焊接选项，再填充红色（C：0，M：100，Y：100，K：0），去除边框颜色即可。

[html] view plain copy

<!DOCTYPE html>
<html>
<body>
<div style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute;transform:rotate(90deg);"></div>
</body>
</html>

[html] view plain copy

<!DOCTYPE html>
<html>
<body>
<div type="margin:auto">
<div style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute;transform:rotate(90deg);"></div>
</div>
</body>
</html>

[html] view plain copy

<!DOCTYPE html>
<html>
<body>
<div style="width:200px;height:200px;margin-left:500px;margin-top:100px;border:none;background-color:red;position:absolute"></div>
<div style="width:200px;height:200px;margin-left:300px;margin-top:300px;border:none;background-color:red;position:absolute"></div>
<div style="width:200px;height:200px;margin-left:500px;margin-top:300px;border:none;background-color:red;position:absolute"></div>
<div style="width:200px;height:200px;margin-left:700px;margin-top:300px;border:none;background-color:red;position:absolute"></div>
<div style="width:200px;height:200px;margin-left:500px;margin-top:500px;border:none;background-color:red;position:absolute"></div>
</body>
</html>

WEB前端面试题分别使用2个、3个、5个DIV画出一个大的红十字

标签：100% 面试 start for 复制 copyto col 红色 comment

原文地址：https://www.cnblogs.com/yangguoe/p/8467887.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字

WEB前端面试题分别使用2个、3个、5个DIV画出一个大的红十字