CSS实战:解决图片下面有空隙的简单的方法

2016-02-19 19:42 13 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享CSS实战:解决图片下面有空隙的简单的方法,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

  解决方法:在图片的css中加 vertical-align:bottom; 效果

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  演示代码: 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title解决图片下有空隙/title
/head
body
style
*{margin:0px;padding:0px;}
#l1 {float:left;background:#000;padding:20px;margin:50px;}
#l1 ul li {list-style:none;}
#l1 ul li img {vertical-align:bottom; display:block;}
/style
div id="l1"
  ul
  liimg src="图片地址1" //li
  liimg src="图片地址2" //li
  liimg src="图片地址3" //li
  liimg src="图片地址4" //li
  /ul
/div
/body
/html

来源:http://www.tulaoshi.com/n/20160219/1621596.html

延伸阅读
案例分析 图钉提问: 半年前出了一场车祸,我从车上掉下来,把鼻子给磕了,鼻梁凹陷了,现在恢复正常后。想做隆鼻的手术,不知道做这个手术效果会怎么样。听朋友说还是不错的。但是我从来没有做过手术。有点担心啊。 想得到帮助:请问医生隆鼻手术有危险吗?谢谢啊。 图老师解答: 病情分析:       着整形技...
标签: Web开发
CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器,以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在webjx.com大量的技术文档中,也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CS...
标签: Web开发
很多朋友在使用Deamweaver8的时候都会遇到这样的情况:给当前编辑的文档链接了CSS文件,并对页面元素应用了定义的CSS样式,但在DW8中却看不到任何效果。如下图。 主要原因就是DW8新多出了一个“样式呈现工具栏”,该工具栏允许你轻易的为不同的媒体类型,例如屏幕、手持设备和打印输出进行设计。其他的支持媒体类型有投影设备, TT...
标签: Web开发
由于现在很多div+css中的图片都写在了css里面。 直接用浏览器的另存为已经不能完全保存到本地 我在网上收集了一些方法,和一些自己的实践,希望对你有所帮助 第一:苦力型 查看网页源文件,然后找到css路径,直接输入到ie地址框内下载既可。打开css找出里面的图片一个一个下载 第二:偷懒型 保存到本...
标签: Web开发
xhtml css页面制作过程中问题的解决方案,说是解决方案应该有点过了,充其量只不过是给刚刚开始学标准页面制作的朋友们的一些小建议,如果讲得不对的地方请多多包涵,当然也可以提出你们更好的方法,大家相互学习交流,共同成长! 无论是谁,在制作页面的过程都是会碰到这样或者那样的问题,出了问题就肯定要解决。解决问题的前提是要知道问题...

经验教程

452

收藏

41
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部