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. windows2012 IIS部署GeoTrust证书踩过的坑。

    系统:windows2012 环境:IIS8 在阿里云上买了GeoTrust证书, 按照说明下载证书到服务器,  导入证书, 给IIS站点部署https. 阿里云部署帮助文档:https://help ...

  2. postgres10配置huge_pages

    操作系统 修改/boot/grub2/grub.cfg 定位到第一个'menuentry 'CentOS Linux',在"linux16 /vmlinuz"最后面添加 numa= ...

  3. 前端对比插件JS

    https://github.com/kpdecker/jsdiff demo http://kpdecker.github.io/jsdiff/ 缺点:文件大于10M的就比较不了了 用于比对两段HT ...

  4. [转]Loading and Running a Local Package Programmatically

    本文转自:http://msdn.microsoft.com/en-us/library/ms136090.aspx You can run Integration Services packages ...

  5. Screen多视窗远程控制管理服务

    Screen是一款由GNU开源计划开发的多视窗远程控制管理服务,简单来说就是为了解决上述情况中网络异常中断或同时控制多个远程窗口而设计的程序. Screen服务程序不仅能够解决上述问题,而且用户在使用 ...

  6. Github开源项目分享

    Type LibDescription   LibLocation Android SlidingMenu   https://github.com/jfeinstein10/SlidingMenu ...

  7. rsa实现js前台加密java后台解密

    前段时间写了一个rsa前台加密到后台用java解密,下面共享下实现思路: 准备工作:第三方包是必须的 bcprov-jdk15on-148.jar commons-codec-1.7.jar comm ...

  8. .Net Framework 之 框架图

    .Net Framework框架图,如下图:  它表明了这么一种编写软件的方式或者说表明了.Net平台下开发软件的思想和规范. .Net Framework框架实际只包含两部分: 1.公共语言运行时( ...

  9. Android File类 根据官方文档理解

    File有四个构造函数        public File(File dir,String name)             参数为File和String,File制定构造的新的File对象的路径 ...

  10. docker基本

    安装(centos): Docker 运行在 CentOS 7 上,要求系统为64位.系统内核版本为 3.10 以上.Docker 运行在 CentOS-6.5 或更高的版本的 CentOS 上,要求 ...