视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
新人请教样式问题,图片之间的空白条条_html/css
2020-11-27 15:48:12 责编:小采
文档


这是目标效果。

我偷了样式文件,偷了图片,一模一样的源代码测试,结果如下,泪奔。



提示框的页面源码如下:
提示
请选择用户,只能查询您管理范围内的,角色序号在您之后的用户



相关的样式如下:
/* 提示框样式 */.MessageBox{}/* 表头 */.MessageBox .head{ height:32px; overflow:hidden;}.MessageBox .head .left{ width:20px; background:url('images/message_bg.png') left 0px no-repeat;}.MessageBox .head .center{ padding:0px; background:url('images/message_bg.png') 0px -32px repeat-x;}.MessageBox .head .center .title{ float:left; color:#fff; font-size:16px; font-weight:bold; margin-top:5px;}.MessageBox .head .right{ width:20px; background:url('images/message_bg.png') right 0px no-repeat;}/* 表头 */.MessageBox .head-no-title{ height:16px;}.MessageBox .head-no-title .left{ width:20px; background:url('images/message_bg.png') left -96px no-repeat;}.MessageBox .head-no-title .center{ background:url('images/message_bg.png') 0px -112px repeat-x;}.MessageBox .head-no-title .right{ width:20px; background:url('images/message_bg.png') right -96px no-repeat;}/* 按钮栏 */.MessageBox .control{ height:40px; vertical-align:top;}.MessageBox .control .left{ width:20px; background:url('images/message_center_bg.png') left top repeat-y;}.MessageBox .control .center{ background-color:#7bafe6; text-align:center;}.MessageBox .control .right{ width:20px; background:url('images/message_center_bg.png') right top repeat-y;}/* 表底 */.MessageBox .foot{ height:16px;}.MessageBox .foot .left{ width:20px; background:url('images/message_bg.png') left -px no-repeat;}.MessageBox .foot .center{ background:url('images/message_bg.png') 0px -80px repeat-x;}.MessageBox .foot .right{ width:20px; background:url('images/message_bg.png') right -px no-repeat;}/* 提示框 */.MessageBox .msg{ height:90px;}.MessageBox .msg .left{ width:20px; background:url('images/message_center_bg.png') left top repeat-y;}.MessageBox .msg .center{ padding-left:90px; font-size:16px; background-color:#7bafe6;}.MessageBox .msg .center .msg-content{ color:#fff; margin:20px 12px 20px 6px;}.MessageBox .msg .right{ width:20px; background:url('images/message_center_bg.png') right top repeat-y;}.MessageBox .msg .error{ background-image:url("images/icon_error.png"); background-position:0px 10px; background-repeat:no-repeat;}.MessageBox .msg .info{ background-image:url("images/icon_info.png"); background-position:0px 10px; background-repeat:no-repeat;}.MessageBox .msg .warning{ background-image:url("images/icon_warning.png"); background-position:0px 10px; background-repeat:no-repeat;}.MessageBox .msg .forbidden{ background-image:url("images/icon_forbidden.png"); background-position:0px 10px; background-repeat:no-repeat;}.MessageBox .msg .stop{ background-image:url("images/icon_stop.png"); background-position:0px 10px; background-repeat:no-repeat;}.MessageBox .msg .blank{ height:40px; padding:10px 20px 10px 20px; text-align:center;}



需要用到的图片如下:

这是message_bg.png


这是message_center_bg.png




求大神帮我~明天就要开会演示了,我是.NET开发人员,对样式实在是外行。
似乎这跟HTML标准有关,现在项目里母版页统一的是:



谢谢各位~


回复讨论(解决方案)

你调试看看是哪个background-position有偏差了,后面是xy坐标,改一下把白条给去掉
要是演示用,就用一张图片好了,搞这么多拼接干嘛,要显示很多种方式类型吗

设置table的 cellspaceing cellpadding 为0
可能拼错了

将表格的边框、边距、间距都设置为0,即:

 .MessageBox{ border-collapse:collapse;}

下载本文
显示全文
专题