Tomgo的生活博客 » 图片并列 http://www.54tomgo.com 生活|电影|新闻|IT话题 Wed, 29 Jun 2011 06:41:05 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Div+css代码实现图片的并列连接的效果 http://www.54tomgo.com/archives/424.html http://www.54tomgo.com/archives/424.html#comments Sat, 29 Aug 2009 10:02:15 +0000 tomgo http://www.54tomgo.com/?p=424
Div + Css的代码
Div + Css的代码

今天打开FireFox，发现我们公司的网站一个广告栏飞到右侧去了。我想是使用了表格的缘故。网站是基于Div+css做的，但是自己对DIV建站水平不足，很多地方还保留了TD TR的表格。下决心修改了一下，现在没有不会飞到右侧了。这个代码的作用：在photoshop割图后，要用div接拼起来，实现几张图片的连接效果。对代码进行记录：

  1. #adimglist 
  2. img{
  3. float:left; /*定义浮动到左侧，这样就可以实现几个连接的图片的并列了*/
  4. margin: 0;/*定义图片的边框为零*/
  5. }

显示效果

  1. <style>
  2. #adimglist 
  3. img{
  4. float:left;
  5. margin: 0;
  6. }
  7. </style>
  8. <div id="adimglist"><a href="http://www.yanwotang.com/catalog_160.html" target="_blank"><img src="http://www.yanwotang.com/syssite/home/shop/1/template/Cn00016/images/tupian_01.jpg" alt="正官庄高丽参" width="155" height="150" border="0"></a>
  9. <a href="http://www.yanwotang.com/product_140.html" target="_blank"><img src="http://www.yanwotang.com/syssite/home/shop/1/template/Cn00016/images/tupian_02.jpg" alt="顶级白燕条皇" width="125" height="150" border="0"></a>
  10. <a href="http://www.yanwotang.com/product_114.html" target="_blank"><img src="http://www.yanwotang.com/syssite/home/shop/1/template/Cn00016/images/tupian_03.jpg" alt="三角白燕盏" width="130" height="150" border="0"></a>
  11. </div>
]]> http://www.54tomgo.com/archives/424.html/feed 0