画面上图片的布局心得

很难说有什么心得，只是在遇到某些特殊问题时的一些处理方法。(仅供参考，如有更好的请写在下边)

1、当文字与图片、文字与控件、控件与控件发生错位（通常在IE6以上版本）

通常处理方法：定义元素浮动属性 float:left或right，最好这些元素放在一个大元素快中。

例如：
<div style='width:320px'>
   <span style='float:left;width:100px'>aaaa</span>
   <span style='float:left;width:100px'>aaaa</span>
   <span style='float:left;width:100px'>aaaa</span>
</div>

 

2、当画面上需要显示大图片，最好根据图片情况，切割成几个小图片。

图片被截成了三个 分别是 头 zl010.gif  中间 hengxian011.gif    尾 hengxian012.gif

html代码：
=================================================================================
 <div class="left">
         <div class="left_guidejob">
           <div class="left_guidejob_title"></div>
           <div class="left_guidejob_content">
              <div style="width:100%;margin-top:20px;line-height:25px;">
                  <span style="width:60px;float:left;padding-left:30px;text-align:left;">
                    <img src="../Image/icon003.gif" alt="" /></span>
                  <span style="width:100px;float:left;text-align:left;"><a href="AddRecord.aspx" 
                        target="dataframe">添加指示</a></span>
              </div>
              <div style="width:100%;margin-top:20px;line-height:20px;">
                  <span style="width:60px;float:left;padding-left:30px;text-align:left;">
                    <img src="../Image/icon004.gif" alt="" /></span>
                  <span style="width:100px;float:left;text-align:left;"><a href="UpdateRecord.aspx" 
                        target="dataframe" onclick="SetDenoteID();">指示记录</a></span>
              </div>
           </div>
           <div class="left_guidejob_bottom">
           </div>

 

 

css代码：
=================================================================================
.left
{
 margin:0;
 padding:0;
 width:200px;
 background-color:#6b84dc;
 height:600px;
 float:left;
}
.left_guidejob
{
 margin-top:30px;
 width:168px;
}
.left_guidejob_title
{
 width:100%;
 margin:0;
 padding:0;
 height:32px;
 background-image:url(../image/zl010.gif);
 background-repeat:repeat-y;
 color:#4583bf;
 font-weight:bold;
 font-size:14px;
}
.left_guidejob_content
{
 width:100%;
 margin:0;
 padding:0;
 height:150px;
 background-image:url(../image/hengxian011.gif);
 background-repeat:repeat;
}
.left_guidejob_bottom
{
 width:100%;
 margin:0;
 padding:0;
 height:14px;
 background-image:url(../image/hengxian012.gif);
 background-repeat:repeat-x;
}

 效果如下：

 

报表设计

     设计报表应该像建一个房子一样，有了总体的概括，才能进入详细设计。如果上来就编写代码，

走一步算一步，能做得出来，耗时，耗力，并且效果很不好。

     具体地说：

     1 设计一个报表，首先要明确该报表的整体宽度与高度，将宽与高调整好，然后按需要分配各行

各列的高宽，在分配时有一点很重要，我认为，应该明确指定各行列的高度值和宽度值并且，总和等于整体的值。

     2 在编写代码时，最好有统一的样式，将用到的Style（全部）放在CSS文件中，方便修改，管理

     3 前台设计和后台动态生成，根据需要，选择合适的方法。 

     后台生成：如果有一定的规律（一般报表都有规律）后台生成是一个好方法，效率也比较高，并且开发过程中容易修改。 

     前台设计：如果报表格式复杂，内容不多，数据量小，可以采用该方法。简单明了。

     4 在设计时，尽量将所有的数据放在一个Table中，左右Table并排的情况最好不要出现。