正如大家所知道的那样，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. ASP.Net TextBox控件只允许输入数字

    原文:ASP.Net TextBox控件只允许输入数字 1.1.在Asp.Net TextBox 控件的 OnKeyPress 事件中指定输入键盘码必须为数字: <asp:TextBox ID= ...

  2. 6. SQL Server数据库监控 - 如何告警

    原文:6. SQL Server数据库监控 - 如何告警 常用的告警方式大致有:短信.邮件.应用程序 (beep提示,图标提示,升窗提示等),可是不能一直坐在电脑前看着应用程序,或者用脚本部署监控,根 ...

  3. Thrift学习

    Thrift学习 一:thrift介绍 Thrift是facebook开发的用来处理各不同系统之间数据通讯的rpc服务框架,后来成为apche的开源项目.thrift支持多种程序语言,包括Java,P ...

  4. C#实现文档转换成PDF

    网上有很多将doc.ppt.xls等类型的文档转换成pdf的方法,目前了解到的有两大类: 1.使用虚拟打印机将doc.ppt.xls等类型的文档 2.使用OFFICE COM组件 我采用了第二种方法实 ...

  5. web开发与设计--js数据类型，js运营商

    1. js数据类型划分:号码值类型,布尔,串 由typeof能够看到什么类型的数据被详述. 举例: <span style="font-family:Microsoft YaHei;f ...

  6. C语言JSON-RPC

         近期对json-rpc比較感兴趣,思想非常easy,并且看到了非常多不同语言的实现.在github上 hmngomes 的 json-rpc-c (实现的是server端,基于TCP流),短 ...

  7. php和表单(1)

    先来一段处理表单的html代码(test.html) <form action="index.php" method="post"> name : ...

  8. FileWriter字符输出流和FileReader字符输出流

    //FileWriter public class FileWriterDemo { //字符流:适用于文本文件,以字符为单位进行操作,经常和缓冲流一起使用 /**  * 字符流操作步骤:  * 1. ...

  9. c# 数据类型占用的字节数

    最近一直在使用C#中的关于各种数据类型转化为字节或者字节转化为各种数据类型进行数据解析.但是在此之前必须知道各种数据类型在字节中占的字节数. 所以在此归总. bool -> System.Boo ...

  10. [Usaco2007 Dec]穿越泥地[bfs][水]

    Description 清早6:00,Farmer John就离开了他的屋子,开始了他的例行工作:为贝茜挤奶.前一天晚上,整个农场刚经受过一场瓢泼大雨的洗礼,于是不难想见,FJ 现在面对的是一大片泥泞 ...