<!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. 【转】sun.misc.BASE64Encoder找不到jar包的解决方法

    只需要在project build path中先移除JRE System Library,再添加库JRE System Library,重新编译后就一切正常了.(太神奇了,转自http://blog. ...

  2. juce中的CallbackMessage

    这个类作为所有消息的基类,主要是包装了回调函数 virtual void messageCallback() = 0; /* ===================================== ...

  3. C#正则提取HTML中img的url值

    /// <summary> /// 取得HTML中所有图片的 URL. /// </summary> /// <param name="sHtmlText&qu ...

  4. EBS OAF中如何在多行表中实现附件功能

    EBS OAF中如何在多行表中实现附件功能 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 在OAF中使用附件功能之前,要先明白Entity( ...

  5. Android Fragment StartActivityForresult调用实例

    fragment里面的onActivityResult 怎样才能被调用,很简单,就一句话, startActivityForResult(intent, getActivity().RESULT_FI ...

  6. MyEclipse数据库反向生成实体类

    MyEclipse数据库反向生成实体类 “计应134(实验班) 凌豪” 当我们在开发项目涉及到的表太多时,一个一个的写JAVA实体类很是费事.然而强大的MyEclipse为我们提供简便的方法:数据库反 ...

  7. php获取网页内容方法 小偷程序 采集程序

    抓取到的内容在通过正则表达式做一下过滤就得到了你想要的内容,至于如何用正则表达式过滤,在这里就不做介绍了,有兴趣的,以下就是几种常用的用php抓取网页中的内容的方法.1.file_get_conten ...

  8. mini-httpd源码分析-match.h

    //字符串匹配,匹配返回 1,否则返回 0. //pattern可以通过任意个 | 字符,组合match_one中pattern的功能 int match(const char* pattern, c ...

  9. sqlite3编译与查询

    1.sqlite3 http://www.sqlite.org/ 下载 wget http://www.sqlite.org/2014/sqlite-amalgamation-3080403.zip ...

  10. 关于Linux Kernel 2.6.28 以上有缺陷，在第208.5天自行重啟的问题

        今天看到一转帖如下: Linux Kernel 2.6.28 以上有缺陷,在第208.5天自行重啟 https://access.redhat.com/knowledge/solutions/ ...