Heim > Web-Frontend > HTML-Tutorial > 新人请教样式问题,图片之间的空白条条_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 12:15:15
Original
1232 Leute haben es durchsucht


这是目标效果。

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



提示框的页面源码如下:

<table class="MessageBox" align="center" width="500">   <tr class="head">      <td class="left"></td>      <td class="center">         <div class="title">提示</div>      </td>      <td class="right"></td>   </tr>   <tr class="msg">      <td class="left"></td>      <td class="center info">         <div class="msg-content">请选择用户,只能查询您管理范围内的,角色序号在您之后的用户</div>      </td>      <td class="right"></td>   </tr>   <tr class="foot">      <td class="left"></td>      <td class="center"></td>      <td class="right"></td>   </tr></table>
Nach dem Login kopieren



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



需要用到的图片如下:

这是message_bg.png


这是message_center_bg.png




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



谢谢各位~


回复讨论(解决方案)

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

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

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

  .MessageBox{ border-collapse:collapse;}
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage