欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-04 15:56:32
...
这是目标效果。

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



提示框的页面源码如下:

提示
请选择用户,只能查询您管理范围内的,角色序号在您之后的用户



相关的样式如下:
/* 提示框样式 */.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 -64px 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 -64px 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/icon64_error.png");   background-position:0px 10px;   background-repeat:no-repeat;}.MessageBox .msg .info{   background-image:url("images/icon64_info.png");   background-position:0px 10px;   background-repeat:no-repeat;}.MessageBox .msg .warning{   background-image:url("images/icon64_warning.png");   background-position:0px 10px;   background-repeat:no-repeat;}.MessageBox .msg .forbidden{   background-image:url("images/icon64_forbidden.png");   background-position:0px 10px;   background-repeat:no-repeat;}.MessageBox .msg .stop{   background-image:url("images/icon64_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_WEB-ITnose

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 新人请教样式问题,图片之间的空白条条_html/css_WEB-ITnose
  • 专题推荐

    作者信息
    新人请教样式问题,图片之间的空白条条_html/css_WEB-ITnose

    认证0级讲师

    推荐视频教程
  • 新人请教样式问题,图片之间的空白条条_html/css_WEB-ITnosejavascript初级视频教程
  • 新人请教样式问题,图片之间的空白条条_html/css_WEB-ITnosejquery 基础视频教程
  • 视频教程分类