1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7.   .que{
  8.     position: relative;
  9.     margin: 20px;
  10.   }
  11.   .que .h, .que .v, .que .s{
  12.     background: pink;
  13.   }
  14.   .que1{
  15.    height: 200px;
  16.   }
  17.   .que1 .h{
  18.     position: absolute;
  19.     top: 50px;
  20.     width: 150px;
  21.     height: 50px;
  22.   }
  23.   .que1 .v{
  24.     position: absolute;
  25.     width: 50px;
  26.     height: 150px;
  27.     left: 50px;
  28.   }
  29.   .que2{
  30.  
  31.   }
  32.   .que2 .s, .que2 .h{
  33.     position: relative;
  34.     height: 50px;
  35.   }
  36.   .que2 .h{
  37.     width: 150px
  38.   }
  39.   .que2 .s{
  40.     width: 50px;
  41.     margin-left: 50px;
  42.   }
  43.   .que3 .s{
  44.     width: 50px;
  45.     height: 50px;
  46.   }
  47.   .que3 .s:nth-child(1),.que3 .s:nth-child(5){
  48.     margin: 0 50px;
  49.   }
  50.   .que3 .s:nth-child(2),.que3 .s:nth-child(3),.que3 .s:nth-child(4){
  51.     display: inline-block;
  52.     margin-right: -4px;
  53.     margin-bottom: -4px;
  54.   }
  55.   .que4{
  56.     position: relative;
  57.   }
  58.   .que4 .h{
  59.     position: absolute;
  60.     top: 50px;
  61.     width: 150px;
  62.     height: 50px;
  63.   }
  64.   .que4 .h:after{
  65.     content: ' ';
  66.     display:block;
  67.     position: absolute;
  68.     width: 50px;
  69.     height: 150px;
  70.     left: 50px;
  71.     top:-50px;
  72.     background-color: pink;
  73.   }
  74.   </style>
  75. </head>
  76. <body>
  77.   <div class="que que1">
  78.     <div class="h"></div>
  79.     <div class="v"></div>
  80.   </div>
  81.   <div class="que que2">
  82.     <div class="s s1"></div>
  83.     <div class="h"></div>
  84.     <div class="s s2"></div>
  85.   </div>
  86.   <div class="que que3">
  87.     <div class="s"></div>
  88.     <div class="s"></div>
  89.     <div class="s"></div>
  90.     <div class="s"></div>
  91.     <div class="s"></div>
  92.   </div>
  93.   <div class="que que4">
  94.     <div class="h"></div>
  95.   </div>
  96. <script>
  97.  
  98. </script>
  99. </body>
  100. </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. Linux 环境变量和source命令 （转）

    可能是班门弄斧了,仅share给尚不知道的童鞋. 1.       问题的来源: 为什么我们编译Android代码时,需要输入:  source ./build/envsetup.sh  或者 . . ...

  2. Swift 基本基本运算符

    Swift 1,赋值运算符 Swift赋值表达式是没有值的,不支持连续赋值. 2,算术运算符 除数可为0 var f=1/0.0 求余的结果的正负取决于被除数 3,溢出运算符* 根据二进制来进行计算 ...

  3. jquery结合Highcharts插件实现动态数据仪表盘图形化显示效果

    仪表盘显示效果如图: 方法一效果图: 方法二效果图(插件版本4.0.1): ​ js代码如下: $(function(){ //方法一: var chart = new Highcharts.Char ...

  4. echarts实现上海地域PM值（map、timeline）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. SQL Server MySQL 中的 in 与 null

    例子: create table t(x int,y int); insert into t(x,y) values(1,1),(2,2),(null,null); 查询一: select x,y f ...

  6. PC/SC

    简介 PC/SC规范由微软公司与世界其它著名的智能卡厂商组成的PC/SC工作组提出的.PC/SC规范是一个基于WINDOWS平台的一个标准用户接口(API),提供了一个从个人电脑(Personal C ...

  7. 内核级HOOK的几种实现与应用

    实现内核级 HOOK 对于拦截.分析.跟踪系统内核起着致关重要的作用.实现的方法不同意味着应用侧重点的不同.如想要拦截 NATIVE API 那么可能常用的就是 HOOK SERVICE TABLE  ...

  8. 关于httpservletrequest的获取真实的ip

    via 值为: 下面是一些DemoWTP/1.1 GDSZ-PS-GW010-WAP05.gd.chinamobile.com (Nokia WAP Gateway 4.0 CD3/ECD13_C/N ...

  9. mysql binlog 混合模式 出现的基于sql的数据不一致,主要是now()这类函数导致

  10. 接口返回json

    use Mojolicious::Lite; use JSON qw/encode_json decode_json/; # /foo?user=sri get '/api' => sub { ...