最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

新人请教样式问题,图片之间的空白条条_html/css

来源:动视网 责编:小采 时间:2020-11-27 15:48:12
文档

新人请教样式问题,图片之间的空白条条_html/css

新人请教样式问题,图片之间的空白条条_html/css_WEB-ITnose:这是目标效果。 我偷了样式文件,偷了图片,一模一样的源代码测试,结果如下,泪奔。 提示框的页面源码如下: 提示 请选择用户,只能查询您管理范围内的,角色序号在您之后的用户 相关的样式如下: /* 提示框样式 */.
推荐度:
导读新人请教样式问题,图片之间的空白条条_html/css_WEB-ITnose:这是目标效果。 我偷了样式文件,偷了图片,一模一样的源代码测试,结果如下,泪奔。 提示框的页面源码如下: 提示 请选择用户,只能查询您管理范围内的,角色序号在您之后的用户 相关的样式如下: /* 提示框样式 */.


这是目标效果。

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



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



相关的样式如下:
/* 提示框样式 */.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;}

文档

新人请教样式问题,图片之间的空白条条_html/css

新人请教样式问题,图片之间的空白条条_html/css_WEB-ITnose:这是目标效果。 我偷了样式文件,偷了图片,一模一样的源代码测试,结果如下,泪奔。 提示框的页面源码如下: 提示 请选择用户,只能查询您管理范围内的,角色序号在您之后的用户 相关的样式如下: /* 提示框样式 */.
推荐度:
标签: 图片 空白 图片的
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top