Rumah >hujung hadapan web >html tutorial >帮忙看看怎么布局几张图片_html/css_WEB-ITnose
帮忙看看怎么布局几张图片_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 09:42:21846semak imbas
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 这些都要你自己去弄了。
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：为什么不能在火狐里播放视频，但是在ie里能播放_html/css_WEB-ITnoseArtikel seterusnya：dreamweaver字体问题求教_html/css_WEB-ITnose