zoukankan      html  css  js  c++  java

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

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <!--两个DIV-->  
    3. <html>  
    4. <body>  
    5. <div style="100%;height:200px;margin-top:500px;location:center;border:none;background-color:red;position:absolute">  
    6. </div>  
    7. <div style="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="100%;height:100px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>  
    6. <div style="100%;height:100px;margin-top:400px;location:center;border:none;background-color:red;position:absolute"></div>  
    7. <div style="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="100%;height:65px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>  
    6. <div style="100%;height:65px;margin-top:435px;location:center;border:none;background-color:red;position:absolute"></div>  
    7. <div style="100%;height:65px;margin-top:370px;location:center;border:none;background-color:red;position:absolute"></div>  
    8. <div style="8%;height:1000px;margin-left:42%;margin-right:50%;margin-top:0px;border:none;background-color:red;position:absolute"></div>  
    9. <div style="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="1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>  
    6. <div style="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="1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>  
    7. <div style="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="200px;height:200px;margin-left:500px;margin-top:100px;border:none;background-color:red;position:absolute"></div>  
      6. <div style="200px;height:200px;margin-left:300px;margin-top:300px;border:none;background-color:red;position:absolute"></div>  
      7. <div style="200px;height:200px;margin-left:500px;margin-top:300px;border:none;background-color:red;position:absolute"></div>  
      8. <div style="200px;height:200px;margin-left:700px;margin-top:300px;border:none;background-color:red;position:absolute"></div>  
      9. <div style="200px;height:200px;margin-left:500px;margin-top:500px;border:none;background-color:red;position:absolute"></div>  
      10. </body>  
      11. </html>  
  • 相关阅读:
    WebApi开启CORS支持跨域POST
    VueJs生产环境部署
    VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用
    微信分享JSSDK-invalid signature签名错误的解决方案
    关于后台系统自动生成的一点思考
    编写高质量代码改善C#程序的157个建议[为类型输出格式化字符串、实现浅拷贝和深拷贝、用dynamic来优化反射]
    编写高质量代码改善C#程序的157个建议[10-12]
    编写高质量代码改善C#程序的157个建议[4-9]
    编写高质量代码改善C#程序的157个建议[正确操作字符串、使用默认转型方法、却别对待强制转换与as和is]
    Oracle初级索引学习总结
  • 原文地址：https://www.cnblogs.com/yangguoe/p/8467887.html
Copyright © 2011-2022 走看看