Rumah > Artikel > hujung hadapan web > CSS如何实现网易的盖楼效果_html/css_WEB-ITnose
CSS如何实现网易的盖楼效果_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:41:181203semak imbas
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
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css3.0新增属性学习_html/css_WEB-ITnoseArtikel seterusnya：CSS中的:after和:before的作用是什么_html/css_WEB-ITnose