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

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

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

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问https://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

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

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

延伸阅读
标签: Web开发
论坛上提到这样的问题:css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多。 CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。 实现方法: 首先将小图片整合到一张大的图片上 然后根...
标签: Web开发
CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器,以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在webjx.com大量的技术文档中,也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CS...
标签: Web开发
很多朋友在使用Deamweaver8的时候都会遇到这样的情况:给当前编辑的文档链接了CSS文件,并对页面元素应用了定义的CSS样式,但在DW8中却看不到任何效果。如下图。 主要原因就是DW8新多出了一个“样式呈现工具栏”,该工具栏允许你轻易的为不同的媒体类型,例如屏幕、手持设备和打印输出进行设计。其他的支持媒体类型有投影设备, TT...
下面有褐色分泌物怎么办呢? 女性性生活如果是很频繁,再加上不注意自己的阴部卫生的话,是很容易引起一些妇科疾病的发生的,尤其是会影响分泌物的分泌,现在是出现了褐色的分泌物了,说明是内分泌出现了严重的问题和炎症的,应该积极的药物治疗,可以口服一些抗生素之类的药物减缓病情的发生,最好是注意自己的阴部卫生,性爱的时候一定要...
标签: Web开发
xhtml css页面制作过程中问题的解决方案,说是解决方案应该有点过了,充其量只不过是给刚刚开始学标准页面制作的朋友们的一些小建议,如果讲得不对的地方请多多包涵,当然也可以提出你们更好的方法,大家相互学习交流,共同成长! 无论是谁,在制作页面的过程都是会碰到这样或者那样的问题,出了问题就肯定要解决。解决问题的前提是要知道问题...

经验教程

553

收藏

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