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. attribute用法

    attribute 用法 摘要: 在学习linux内核代码及一些开源软件的源码(如:DirectFB),经常可以看到有关__attribute__的相关使用.本文结合自己的学习经历,较为详细的介绍了_ ...

  2. hdu-Coins

    http://acm.hdu.edu.cn/showproblem.php?pid=2844 Problem Description Whuacmers use coins.They have coi ...

  3. GDALDataset的创建和销毁

    之前在GDALDestroyDriverManager 分析中没有看到对dGDALDatasert的回收.先看一个例子程序,这个例子打开了一个tif文件,读取了一些基本信息. 为了简单示范,没有写成C ...

  4. Python Matplotlib绘制气温图表

    代码中数据从 www.wunderground.com/history/ 下载 #coding=utf-8 import csv from datetime import datetime from ...

  5. java web 拦截器、过滤器理解

    1.首先要明确什么是拦截器.什么是过滤器 1.1 什么是拦截器: 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加 ...

  6. [Tools] Batch Create Markdown Files from a Template with Node.js and Mustache

    Creating Markdown files from a template is a straightforward process with Node.js and Mustache. You ...

  7. 安装Tomcat指定JDK ——转

    转自:http://www.cnblogs.com/lioillioil/archive/2011/10/08/2202169.html 一.应用实例 一般情况下一台服务器只跑一个业务,那么就直接配置 ...

  8. Lucene Spatial构建地理空间索引

    一.Maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  9. Android数据库之基本概念(上)

    1.Android数据库简单介绍 Android通过结合使用SQLite数据库和Content Provider,提供了结构化数据的持久功能. SQLite数据库能够通过一种结构化的.易于管理的方法来 ...

  10. java学习重点

    1.Java的三种体系: J2SE 用于桌面开发,低端商务开发(Java to Standard Edition) : J2ME 用于移动电话.电子消费品.嵌入式开发(Java to Micro Ed ...