CSS如何实现网易的盖楼效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:18
Original
1259 Leute haben es durchsucht

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>
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage