<!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. TSQL 根据经纬度计算两点间的距离;返回米(m)

    -- ============================================= -- Author:Forrest -- Create date: 2013-07-16 -- Des ...

  2. oracle ORA-00913: 值过多

    --oracle中查看表是否被锁 查看表是否被锁   SELECT /*+ rule*/   a.sid, b.owner, object_name, object_type   FROM v$loc ...

  3. 测试通用的InsertOrUpdate

  4. oracle --- spoon

    一.Spool常用的设置 set arraysize 5000;  //此参数可提高SPOOL卸载的速度,最大可以设置为5000 set autotrace on;    //设置允许对执行的sql进 ...

  5. css 清除浮动 兼容IE+, FF

    上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

  6. 如何在 静态编译的QT 5.5.1 中 使用数据库插件连接 ODBC（调用静态插件）

    前段时间由于工作的关系,需要编写一个将数据插入到 Sql server 2012 的桌面软件. 由于之前使用的是MFC,偶然间接触到了Qt后,被它的简洁惊艳到了,于是便毅然而然的转投到了Qt的怀抱,哈 ...

  7. WISPr1.0

    王桢珍 王兵 侯志强 苑红 中国移动研究院 网络技术研究所, 北京100053 摘要   本文详细介绍了WLAN国际漫游的WISPr1.0技术规范并探讨其具体实现,包括基于WISPr1.0的WLAN国 ...

  8. poj1563---蜗牛爬井

    #include <stdio.h> #include <stdlib.h> int main() { int dayTh; float Udis,currentHeight, ...

  9. cocos2d-x -- 渠道SDK【棱镜】接入(2)

    上一章<cocos2d-x -- 渠道SDK[棱镜]接入(1)>,已经接入好了SDK.如今要准备加入渠道了,以豌豆荚为例. 详细流程: 1.加入渠道:

  10. dataset 用法（2）

    1.为DataTable添加列 (1)添加列 DataTable  tbl = ds.Tables.Add("User"); DataColumn col =tbl.Columns ...