正如大家所知道的那样，div是一个块级元素，也是网页编写过程中使用频率最高的一个元素，通过不同的样式控制可以实现一些最常见的页面效果，当然也可以实现一些比较复杂的页面效果，这里就展示一个本人面试过程中遇到的一个问题，如何使用最简单css样式通过div实现“回”字型图样？父类div必须设置的属性是什么？当然实现方法很多很多，下面就和大家分享一下我自己的方法（兼容Trident,Gecko,Presto,WebKit等内核浏览器），先看效果：

再看详细的代码：

<html>
<head>
<title>Test</title>
<style type="text/css">
#bigcontent {
    width: 400px;
    height: 400px;
    margin: 50px 0 0 50px;
    position: absolute;
    background: yellow;
    text-align: center;//这个是父类元素必须设置的样式，目的是让所有子元素都水平居中摆放
}

#precontent {
    width: 350px;
    height: 350px;
    margin-top: 30px;
    display: inline-block;//这个是子元素必须设置的样式，否则其他浏览器不兼容
    background: blue;
}

#middlecontent {
    width: 300px;
    height: 300px;
    background: red;
    margin-top: 25px;
    display: inline-block;
}
#premidcontent{
    width: 250px;
    height: 250px;
    display: inline-block;
    background: lime;
    margin-top: 25px;
}
#smallcontent {
    width: 200px;
    height: 200px;
    display: inline-block;
    background: green;
    margin-top: 25px;
}
#finalcontent{
   width: 150px;
   height: 150px;
   display: inline-block;
   background:orange;
   margin-top: 25px;
   text-align: center;
}
</style>
</head>
<body>
    <div id="bigcontent">
        <div id="precontent">
            <div id="middlecontent">
                <div id="premidcontent">
                    <div id="smallcontent">
                       <div id="finalcontent">
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

使用纯css代码实现div的“回”字型“叠放”效果的更多相关文章

  1. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  2. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  3. 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

  4. 纯css实现同一页面下选择之后更换内容效果

    实现效果为如下:在同一页面下,当我选中输入手机号时,出现手机号输入框,当我选中输入验证码时,出现验证码输入框,当我选中设置密码时,出现密码框 在这里有一个小技巧,就是  1.对下面的输入框设置同样的样 ...

  5. 10分钟使用纯css实现完整的响应式导航菜单栏的效果

    在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是 使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目 ...

  6. 纯css代码写旋转动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 页面元素固定在页面底部的纯css代码（兼容IE6）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  9. 前端每日实战：126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...

随机推荐

  1. 让IE6支持position:fixed的方法，CSS expression与JavaScript eval讲解

    做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscrol ...

  2. [转载]C#播放流媒体的几种方法

    做视频开发要学的东西真多,不知道如何入门,乱打乱撞,慢慢摸索吧! 首先搭建Windows Meida Server ,方法很简单,试试就会.在这里需要声明的是,这几种方法 都可以播放 本地视频.并且基 ...

  3. sb2-admin

    近期开发中遇到的问题总结   最近准备把后台管理系统重新设计开发下,使用了bootstrap,在网上找了个漂亮的后台模板:sb2-admin,在使用中遇到了不少问题,总结下,以免以后忘记. 1.EF5 ...

  4. CSS学习笔记：Media Queries

    CSS3提供了Media Queries(媒体查询)的概念,可以利用它查询以下数据: 1.浏览器窗口的宽和高: 2.设备的宽和高: 3.设备的手持方向,横向/竖向: 4.分辨率. @media规则的语 ...

  5. Cocos2d-x在Android在竖屏切换

    在Cocos2d-x在,屏幕类型的默认设置是横屏,当我们需要切换到肖像,能够在项目目录打开proj.android目录.找到AndroidManifest.xml文件,直接打开,然后就可以看到里面:s ...

  6. QueryOver<T>

    NHibernate 数据查询之QueryOver<T>   一.限制运算符 Where:筛选序列中的项目WhereNot:反筛选序列中的项目 二.投影运算符 Select:创建部分序列的 ...

  7. Linux内核策略介绍

      Linux内核策略介绍学习笔记   主要内容 硬件 策略 CPU 进程调度.系统调用.中断 内存 内存管理 外存 文件IO 网络 协议栈 其他 时间管理 进程调度 内核的运行时间 系统启动.中断发 ...

  8. Javascript技巧实例精选(1)—鼠标选择动态改变网页背景颜色

    >>点击这里下载html源文件代码<< 采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色 这是截图 相应的Javascript源代码为: var hex ...

  9. Dynamics CRM不发布JS调试

    本博客已迁移至   http://www.krely.cn/ 上个项目做了一年多,大多是在做JS的开发,由于开发人数比较多,着实被坑的不轻.因为JS修改完成之后必须要发布,对于我们动辄几千行的JS的调 ...

  10. 图解 ENGLISH

    人在江湖,总得会几门手艺,英语必不可缺,下面几张图诠释了什么叫强大: