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>
  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>
  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），去除边框颜色即可。

  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>
  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>
    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>

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

  1. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  2. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

  3. web前端面试题库

    web前端面试题及答案   1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.    (Q2) ...

  4. 第136天：Web前端面试题总结（理论）

    Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...

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

    金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...

  6. 好程序员分享Web前端面试题汇总JS篇之跨域问题

    为什么80%的码农都做不了架构师?>>>   好程序员分享Web前端面试题汇总JS篇之跨域问题,接着上一篇文章我们继续来探讨web前端面试必备面试题. 跨域解决方案 1. 通过jso ...

  7. 【web前端面试题整理02】前端面试题第二弹袭来，接招！

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  8. 【重点--web前端面试题总结】

    前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...

  9. 说说那些经典的web前端面试题

    阅读目录 JavaScript部分 JQurey部分 HTML/CSS部分 正则表达式 开发及性能优化部分 本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在 ...

随机推荐

  1. iOS:手势的详解UIGestureReconizer

    手势类:UIGestureReconizer   父类: 手势状态枚举 typedef NS_ENUM(NSInteger, UIGestureRecognizerState) { UIGesture ...

  2. go语言基础之开发工具

    一.安装go 1.在linux环境下安装go yum install go -y 2.go下载地址 https://golang.org/dl/ 3.windows安装版本 go1.9.2.windo ...

  3. http://www.linuxidc.com/Linux/2016-04/129738.htm

    http://www.linuxidc.com/Linux/2016-04/129738.htm

  4. 解析PHP中如何将数组变量写入文件

    在用PHP记录日志,或者是 Ajax 请求出错想要 debug 的时候.我们一般都会将信息写入到一个指定的文件当中.然后根据相应的信息来处理问题.比如笔者最喜欢在用 Ajax 取不到数据的时候,在PH ...

  5. YARN Application执行流程

    原文见  http://xiguada.org/yarn-application_run/ 本节简单描述了一个Application在YARN上的执行流程,希望对初识YARN的同学提供一些帮助. 图1 ...

  6. android简单的答题游戏

    笔者最近开始沦陷于android,从开始入门到现在已经快半个月的时间,于是便写一个较综合,用到了数据库,多线程操作,以及时钟的添加和停止消除,activity之间的动画转换等,适用于初学者学以致用的小 ...

  7. 利用SmtpClient发送邮件

    1  163邮箱 HOST:smtp.163.com public static string CreateTimeoutTestMessage(string server) { string Suc ...

  8. 在weblogic上配置数据源

    转自:http://blog.csdn.net/weijie_search/article/details/2756585 旁白 这是在weblogic9.0+mysql5.1的环境下配置的数据源.其 ...

  9. ssh认证

    密钥认证 密码验证会造成账户口令的外泄,不安全,基于账号的保密性考虑,可以采用密钥验证实现远程连接. Linux--Linux 1.Linux客户端主机上生成密钥文件 ssh-keygen -t rs ...

  10. escape(s, t)函数的实现

    https://item.taobao.com/item.htm? spm=686.1000925.0.0.9TTLHO&id=535006878999 <span style=&quo ...