两个div实现十字架

最新推荐文章于 2024-07-10 10:14:49 发布
最新推荐文章于 2024-07-10 10:14:49 发布
阅读量5.3k 收藏 3
点赞数 1
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/monkindey/article/details/21279683
版权

效果图

先不用说什么，直接上效果图

好像是医院的标志似的。

思路

那这个是怎么做出来的呢？我先讲讲我的思路吧！首先只用了两个div的话，我们只能把这个十字架分成两部分，那是哪两部分呢？一个是横的，一个是竖的。先说横的div要具备的属性，首先高度为50px 、宽度为150px 、背景颜色为红色而对于竖的呢，高度为150px 、宽度为50px 、背景颜色为红色。

实际行动

那我们就先来做个雏形吧

<body>
		<div class="horizontal"></div>
		<div class="vertical"></div>
</body>
对于的css 如下

最低0.47元/天 解锁文章
monkindey
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端进阶---制作一个由5个100*100DIV组成的十字架---
奔跑的小小牛
03-09 1727
前端进阶—制作一个由5个100*100DIV组成的十字架—制作一个由5个100*100DIV组成的十字架（如➕），中间放一张icon（自己喜欢的64*64的小图片）在DIV里垂直水平居中，每一个DIV要有边框阴影尽量的让其漂亮。easyicon 可在此寻找对应的图片。* { padding: 0; margin: 0; }.content { width: 300px;
练习：红色十字架
weixin_42077503的博客
03-09 994
使用重构的方式制作出一个如下图的水平、垂直都居中短边为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;...
html用div做十字架,腾讯面试题：用一个div创建一个十字架
weixin_29147347的博客
06-16 1573
去腾讯面试了一趟，做了一套css的笔试题，其中有一道印象深刻：用一个div做出红色十字架。思路遇到这种题保持冷静不要慌，想想什么能用上。一开始我想的是把一个正方形的四个角挖掉(用四个白色正方形遮盖住四个角)，后来发现还是不太好实现，接着想想其实可以用after和before伪类。这道题的难点在于捋清思路，要想到利用伪类为自己创造条件。原理原理是利用伪类before和after创造出两条直线，利用绝...
html制作十字架,使用重构的方式制作出一个红色十字架
weixin_35307279的博客
06-10 1300
使用重构的方式制作出一个如下图的水平、垂直都居中短边为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...
css前端笔试题--分别用2、3、5个div实现十字架效果
airshine的专栏
10-13 902
两个： [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...
css3绘制十字架,纯CSS3实现绘制各种图形实现代码详细整理
weixin_31985599的博客
08-03 451
请在现代浏览器(IE9+、firefox、chrome、safari、opera等浏览器)中查看效果：复制代码代码如下:#circle {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}复制代码代码如下:#oval...
通过float实现两个div不换行
09-25
实现两个div不换行最常用的方法莫过于使用css的float属性，下面有个小示例，大家可以参考下
两个div并排的实现代码
09-25
在给定的标题和描述中，提到了使用CSS的左右浮动布局来实现两个`div`并排显示。下面我们将详细讲解这个知识点。 首先，我们需要了解`div`元素。`div`是HTML中的一个块级元素，它的默认行为是在页面上占据一整行。...
两个div如何并排一行具体该怎么实现
09-25
两个div并排一行情况也是很常见的，下面有个示例可以实现，大家可以参考下
通过浮动+定位实现两个div在同一行
09-25
主要介绍了通过浮动+定位实现两个div在同一行，感兴趣的朋友可以参考下
让两个Div并排显示的多种方法
09-25
让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，感兴趣的朋友可以参考下本
html图片十字形,在CSS中创建十字形
weixin_39973416的博客
06-04 695
您可以使用只有伪元素的方式来实现：#cross {width: 100px;height: 100px;position: relative;}#cross:before,#cross:after {content: "";position: absolute;z-index: -1;background: #d00;}#cross:before {left: 50%;width: 30%;mar...
div中间十字线
weixin_42388503的博客
06-29 2193
&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
WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字
FengInYe的博客
11-06 865
看到一道面试题，如题，试着来做做，采用两种方法：法一，设几个DIV，再调；法二，按照参考书上的做法。 法一：(方法不一定好，欢迎多多交流。) 法二： 具体思想为：两个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并；三个，用DIV创建一个矩形，然后复制一个，以中心点旋转90度，两个合并，然后在外面包一个空的DIV盒
怎么用一个元素实现十字架
Wonder
10-12 884
先上最终效果图： 利用:before和:after伪类实现 css代码： 总结：就是给一个宽50px，高150px的div前后加了两个宽高都为50px的正方形。
css3绘制十字架,纯css画十字架 8.21
weixin_28957683的博客
08-03 1231
好久没玩这个了，继续。绘制一个如图红色十字架，方块长150px，宽50px：要求：使用2个div完成使用3个div完成使用5个div完成两个div:html:css:.a,.b {position: absolute;left: 50%;top: 50%;background: red;}.a {width: 150px;height: 50px;}.b {width: 50px;height: ...
HTML+CSS大风车及十字架的实现
记录编程生活
08-31 5391
说起大风车勾起了多少人的回忆， 我们今天就利用CSS做一个大风车并且让它转起来。 首先还是老规矩——先上效果图： 一................ 不是说好了转起来的吗？怎么在哪
scss概念及使用
最新发布
m0_74293254的博客
07-10 798
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
div分左右两个div实现
04-28
可以使用CSS的flexbox布局来实现将一个div分为左右两个div。以下是一个示例代码： HTML代码： ```html <div class="container"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> </div> ``...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值