[html] view plain copy
  1. <!DOCTYPE html>
  2. <!--两个DIV-->
  3. <html>
  4. <body>
  5. <div style="width:100%;height:200px;margin-top:500px;location:center;border:none;background-color:red;position:absolute">
  6. </div>
  7. <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">
  8. </div>
  9. </body>
  10. </html>
[html] view plain copy
  1. <!DOCTYPE html>
  2. <!--三个DIV-->
  3. <html>
  4. <body>
  5. <div style="width:100%;height:100px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
  6. <div style="width:100%;height:100px;margin-top:400px;location:center;border:none;background-color:red;position:absolute"></div>
  7. <div style="width: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. <!--五个DIV-->
  3. <html>
  4. <body>
  5. <div style="width:100%;height:65px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
  6. <div style="width:100%;height:65px;margin-top:435px;location:center;border:none;background-color:red;position:absolute"></div>
  7. <div style="width:100%;height:65px;margin-top:370px;location:center;border:none;background-color:red;position:absolute"></div>
  8. <div style="width:8%;height:1000px;margin-left:42%;margin-right:50%;margin-top:0px;border:none;background-color:red;position:absolute"></div>
  9. <div style="width: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. <!--两个DIV-->
  3. <html>
  4. <body>
  5. <div style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
  6. <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>
  7. </body>
  8. </html>
[html] view plain copy
  1. <!DOCTYPE html>
  2. <!--三个DIV-->
  3. <html>
  4. <body>
  5. <div type="margin:auto">
  6. <div style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
  7. <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>
  8. </div>
  9. </body>
  10. </html>
[html] view plain copy
  1. <!DOCTYPE html>
  2. <!--五个DIV-->
  3. <html>
  4. <body>
  5. <div style="width:200px;height:200px;margin-left:500px;margin-top:100px;border:none;background-color:red;position:absolute"></div>
  6. <div style="width:200px;height:200px;margin-left:300px;margin-top:300px;border:none;background-color:red;position:absolute"></div>
  7. <div style="width:200px;height:200px;margin-left:500px;margin-top:300px;border:none;background-color:red;position:absolute"></div>
  8. <div style="width:200px;height:200px;margin-left:700px;margin-top:300px;border:none;background-color:red;position:absolute"></div>
  9. <div style="width:200px;height:200px;margin-left:500px;margin-top:500px;border:none;background-color:red;position:absolute"></div>
  10. </body>
  11. </html>

转载于:https://www.cnblogs.com/yangguoe/p/8467887.html

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

  1. 应届生web前端面试题_2020最新Web前端经典面试题试题及答案（持续更新）

    Web前端面试题 Web前端面试题:说说你对webpack的看法 解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...

  2. JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...

    作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...

  3. java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题，想不拿到offer都难！...

    想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...

  4. Web前端面试题集锦

    Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...

  5. javascript array添加图片_史上最全的web前端面试题汇总及答案JavaScript之二（二）...

    作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...

  6. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上

    引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...

  7. WEB前端面试题整理

    WEB前端面试题 文章目录 WEB前端面试题 一.html部分 1.Doctype有什么作用?标准模式与兼容模式有什么区别 2.标准模式与兼容模式(怪异模式)各有什么区别? div1和div2之间的距 ...

  8. 吐血熬夜整理!2020最全web前端面试题!!!你想要的我这都有！！！

    吐血总结了下web前端面试题,分享给大家,以后还会持续更新,有些题目有多种答案,本文只给出其中一种,哪里有问题的欢迎指出. Html&CSS 1.谈谈你对web标准的理解 web标准的理解 2 ...

  9. web前端面试题(面试题大全)

    web前端面试题[持续更新中...] React系列 UmiJS系列 Webpack系列 ES6系列 Vue系列 JavaScript系列 CSS系列 HTTP系列 模块化系列 版本控制系列 Type ...

最新文章

  1. 模拟Servlet本质
  2. app显示服务器图片不显示,如何读取并显示服务器上不在webapp目录上的图片？
  3. Git命令按人统计提交次数和代码量
  4. 02-JDBC连接MySQL数据库【查询数据】
  5. 小样本学习 | Learning to Compare: Relation Network for Few-Shot Learning
  6. [翻译] Fast Image Cache
  7. python对二维数组统计某一行的去重计数_Python数据分析笔记——Numpy、Pandas库
  8. 渗透测试工程师前景_网络安全工程师教你：Kali Linux之Metasploit渗透测试基础（一）...
  9. markdown图床使用小记
  10. 为什么FFFF FFFF是4GB
  11. 平面设计师okr_设计团队如何推进OKR，实现设计赋能？
  12. VLAN隔离技术 — MUX VLAN
  13. keras使用LSTM生成文本
  14. 医院云PACS管理系统源码
  15. 教你玩转商业字体设计
  16. c++镇国之争游戏(带存档,无bug)
  17. 再见了 SELECT * ！大厂的 MySQL 查询优化方案，确实牛逼！
  18. 2022最新408考纲
  19. OUC软件开发实验4
  20. 实现简单的自定义音乐播放器

热门文章

  1. BugkuCTF-Misc：隐写
  2. Photoshop画笔的混合算法实现（逆推）
  3. 直接定址表---汇编学习笔记
  4. Jquery 【select 通过value来寻找对应的项name】
  5. Jackson 配置 ObjectMapper
  6. javascript怎么监听 form.submit事件
  7. 操作系统（十八）进程同步与进程互斥
  8. Java开发：什么是序列化？
  9. c 获取数据库数据计算机,使用c从单板计算机写入mysql数据库使用c
  10. Guide To Using The Gnosis Multisig Wallet