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

WEB前端面试题分别使用2个、3个、5个DIV画出一个大的红十字
[html] view plain copy
1. <!DOCTYPE html>
2. 
3. <html>
4. <body>
5. <div style="100%;height:200px;margin-top:500px;location:center;border:none;background-color:red;position:absolute">
6. </div>
7. <div style="16%;height:1000px;margin-left:42%;margin-right:42%;margin-top:0px;border:none;background-color:red;style=clear:both;position:absolute">
8. </div>
9. </body>
10. </html>
[html] view plain copy
1. <!DOCTYPE html>
2. 
3. <html>
4. <body>
5. <div style="100%;height:100px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
6. <div style="100%;height:100px;margin-top:400px;location:center;border:none;background-color:red;position:absolute"></div>
7. <div style="16%;height:1000px;margin-left:42%;margin-right:42%;margin-top:0px;border:none;background-color:red;position:absolute">
8. </div>
9. </body>
10. </html>
[html] view plain copy
1. <!DOCTYPE html>
2. 
3. <html>
4. <body>
5. <div style="100%;height:65px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
6. <div style="100%;height:65px;margin-top:435px;location:center;border:none;background-color:red;position:absolute"></div>
7. <div style="100%;height:65px;margin-top:370px;location:center;border:none;background-color:red;position:absolute"></div>
8. <div style="8%;height:1000px;margin-left:42%;margin-right:50%;margin-top:0px;border:none;background-color:red;position:absolute"></div>
9. <div style="8%;height:1000px;margin-left:49%;margin-right:42%;margin-top:0px;border:none;background-color:red;position:absolute"></div>
10. </body>
11. </html>
法二：

具体思想为：两个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并；三个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并，然后在外面包一个空的DIV盒子；五个，红十字标志由五个正方形组成，代表五大洲，画一个正方形，然后复制成五个，再将五个正方形摆放好位置，组成红十字形状，圈选五个正方形之后，选择焊接选项，再填充红色（C：0，M：100，Y：100，K：0），去除边框颜色即可。
[html] view plain copy
1. <!DOCTYPE html>
2. 
3. <html>
4. <body>
5. <div style="1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
6. <div style="1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute;transform:rotate(90deg);"></div>
7. </body>
8. </html>
[html] view plain copy
1. <!DOCTYPE html>
2. 
3. <html>
4. <body>
5. <div type="margin:auto">
6. <div style="1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
7. <div style="1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute;transform:rotate(90deg);"></div>
8. </div>
9. </body>
10. </html>
[html] view plain copy
相关阅读:
十个html5代码片段，超实用，一定要收藏
 零基础学编程，我想给你这五条建议
 Java 程序员开发常用的工具（二）
Java 程序员开发常用的工具（一）
前端人才饱和？平均年薪25W难求优质程序员！
java基础学习了解这些很有必要
 初学HTML5技术开发笔记整理
 HTML5移动开发学习笔记之02-CH4-HTML5 Web表单
 web前端笔记之Web前端的安全与漏洞
 5.SSH 免密码登陆
原文地址：https://www.cnblogs.com/yangguoe/p/8467887.html

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

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