"图片与文字排版"
Bootstrap 2.3.2 Snippet by wuxincheng

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="top-barbox"> Home </div> <div class="zbody"> <div class="row-fluid"> <div class="span8"> <div class="bs-docs-example"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="https://www.firstmidwest.com/uploadedImages/WM_Meet-592x240.jpg" alt=""> <div class="carousel-caption"> <h4>哥不是传说</h4> <p>时间会慢慢沉淀,有些人会在你心底慢慢模糊。</p> </div> </div> <div class="item"> <img src="http://i.simplecd.me/d9QGdyTx.jpg" alt=""> <div class="carousel-caption"> <h4>你走的那天,我决定不掉泪,迎着风撑着眼帘用力不眨眼</h4> <p>那一瞬间,我终于发现,那曾深爱过的人,早在告别的那天,已消失在这个世界。心中的爱和思念,都只是属于自己曾经拥有过的回忆!我想,有些事情是可以遗忘的,有些事情是可以纪念的,有些事情能够心甘情愿,有些事情一直无能为力。</p> </div> </div> <div class="item"> <img src="http://www.mmobomb.com/wp-content/uploads/2011/04/592x240.jpg" alt=""> <div class="carousel-caption"> <h4>此时情重,源为心痛。</h4> <p>当眼泪流下来,才知道,分开也是另一种明白。</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div> </div> <div class="pbox"> <div class="row-fluid"> <div class="span7"> <img src="http://www.my7475.com/wp-content/uploads/2008/08/my747508080302.jpg"> </div> <div class="span5"> <h4>Thumbnail label</h4> <p> <i class="icon-calendar"> </i>2014年01月24日 15:43:33    <i class="icon-bookmark"> </i>新闻 </p> <p>那一瞬间,我终于发现,那曾深爱过的人,早在告别的那天,已消失在这个世界。心中的爱和思念,都只是属于自己曾经拥有过的回忆! 我想,有些事情是可以遗忘的,有些事情是可以纪念的,有些事情能够心甘情愿,有些事情一直无能为力。</p> </div> </div> </div> <div class="pbox"> <div class="row-fluid"> <div class="span7"> <img src="http://p.img.eol.cn/images/1022/2012/0105/1325767183_12_jszx.jpg"> </div> <div class="span5"> <h4>Thumbnail label</h4> <p> <i class="icon-calendar"> </i>2014年01月24日 15:43:33    <i class="icon-bookmark"> </i>新闻 </p> <p>那一瞬间,我终于发现,那曾深爱过的人,早在告别的那天,已消失在这个世界。心中的爱和思念,都只是属于自己曾经拥有过的回忆! 我想,有些事情是可以遗忘的,有些事情是可以纪念的,有些事情能够心甘情愿,有些事情一直无能为力。</p> </div> </div> </div> <ul class="pager"> <li class="disabled"><a href="#">上一页</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">...</a></li> <li><a href="#">88</a></li> <li><a href="#">下一页</a></li> </ul> </div> <div class="span4"> <div class="right-box"> <img src="http://www.qqxzai.com/uploads/allimg/c120323/13324335MJ0-H0I.jpg"> </div> </div> </div> </div> <div class="top-barbox"> Bootsnipp.com by Maks Surguy. | Google+ | Site Privacy policy | Featured snippets are MIT license. </div>
html, body { font-family: Arial, 微软雅黑, Verdana, Geneva, Tahoma, sans-serif, 宋体; } .zbody { max-width: 900px; padding: 20px 20px 0px 20px; margin: 0 auto 0px; background-color: #FFFFFF; font-size: 12px; border: 1px solid #e5e5e5; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0px 0px 50px gray; -moz-box-shadow: 0px 0px 50px gray; box-shadow: 0px 0px 50px gray; } .pbox { max-width: 600px; padding: 10px 10px 10px 0px; margin: 0 auto 0px; font-size: 12px; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; } .right-box { padding: 10px 10px 10px 10px; font-size: 12px; border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; } .top-barbox { max-width: 921px; /** height: 30px; */ background-color: #000000; padding: 5px 10px 5px 10px; margin: 0 auto 0px; color: #FFFFFF; font-size: 12px; border: 1px solid #E0E0E0; }

Related: See More


Questions / Comments: