Home > Article > Web Front-end > 帮忙看看怎么布局几张图片_html/css_WEB-ITnose
帮忙看看怎么布局几张图片_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:42:21815browse
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 这些都要你自己去弄了。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：为什么不能在火狐里播放视频，但是在ie里能播放_html/css_WEB-ITnoseNext article：dreamweaver字体问题求教_html/css_WEB-ITnose