Heim > Artikel > Web-Frontend > 帮忙看看怎么布局几张图片_html/css_WEB-ITnose
帮忙看看怎么布局几张图片_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:42:21815Durchsuche
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 这些都要你自己去弄了。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：为什么不能在火狐里播放视频，但是在ie里能播放_html/css_WEB-ITnoseNächster Artikel：dreamweaver字体问题求教_html/css_WEB-ITnose