帮忙看看怎么布局几张图片_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-21 09:42:21

原创

848人浏览过

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>

登录后复制

XML/HTML code?123456789101112131415161718192021222324252627282930313233

木有人会还是太简单了。。。。。。。。。。。。。。。。。

这个是C/S的了？这样也行？

下班了。明天来给你弄。

下班了。明天来给你弄。好吧

做了图片调整先上调整后的图片。

<!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-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{margin:0;padding:0;}.tonghua1,.tonghua2{clear:both;min-width:240px; max-width:480px;}.bg1{background:url(http://img.my.csdn.net/uploads/201304/02/1364866735_8840.png) no-repeat left top;height:76px;float:left;padding-left:15px;}.bg1R{background:url(http://img.my.csdn.net/uploads/201304/01/1364787857_5361.png) no-repeat right top;width:15px;float:left;height:76px;}.bg2{background:url(http://img.my.csdn.net/uploads/201304/02/1364866749_2858.png) no-repeat right top;height:76px;float:right;padding-right:15px;}.bg2R{background:url(http://img.my.csdn.net/uploads/201304/01/1364787862_3051.png) no-repeat left top;width:15px;float:right;height:76px;}.time{font-size:14px;color:#b0b0b0;}.tonghua2 .time{text-align:right;}.talk{font-size:16px;font-weight:bold;}.tonghua1 .talk{color:#fe709e;}.tonghua2 .talk{color:#87b741;}</style></head><body><div class="tonghua1">  <div class="bg1">    <div class="time">2013-4-1  09:46:50</div>    <div class="talk">你好</div>  </div>  <div class="bg1R"></div></div><div class="tonghua2">  <div class="bg2">    <div class="time">2013-4-1  09:46:50</div>    <div class="talk">你好</div>  </div>  <div class="bg2R"></div></div></body></html>

登录后复制

大概的做了下。具体细节你自己去调。手机的分辨率 480 320 240 这些都要你自己去弄了。