CSS如何实现网易的盖楼效果

CSS如何实现网易的盖楼效果:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
在很多论坛性质或者回复功能的网站都有盖楼效果,就是回复与回复之间能够叠加,这个感觉比较人性化,没有体验过这样的效果的朋友可以去网易找一个比较火热的帖子看一下它的回复就明白了。下面就介绍一下如何实现此种功能,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
*
{
  margin:0px;
  padding:0px;
}
#wrap{width:500px;}
.box
{
  margin-bottom:12px;
  overflow:hidden;
  padding:3px;
  background:#FFFFEE;
  border:solid 1px #999;
}
</style>
</head>
<body>
<div id="wrap">
  <div class="box">
    <div class="box">
      <div class="box">
        <div class="box">
          <div class="box">
            <div class="box">
              <div class="box">
                <div class="box">
                  <div class="box">我是楼主</div>
                  我是二楼 </div>
                我是三楼 </div>
              我是四楼 </div>
            我是五楼 </div>
          我是六楼 </div>
        我是七楼 </div>
      我是八楼 </div>
    我是酒楼 </div>
</div>
</body>
</html>

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/512.html

时间: 2024-11-05 22:07:11

CSS如何实现网易的盖楼效果的相关文章

仿腾讯盖楼爬墙新闻评论的CSS实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿腾讯爬墙式新闻评论的CSS实现</t

贴吧/盖楼的技术实现(PHP)

2015年3月5日 14:36:44 目标, 实现类似百度贴吧的基本功能 实现: 1. 存储, 将数据库(MYSQL)当作一个大的结构体数组, 每一条记录用作为一个结构体, 记录父帖信息, 子帖信息, 兄弟帖信息 2. 显示, 因为回复帖在浏览器中显示的时候也是独占一行, 只是比楼主的帖子多了些缩进而已, 因此我将所有的回帖(子回帖, 孙子回帖....脑补网易盖楼)都看做是有着不同缩进的普通帖子 3. 技术上, 将某一贴的所有回帖, 子回帖, 孙子回帖....一次性独到内存中(缺点,可用缓存解决

用HTML和CSS实现WWDC 2015上的动画效果

用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015 原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年,苹果都会召开一次重大的会议.WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会. 每一年的这个时候,他们都会制造出很多新创意,今年,我被一个用简单圆圈和形状制作出来的图标所惊艳,于是我决定用HTML和CSS来实现它. WWDC 15邀请卡 苹果的

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

Android用TabLayout实现类似网易选项卡动态滑动效果

此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果,详见 Android选项卡动态滑动效果这篇文章 这里我们用TabLayout来实现这一效果.TabLayout是Android Design Support Library库中的控件. Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给

纯CSS实现的右侧底部简洁悬浮效果

我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. 在线演示 源码下载 HTML 我们希望悬浮效果最后加载,因此一般将其放置在页面HTML的末尾,我们建立一个.side-bar,里面包含了QQ在线咨询,微信(鼠标滑向弹出二维码效果),微博,以及Email联系方式等内容,这些内容我们都以<a>标签包裹. <div class="side-bar"&

CSS 实现按钮及线呼吸灯效果

1. [代码]style    view sourceprint?01<style>02            body{03                font-family:'Segoe UI Light','Segoe UI',Arial,'微软雅黑',sans-serif;04                font-size: 20px;05                color:#333333;06 07            }08            .breath

css 导航,菜单对应页面切换效果实现方法

实现原理: 每个菜单有多个li标签,每个li标签含一个id,li标签的id用来标记:点击效果 每个页面有一个id,这个id的作用是对应每个li标签的点击链接对应的页面,它的作用是用来标记:li标签的href指向页面位置 li标签的href的指向,通过伪类target指向唯一的页面id: #app-version:target,如果不打算有点击效果,可以在兄弟选择符 ~ 后跟当前 li 标签的 id;如果想要有点击效果,则要在兄弟选择符 ~ 后跟当前li标签的所有父节点 css: /*点击菜单,选

css实现漂亮的文字滑动折叠效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ