Maison > interface Web > tutoriel HTML > 帮忙看看怎么布局几张图片_html/css_WEB-ITnose

帮忙看看怎么布局几张图片_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 09:42:21
original
844 Les gens l'ont consulté

css div 布局

效果图:

资源图片:
图片1

图片2

图片3

图片4

图片5


页面代码肿么写啊.......

回复讨论(解决方案)

<style type="text/css">    .msg-list li{ text-align:left; margin-bottom:10px; padding:10px; color:red;border-radius:5px; border:1px solid red;}    .msg-list li:nth-child(odd){ border-left-width:10px;}    .msg-list li:nth-child(even){ text-align:right; color:green; border:1px solid green;border-right-width:10px;}</style><section class="msg-center">    <ul class="msg-list">        <li>            <div class="msg-title">                <time>2013-01-24 09:24:23</time>            </div>            <div class="msg-main">                <p>你好,很高兴为你服务</p>            </div>        </li>        <li>            <div class="msg-title">                <time>2013-01-24 09:24:23</time>            </div>            <div class="msg-main">                <p>你好,很高兴为你服务</p>            </div>        </li>        <li>            <div class="msg-title">                <time>2013-01-24 09:24:23</time>            </div>            <div class="msg-main">                <p>你好,很高兴为你服务</p>            </div>        </li>    </ul></section>
Copier après la connexion

XML/HTML code?123456789101112131415161718192021222324252627282930313233