<!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. TCP/IP的三次握手协议

    关于TCP/IP的三次握手协议,这篇文章中有详细的介绍,很通俗易懂,什么时候忘了,都可以过来瞧两眼,保证很快就明白了. 首先TCP/IP协议分为三个阶段:建立连接(握手阶段),数据传输阶段,连接终止阶 ...

  2. Linux程序设计 读笔1

    第一章 入门 Linux应用程表现为两种特殊类型文件:可执行文件 + 脚本文件 /bin 二进制文件目录,存放启动系统时用到的标准程序 /usr/bin 用户二进制文件目录,存放用户使用的标准程序 / ...

  3. mysql sql学习（一）mysql连接

    mysql -h 192.168.3.103 -uroot -p123456 //连接数据库 \s :查看数据库状态 show databases; 查看是数据库 create database if ...

  4. ajax调用后台Java

    //html部分 <input type='text' placeholder='用户名' id="username" name="username" c ...

  5. stackoverflow收藏

    Make a video using several .png images http://stackoverflow.com/q/13590976/5624248 Specifying and sa ...

  6. Activity四种launchMode

    更多内容在这里查看 https://ahangchen.gitbooks.io/windy-afternoon/content/ 总共有四篇关于Activity,task,launchMode的文章, ...

  7. SQL Server 行的删除与修改-------------（未完待续P222 deep SQL Server 222 ）

    删除: 1.堆表:当行被删除时,不会自动重新组织页面上的空间.删除行时不会从物理页面上删除, 而只是把行偏移设置为 0 .表示空间没有使用.除了页面上没有被回收空间之外,堆中的 空白页也常常不会被回收 ...

  8. oracle sql命令行中上下左右使用

    yum -y install readline,rlwrap

  9. oracle字符集查看修改

    一.什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系.ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储,处理,检索数据.它使数据库 ...

  10. c# 搭建服务端 byte[] 处理（3）

    数据的传输中,为防止数据传输过程中被获取解析 造成数据的不安全,一般都会采取各类的方式对数据进行加密.压缩等操作,在客户端或服务端以相同的算法解析即可获得数据,一定程度上减小了数据在中间过程被获取数据 ...