<!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. Javascript 常用

    第一步,实现百度输入法的页面布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  2. DEV控件自定义排序实现

    一般的控件或者组件都支持按照某一列进行排序.但是,这种排序是根据数据源里的数据默认按照降序或升序排序的,同时这样的排序与字段的类型有关. 假设现在字段的类型是字符串类型 ,但是,存储的数据时数字加一些 ...

  3. 为什么用户主目录下.bash_profile没有自动执行

    请注意 一般登录当前用户后 .bash_profile会自动运行 如果不自动运行请查看是不是切换用户的时候使用的su 用户名而不是su - 用户名 添加中间这个 - 后 会除了切换用户外还会加载该用户 ...

  4. EC读书笔记系列之16：条款35、36、37、38、39、40

    条款35 考虑virtual函数以外的其他选择 记住: ★virtual函数的替代方案包括NVI手法及Strategy模式的多种形式.NVI手法自身是一个特殊形式的Template Method模式 ...

  5. python3.5之mysql扩展

    最近在学习廖雪峰的python3的教程,这是官方http://www.liaoxuefeng.com/,建议大家想学习python的同学可以去看看,真的是在网上能找到的最好文本教程,没有之一 在廖老实 ...

  6. CSS自学笔记（6）:CSS的模型

    CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式. 图片来源:w3school.com.cn 元素(element)是一个html文档的实际内容区域,依次由 ...

  7. Core开发-MVC 使用dotnet 命令创建Controller和View

    NET Core开发-MVC 使用dotnet 命令创建Controller和View   使用dotnet 命令在ASP.NET Core MVC 中创建Controller和View,之前讲解过使 ...

  8. Linux 内核无线子系统

    Linux 内核无线子系统 浅谈 Linux 内核无线子系统 Table of Contents 1. 全局概览 2. 模块间接口 3. 数据路径与管理路径 4. 数据包是如何被发送? 5. 谈谈管理 ...

  9. 解密电子书之三：MCU（君正）

    汉王科技,早先使用的是Marvell的Xscal(ARM架构).而后据说出于功耗与价格的考虑,汉王旗下的全线产品,除了双品牌的T61(ALEX)以外,都使用北京君正提供的产品.君正的4740,基于MI ...

  10. java实现二维码生成的几个方法

    1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/ ...