<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .que{

    position: relative;

    margin: 20px;

  }

  .que .h, .que .v, .que .s{

    background: pink;

  }

  .que1{

   height: 200px;

  }

  .que1 .h{

    position: absolute;

    top: 50px;

    width: 150px;

    height: 50px;

  }

  .que1 .v{

    position: absolute;

    width: 50px;

    height: 150px;

    left: 50px;

  }

  .que2{

  }

  .que2 .s, .que2 .h{

    position: relative;

    height: 50px;

  }

  .que2 .h{

    width: 150px

  }

  .que2 .s{

    width: 50px;

    margin-left: 50px;

  }

  .que3 .s{

    width: 50px;

    height: 50px;

  }

  .que3 .s:nth-child(1),.que3 .s:nth-child(5){

    margin: 0 50px;

  }

  .que3 .s:nth-child(2),.que3 .s:nth-child(3),.que3 .s:nth-child(4){

    display: inline-block;

    margin-right: -4px;

    margin-bottom: -4px;

  }

  .que4{

    position: relative;

  }

  .que4 .h{

    position: absolute;

    top: 50px;

    width: 150px;

    height: 50px;

  }

  .que4 .h:after{

    content: ' ';

    display:block;

    position: absolute;

    width: 50px;

    height: 150px;

    left: 50px;

    top:-50px;

    background-color: pink;

  }

  </style>

</head>

<body>

  <div class="que que1">

    <div class="h"></div>

    <div class="v"></div>

  </div>

  <div class="que que2">

    <div class="s s1"></div>

    <div class="h"></div>

    <div class="s s2"></div>

  </div>

  <div class="que que3">

    <div class="s"></div>

    <div class="s"></div>

    <div class="s"></div>

    <div class="s"></div>

    <div class="s"></div>

  </div>

  <div class="que que4">

    <div class="h"></div>

  </div>

<script>

</script>

</body>

</html>

用1个 2个3个 5个div实现 十字架的更多相关文章

  1. .net点选验证码实现思路分享

    哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...

  2. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  3. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  4. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  5. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  6. Html Agility Pack 解析Html

    Hello 好久不见 哈哈,今天给大家分享一个解析Html的类库 Html Agility Pack.这个适用于想获取某网页里面的部分内容.今天就拿我的Csdn的博客列表来举例. 打开页面  用Fir ...

  7. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  8. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  9. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  10. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

随机推荐

  1. 教你如何利用初级C#语言更改银行存款!!!!

    您是否对生活现状不满意? 您是否总是感叹工资太少? 您是否经常发现自己相中的物品又降价了然而自己却还是只能望洋兴叹? 没关系!让我来拯救你的钱包! 接下来进入正题: 要想更改自己的银行存款首先得找到一 ...

  2. js工具常用方法

    /* function obj$(id) 根据id得到对象 function val$(id) 根据id得到对象的值 function trim(str) 删除左边和右边空格 function ltr ...

  3. C语言实现有序二叉树（1）

    在cpp中使用的C语言 头文件 /* 有序二叉树 BsTree */ #ifndef _BT_H #define _BT_H /*节点*/ typedef struct BsTreeNode { in ...

  4. navigator.geolocation例子

    navigator.geolocation例子 <html> <head> <script type="text/javascript"> fu ...

  5. CSS超链接-光标-缩放

    CSS超链接-光标-缩放 1.CSS 中链接的使用2.CSS 中光标的使用3.CSS 中缩放的使用 1.CSS 中链接的使用超链接伪类属性a:link    表示该超链接文字尚未被点选a:visite ...

  6. GoF——职责链模式

    职责链模式(chain of Responsibility):使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它 ...

  7. 关于 实时推送技术--WebSocket的 知识分享

    今天学习了关于WebSocket的知识,觉得挺有用的,在这记录一下,也和大家分享一下!!有兴趣的可以看看哦 WebSocket简介 Web领域的实时推送技术,也被称作Realtime技术.这种技术要达 ...

  8. IE WebDriver 因保护模式无法启动的解决 (转载)

    现在Win7 已经应用很多了,即使是最原始的Win7 也是IE8,最新的patch后,都升到了IE11 Win7下预装高版本IE的情况下,启动IE WebDriver可能会出现: org.openqa ...

  9. 19.java.lang.NoClassDefFoundException

    java.lang.NoClassDefFoundException未找到类定义错误 当Java虚拟机或者类装载器试图实例化某个类,而找不到该类的定义时抛出该错误. 违背安全原则异常:Secturit ...

  10. Oracle EBS-SQL (SYS-21):sys_用户名与人员对应关系查询.sql

    select fu.user_name 用户名,         fu.description 描述,              (select ppf.FULL_NAME              ...