正如大家所知道的那样，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. NET Socket服务编程

    smark https://github.com/IKende/ .NET Socket服务编程之-高效连接接入编 在.NET上编写网络服务深入都有2,3年了,而这些时间时如何在.NET里实现网络服务 ...

  2. 打印man手册为pdf文件

    只需要一个命令就可以了! merlin@tfAnalysis:~/projects/tfadc$ man -t errno | ps2pdf - ~/errno.pdf 输出的文件很漂亮.

  3. js 模拟QQ聊天窗口图片播放效果（带滚轮缩放）

    页面效果如下: 完整代码如下: <!DOCTYPE html> <html> <head> <title>Test</title> < ...

  4. Building Modern Web Apps－构建现代的 Web 应用程序

    Building Modern Web Apps-构建现代的 Web 应用程序 视频长度:1 小时左右 视频作者:Scott Hunter 和 Scott Hanselman 视频背景:Visual ...

  5. c#跟objective-c语言特性

    c#跟objective-c语言特性的对比 拿c#语言跟objective-c做个对比,记录下自己认为是差不多的东西. 学过objc的人相信对category这个东西肯定不陌生,它可以让我们在没有源码 ...

  6. 一个Shift的后门程序，可以让你可以进入你不知道密码的电脑

    1.前提 你可以在平时亲身接触状态电脑,哪怕是在电脑主人不在的时候(虽然主人不在,或者关机了,进入电脑是要密码的). 2.原理 利用电脑连续按5次Shift会触发粘滞键,它会运行c:\winows\s ...

  7. Java多线程学习笔记--生产消费者模式

    实际开发中,我们经常会接触到生产消费者模型,如:Android的Looper相应handler处理UI操作,Socket通信的响应过程.数据缓冲区在文件读写应用等.强大的模型框架,鉴于本人水平有限目前 ...

  8. 编写简单的hashCode方法

    为什么要编写hashCode方法 hashCode在平时不常自己去编写,但是在真正高质量的代码中却是必不可少的. 看看Java中的Object对hashCode方法的描述: 1.返回对象的哈希码,是为 ...

  9. Push Notification总结系列（二）

    Push Notification系列概括: 1.Push Notification简介和证书说明及生成配置 2.Push Notification的iOS处理代码和Provider详解 3.Push ...

  10. Bootstrap相关优质项目推荐

    Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册 根据最新的 jQuery 1.1 ...