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

最新推荐文章于 2022-10-17 19:05:45 发布
最新推荐文章于 2022-10-17 19:05:45 发布
阅读量842 收藏
点赞数
分类专栏： 前端 文章标签： 面试题 HTML5布局 DIV
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YeZhongDeFeng/article/details/78454373
版权

看到一道面试题，如题，试着来做做，采用两种方法：法一，设几个DIV，再调；法二，按照参考书上的做法。

法一：(方法不一定好，欢迎多多交流。)

<!DOCTYPE html>
<!--两个DIV-->
<html>
<body>
<div style="width:100%;height:200px;margin-top:500px;location:center;border:none;background-color:red;position:absolute">
</div>
<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">
</div>
</body>
</html>
<!DOCTYPE html>
<!--三个DIV-->
<html>
<body>
<div style="width:100%;height:100px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:100%;height:100px;margin-top:400px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:16%;height:1000px;margin-left:42%;margin-right:42%;margin-top:0px;border:none;background-color:red;position:absolute">
</div>
</body>
</html>
<!DOCTYPE html>
<!--五个DIV-->
<html>
<body>
<div style="width:100%;height:65px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:100%;height:65px;margin-top:435px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:100%;height:65px;margin-top:370px;location:center;border:none;background-color:red;position:absolute"></div>
<div style="width:8%;height:1000px;margin-left:42%;margin-right:50%;margin-top:0px;border:none;background-color:red;position:absolute"></div>
<div style="width:8%;height:1000px;margin-left:49%;margin-right:42%;margin-top:0px;border:none;background-color:red;position:absolute"></div>
</body>
</html>
法二：

具体思想为：两个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并；三个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并，然后在外面包一个空的DIV盒子；五个，红十字标志由五个正方形组成，代表五大洲，画一个正方形，然后复制成五个，再将五个正方形摆放好位置，组成红十字形状，圈选五个正方形之后，选择焊接选项，再填充红色（C：0，M：100，Y：100，K：0），去除边框颜色即可。

<!DOCTYPE html>
<!--两个DIV-->
<html>
<body>
<div style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
<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>
</body>
</html>
<!DOCTYPE html>
<!--三个DIV-->
<html>
<body>
<div type="margin:auto">
<div style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>
<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>
</div>
</body>
</html>
<!DOCTYPE html>
<!--五个DIV-->
<html>
<body>
<div style="width:200px;height:200px;margin-left:500px;margin-top:100px;border:none;background-color:red;position:absolute"></div>
<div style="width:200px;height:200px;margin-left:300px;margin-top:300px;border:none;background-color:red;position:absolute"></div>
<div style="width:200px;height:200px;margin-left:500px;margin-top:300px;border:none;background-color:red;position:absolute"></div>
<div style="width:200px;height:200px;margin-left:700px;margin-top:300px;border:none;background-color:red;position:absolute"></div>
<div style="width:200px;height:200px;margin-left:500px;margin-top:500px;border:none;background-color:red;position:absolute"></div>
</body>
</html>






夜中的风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5前端面试大全-包含大厂面试题_25个md文件分类面试题.rar
10-30
这里将收集我做过的所有的前端面试笔试题，并根据自己的理解提供解答，以及一些关于前端找工作方面的经验等。 前端笔试面试题部分 试题链接 原题概述 标签分类 1.md CSS部分 CSS 2.md HTML部分 HTML 3.md FEX ...
div中间十字线
weixin_42388503的博客
06-29 2165
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;1&lt;/title&gt;       &lt;style&gt;        *{            padding: 0;            marg
DIV+CSS练习2
cyseria的专栏
06-11 451
用5个DIV实现水平垂直均居中显示一个宽50px,高200px的正十字架，用两种方法实现 大概试了下，然后也百度了一下，发现是某年腾讯的面试题，原题是显示宽50px，高150px的十字架，分别用2个，3个，5个DIV构造。今天练习了5个的，慢慢的调试关于margin负值有了点新的理解了解的一点小知识：当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方
css前端笔试题--分别用2、3、5个div实现十字架效果
airshine的专栏
10-13 878
两个： [code="html"] div{ background:red; position:absolute; top:50%; left:50%; width:50px; height:50px; } #d1{ width:150px; margin: -25px 0px 0px -75px; } #d2{ height:150p...
使用1个标签，2个标签，3个标签，5个标签实现一个十字架
fendouzhe123的专栏
12-19 1091
2、请使用1个标签，2个标签，3个标签，5个标签实现一个如下图的水平、垂直都居中短边为50px，长边为150px的在界面垂直和水平居中红色十字架。（网上已经很多答案，你还能想到哪些方法，不限浏览器） 实现代码如下： /**包裹div样式*/ div.container{ width: 150px; height:150px; float:left;
用1个 2个3个 5个div实现 十字架
weixin_30621959的博客
12-28 267
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .que{ position: relative; margin: 20p...
练习：红色十字架
weixin_42077503的博客
03-09 794
使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。 十字架 要求： 1.使用2个div完成 2.使用3个div完成 3.使用5个div完成 答案： 1个div： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
前端进阶---制作一个由5个100*100DIV组成的十字架---
奔跑的小小牛
03-09 1709
前端进阶—制作一个由5个100*100DIV组成的十字架—制作一个由5个100*100DIV组成的十字架（如➕），中间放一张icon（自己喜欢的64*64的小图片）在DIV里垂直水平居中，每一个DIV要有边框阴影尽量的让其漂亮。easyicon 可在此寻找对应的图片。* { padding: 0; margin: 0; }.content { width: 300px;
你可能不熟练的十个前端HTML5经典面试题
11-21
作为从事HTML5开发者来说，面试是必不可少的，本文给大家总结介绍了十道大家可能并不熟练的前端HTML5经典面试题，希望对大家的面试能带来一定的帮助，下面话不多说了，来一起看看详细的介绍吧。 1.什么是HTML5？ 答...
每个前端工程师都应该去了解的前端面试题总结(一)
01-08
当我们需要找工作的时候，面试对于我们每个程序员来说都是非常重要的环节，掌握一些面试题技巧是非常有必要的，今天主要分享几个js有关的面试题 作用域 var num1 = 55 var num2 = 66 function f1(num, num1) { num =...
10个经典的Java面试题集合共5页.pdf.zip
10-29
10个经典的Java面试题集合共5页.pdf.zip
Web前端求职一线大厂面试真题、习题、面试经验大汇总（最新版整理，包含19个大厂面试真题，千道前端习题）
最新发布
04-14
公司面试真题（19个大厂，每个大厂包含若干问题） 01、前端基础篇(293题) 02、前端进阶篇(30题) 03、前端高级篇(91题) 04、计算机基础(14题) 05、高频考点(108题) 06、精简版(26题) 07、综合问题(125题) 08、复习题...
css实现红十字会图标
weixin_33849942的博客
09-16 397
　　一同事应聘TX，出了一道题，分别用1,2,3,5个标签实现红十字会图标，图标水平、垂直居中，短边50px，长边150px。如图： 　　 　　其中用2,3,5个标签实现不难，略过。一个标签的我比较有兴趣，午休时间想了下，睡醒后就动手实现，代码如下： 　　 1 div{ 2 width: 150px; 3 height...
css 并排放置两个div
热门推荐
且听风吟的博客
07-16 1万+
今天写代码时遇到了并排放置两个div的需求，所以总结了一下，共有以下几种方法： （1）设置浮动： a）两个div都设置为左浮动： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放置两个div在同一行</title> <st...
两个div实现十字架
monkindey的专栏
03-15 5283
先不用说什么，直接上效果图 好像是医院的标志似的。 那这个是怎么做出来的呢？我先讲讲我的思路吧！首先只用了两个div的话，我们只能把这个十字架分成两部分，那是哪两部分呢？ 一个是横的，一个是竖的。 先说横的div要具备的属性，首先高度为50px 、宽度为150px 、背景颜色为红色 而对于竖的呢，高度为150px 、宽度为50px 、背景颜色为红色。 那我们就先来做个雏形吧
html制作十字架,使用重构的方式制作出一个红色十字架
weixin_35307279的博客
06-10 1244
使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架使用2个div完成#heng,#shu{left:50%;top:50%;position:absolute;background-color:#f00;}#shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}#heng{width...
微前端如何做样式隔离？
奇舞周刊
10-17 833
问题示例 className 命名重复导致的样式冲突 我们先创建一个问题，验证样式冲突的存在：在主应用和子应用上分别使用 div 元素插入一段标题，两个 div 元素使用相同的 class 名 title，分别在 class 中设置文字颜色，主应用 color 值为 yellow，子应用为 red。由于子应用的样式晚于主应用加载，所以主应用的样式会被覆盖。以上问题在同时加载多个子应用时也会存在：各...
从GitHub上下载vue开源项目并在自己的电脑上运行
FengInYe的博客
04-13 4674
首先声明，一般GitHub上的作者都会说明具体的运行步骤，在这里针对新手来提出一个引导性的方案。1. 环境准备（1）安装nodejs，具体步骤不多说。在电脑上找到 运行－输入cmd - 输入node -v ，命令可以来查看电脑上是否已装 node , 该命令代表电脑上node的版本。（2）查看npm版本具体步骤同上，输入的命令为npm -v（3）通过npm命令安装 淘宝的镜像及其命令 cnpm ,...
发十个热门前端面试题
07-28
当然，请看以下十个热门前端面试题： 1. 请解释什么是跨域，以及如何解决跨域问题？ 2. 请描述一下浏览器的渲染过程。 3. 请解释什么是闭包，并提供一个闭包的示例。 4. 请解释什么是事件冒泡和事件捕获，并说明它们之间的区别。 5. 请解释什么是防抖和节流，并提供它们的应用场景。 6. 请解释什么是虚拟 DOM，以及它与真实 DOM 的区别。 7. 请解释什么是事件委托（事件代理），并提供一个使用事件委托的示例。 8. 请解释什么是异步编程，以及常见的异步编程方式有哪些？ 9. 请解释什么是响应式设计（Responsive Design），以及如何实现响应式布局？ 10. 请解释什么是单页面应用（SPA），以及它的优缺点。 希望这些问题可以帮助你准备前端面试。如果你有更多问题或者需要深入探讨，请随时告诉我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值