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. Android内存优化4 了解java GC 垃圾回收机制2 GC执行finalize的过程

    1. finalize的作用 finalize()是Object的protected方法,子类可以覆盖该方法以实现资源清理工作,GC在回收对象之前调用该方法. finalize()与C++中的析构函数 ...

  2. iOS：quartz2D绘图（绘制渐变图形）

    quartzD可以用来绘制渐变图形,即图形向外或向内发散,会变得越来越模糊. 渐变分为线性渐变和径向渐变,所谓线性渐变,就是图形以线的方式发散,发散后一般呈现出矩形的样子:而径向渐变,就是以半径的大小 ...

  3. [转载]Delphi 版 everything、光速搜索代码

    近日没啥事情,研究了一下 everything.光速搜索原理.花了一个礼拜时间,终于搞定. 废话不多说,直接上代码: unit uMFTSearchFile; { dbyoung@sina.com 2 ...

  4. 过滤xss攻击和sql注入函数

    /**+----------------------------------------------------------* The goal of this function is to be a ...

  5. MFC【17-2】线程和线程同步化

    17-2线程同步 Windows支持4中类型的同步对象,可以用过来同步由并发运行的线程执行的操作: 临界区 互斥量 事件 信号量 MFC在名为CCriticalSection\CMutex\CEven ...

  6. scrapy爬虫框架实例一，爬取自己博客

    本篇就是利用scrapy框架来抓取本人的博客,博客地址:http://www.cnblogs.com/shaosks scrapy框架是个比较简单易用基于python的爬虫框架,相关文档:http:/ ...

  7. HDU5312 Sequence

    题意:t组数据,每组数据给个m.问m最少能由几项形如3*n*(n-1)+1的数表示 eg 7=1(n=1)+1(n=1)+1(n=1)+1(n=1)+1(n=1)+1(n=1)+1(n=1);     ...

  8. Linux内核project导论——linux学习和职业曲线（刚開始学习的人，中级，高级都可參考）

    Linux世界介绍 给自己定级 门外汉: 不会安装操作系统 不会用虚拟机(安装和使用) 入门级: 熟悉常见的发行版,甚至装过而且能用一些特殊发行版(比如kali)做过一些简单的图形界面的使用. 会一些 ...

  9. wifi简单笔记

    什么是wifi: Wi-Fi是一种可以将个人电脑.手持设备(如PDA.手机)等终端以无线方式互相连接的技术.Wi-Fi是一个无线网路通信技术的品牌,由Wi-Fi联盟(Wi-Fi Alliance)所持 ...

  10. Adobe Acrobat Pro 11安装激活

    运行keygen.exe,点击"generate"一次,生成一个序列号(在安装过程中需要填写序列号). 断网,打开软件,直到出现以下界面,点击蓝色字体"连接Interne ...