论坛 | 博客 | 校园 | 四六级 | 日语 | 学院 | 考研 | 求职 | 公务员| 认证 | 计算机 | 两性 | 科幻 | 笑话 | 小游戏 | 两性 | MV | 游戏 | 情感| 聚焦 | 博学网
同类栏目:网站重构 网页制作技巧 Dreamweaver教程 Fireworks教程 Flash教程 FrontPage教程 Html教程 css教程 Javascript教程

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

时间:2007-10-19 来源: 作者: 编辑:coyou

内容提要:在用CSS制作网页过程中可能会碰到图片下面有空隙的问题,最为简单的解决方法是:

在图片的css中加 vertical-align:bottom;
演示代码: 以下是引用片段:
<!DOCTYPE html PUBLIC "-//W
在用CSS制作网页过程中可能会碰到图片下面有空隙的问题,最为简单的解决方法是:

      在图片的css中加 vertical-align:bottom; 


      

      演示代码: 

以下是引用片段:
<!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>
    <li><img src="图片地址1" /></li>
    <li><img src="图片地址2" /></li>
    <li><img src="图片地址3" /></li>
    <li><img src="图片地址4" /></li>
   </ul>
</div>
</body>
</html>

上一篇:经验之谈!解读Div+CSS网页制作误区
下一篇:下面没有链接了

大学生博客: 免费、个性化域名、日志、相册、下载、好友…… 个性模板,大学生开博理想选择!

相关阅读:

用户名: (注册) 密码: 网友评论:

发表评论:
匿名 验证码:
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法;
·本站有权保留或删除您发表的任何评论内容;
·本站提醒:不要进行人身攻击与无聊谩骂。谢谢配合。
博客之星:

工具软件教程推荐阅读:


操作系统教程推荐阅读:

办公软件教程推荐阅读:

聊天软件教程推荐阅读:

网页制作教程推荐阅读:

平面设计教程推荐阅读:

设计欣赏推荐阅读:

程序开发教程推荐阅读:
网站简介 | 广告服务 | 联系方式 | 意见建议 | 网站地图 | 版权声明 | 友情连接
大学生网 Stuun.Cn 版权所有 Copyright©2006 All rights reserved