Question

我制作一个jsp，其中包含5个jsp。在我的第四个..它的运作，但..我的设计看起来很笨重。你能指出任何让它看起来更好或更干净的建议吗？任何建议，将不胜感激。感谢

CSS

    table.det
{ }

 table.det td
 {
 border: none;

 }


fieldset.det 
{     
display:block;
float:left;

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:20px;
border:2px solid #CCCCCC;

}
 fieldset.det legend
   {
    padding:2px 5px;
    border:2px solid #CCCCCC;

   }

JSP：

<tr>
<th>
<span onclick="toggleDiv('filtering', 'filterImg')" style="cursor: hand;">Filters&nbsp;<img name="filterImg" src="../images/minus.gif" /></span>
</th>
</tr>
<tr>
<td>
<div id="filtering" style="display:block;">
    <table class ="det">
        <tr>
            <td>
    Workload Year:&nbsp;<select size="1" name="wYearSelect">
                            <option value="2007">2007</option>
                            <option value="2008">2008</option>
                            <option value="2009">2009</option>
                            <option value="2010">2010</option>
                            <option value="2011">2011</option>
                            <option selected value="2012">2012</option>
                            <option value="2013">2013</option>
                            <option value="2014">2014</option>
                       </select>
    Fiscal Year:&nbsp;<select size="1" name="wYearSelect">
                            <option value="2007">2007</option>
                            <option value="2008">2008</option>
                            <option value="2009">2009</option>
                            <option value="2010">2010</option>
                            <option value="2011">2011</option>
                            <option selected value="2012">2012</option>
                            <option value="2013">2013</option>
                            <option value="2014">2014</option>
                       </select>

    Condition Code:&nbsp;<select size="1" name="condCodeSelect">
                            <option selected value="">&nbsp;</option>
                            <option value="2007">A</option>
                            <option value="2008">B</option>
                            <option value="2009">C</option>
                            <option value="2010">D</option>
                            <option value="2011">E</option>
                            <option value="2012">F</option>
                            <option value="2013">G</option>
                            <option value="2014">H</option>
                       </select>


    Customer:&nbsp;<select size="1" name="customerSelect">
                            <option selected value="">&nbsp;</option>
                                                       </select>

    Repair Facility:&nbsp;<select size="1" name="repFacSelect">
                            <option selected value="">&nbsp;</option>
                                                          </select><br/>
    Work Type:&nbsp;<select size="1" name="workTypeSelect">
                            <option selected value="">&nbsp;</option>
                            <option value="10">Rebuild</option>
                            <option value="11">IROAN</option>
                            <option value="12">SOAR</option>
                            <option value="13">Special</option>
                       </select>
    Special Indicator:&nbsp;<select size="1" name="specIndSelect">
                            <option selected value="">&nbsp;</option>
                            <option value="RST">RESET</option>
                       </select>
    WBS:&nbsp;<select size="1" name="wbsSelect">
                    <option selected value="">&nbsp;</option>
                                         <!-- etc -->
              </select> 
              <br/>
    Appropriation:&nbsp;<select size="1" name="appropSelect">
                            <option selected value="">&nbsp;</option>
                                                        </select>

    MWSLIN:&nbsp;<input type="text" name="mwslin" value=""/>
    Serial #:&nbsp;<input type="text" name="mwslin" value=""/>
    <input type="checkbox" name="include_carryover">Include Carryover</input>

</td></tr><tr><td>
    <fieldset>
        <legend>Standard Materiel filter structure here</legend>
    NSN:&nbsp;<input type="text" name="nsn" value=""/>
    TAMCN:&nbsp;<input type="text" name="tamcn" value=""/>
    PGD/Group:&nbsp;<input type="text" name="pgd" value=""/>
    SAC :&nbsp;<select size="1" name="condCodeSelect">
                            <option selected value="">&nbsp;</option>
                            <option value="2011">1</option>
                            <option value="2012">2</option>
                            <option value="2013">3</option>
                        </select>
    <br/>
    Nomenclature:&nbsp;<input type="text" name="nomen" value=""/>
    </fieldset>
    </td></tr><tr><td>
    <fieldset class="det">
        <legend>Source of Repair</legend>
        <input type="checkbox" name="sorCodes" value="A">MCA&nbsp;&nbsp;&nbsp;</input>
               </fieldset>
    <fieldset class="det">
        <legend>Schedule Type</legend>
        <input type="checkbox" name="schedType" value="1">Regular</input><br/>
        <input type="checkbox" name="schedType" value="2">Lot Job</input><br/>
        <input type="checkbox" name="schedType" value="3">Batch Job</input>
    </fieldset>
    <fieldset class="det">
        <legend>Workload Type</legend>
        <input type="checkbox" name="workloadType" value="1">SMC Workload</input><br/>
        <input type="checkbox" name="workloadType" value="2">Other Workload</input>
    </fieldset>
    <fieldset class="det">
        <legend>Closure Level</legend>
        <input type="checkbox" name="workloadType" checked value="1">Open</input><br/>
        <input type="checkbox" name="workloadType" value="1">Physically Complete</input><br/>
        <input type="checkbox" name="workloadType" value="2">Financially Complete</input>
    </fieldset>
</td></tr></table>
</div>
</td>
</tr>
<tr>
<td align="center">
<button name="Generate Report" value="Generate Report">Generate Report</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button name="Clear Criteria" value="Clear Criteria">Clear Criteria</button>
</td>
</tr>

Answer 1

乍一看，如果可以的话，摆脱桌子将会开始。

我开始工作会在那里更彻底地审视它。

干杯！

编辑 - 您可以取消fieldset.det legend上的边框，它应该从fieldset.det

向下渐变

在div id=filtering上，您无法为filtering id添加额外样式吗？

编辑 - 这是我扔在一起的东西，并不是说它在任何地方都是完美的。它为您提供了div布局以及通过CSS轻松更改布局的方法。另外，请查看此网站以获取最佳表单实践http://blog.sherpawebstudios.com/2009/06/17/top-10-html-form-layout-best-practices/。

CSS：

#wrapper{ width: 1040; overflow:hidden; }
#filter {
    cursor: hand;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.formLabel {
    font-weight: bold;
    text-align: right;
    width: 160px;
    float: left;
}

.field {
    float: left;
}

.content:before,
.content:after {
    content: "";
    display:table;
}

.content:after {
    clear: both;
}
/*IE 6/7 */
.content { zoom:1;margin-bottom: 10px;}

.subset {
    float: left;
    margin: 0 15;
}

.subset div.formLabel {
    width:100px;
}

#generate {
    margin-right:15px;
}

HTML：

<div id = "wrapper" >
    <div id = "filter" class ="clearfix">
        <span onclick="toggleDiv('filtering', 'filterImg')">Filters&nbsp;<img name="filterImg" src="../images/minus.gif" /></span>
    </div>
    <div class = "content">
        <div class = "formLabel">
            Workload Year:&nbsp;
        </div>
        <div class = "field">
    <select size="1" name="wYearSelect">
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option selected value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Fiscal Year:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="wYearSelect">
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option selected value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Condition Code:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="condCodeSelect">
            <option selected value="">&nbsp;</option>
            <option value="2007">A</option>
            <option value="2008">B</option>
            <option value="2009">C</option>
            <option value="2010">D</option>
            <option value="2011">E</option>
            <option value="2012">F</option>
            <option value="2013">G</option>
            <option value="2014">H</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Customer:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="customerSelect">
            <option selected value="">&nbsp;</option>
        </select>
</div>
</div>
<div class = "content">
    <div class = "formLabel">
        Repair Facility:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="repFacSelect">
            <option selected value="">&nbsp;</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Work Type:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="workTypeSelect">
            <option selected value="">&nbsp;</option>
            <option value="10">Rebuild</option>
            <option value="11">IROAN</option>
            <option value="12">SOAR</option>
            <option value="13">Special</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Special Indicator:&nbsp;
    </div>
    <div class = "field">   
        <select size="1" name="specIndSelect">
            <option selected value="">&nbsp;</option>
            <option value="RST">RESET</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        WBS:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="wbsSelect">
            <option selected value="">&nbsp;</option>
        </select> 
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Appropriation:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="appropSelect">
            <option selected value="">&nbsp;</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        MWSLIN:&nbsp;
    </div>
    <div class = "field">
        <input type="text" name="mwslin" value=""/>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Serial #:&nbsp;
    </div>
    <div class = "field">
        <input type="text" name="mwslin" value=""/>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Include Carryover:
    </div>
    <div class = "field">
        <input type="checkbox" name="include_carryover"></input>
    </div>
</div>
<div class ="content">
    <div class = "subset">
        <h3>Standard Material filter structure here</h3>

        <div class = "content">
            <div class = "formLabel">
                NSN:&nbsp;
            </div>
            <div class = "field">
                <input type="text" name="nsn" value=""/>
            </div>
        </div>
        <div class = "content">
            <div class = "formLabel">
                TAMCN:&nbsp;
            </div>
            <div class = "field">
                <input type="text" name="tamcn" value=""/>
            </div>
        </div>
        <div class = "content">
            <div class = "formLabel">
                PGD/Group:&nbsp;
            </div>
            <div class = "field">
                <input type="text" name="pgd" value=""/>
            </div>
        </div>
        <div class = "content">
            <div class = "formLabel">
                SAC :&nbsp;
            </div>
            <div class = "field">
                <select size="1" name="condCodeSelect">
                    <option selected value="">&nbsp;</option>
                    <option value="2011">1</option>
                    <option value="2012">2</option>
                    <option value="2013">3</option>
                </select>
            </div>
        </div>
        <div class = "content">
            <div class = "formLabel">
                Nomenclature:&nbsp;
            </div>
            <div class = "field">
                <input type="text" name="nomen" value=""/>
            </div>
        </div>
    </div>
    <div class = "subset">
        <h3>Source of Repair</h3>
        <div class = "formLabel">
            MCA
        </div>
        <input type="checkbox" name="sorCodes" value="A"></input>
    </div>
    <div class = "subset">
        <h3>Schedule Type</h3>
        <div class = "formLabel">
            Regular
        </div>
        <input type="checkbox" name="schedType" value="1"></input><br/>
        <div class = "formLabel">
            Lot Job
        </div>
        <input type="checkbox" name="schedType" value="2"></input><br/>
        <div class = "formLabel">
            Batch Job
        </div>
        <input type="checkbox" name="schedType" value="3"></input>
    </div>
    <div class = "subset">
        <h3>Workload Type</h3>
        <div class = "formLabel">
            SMC Workload
        </div>
        <input type="checkbox" name="workloadType" value="1"></input><br/>
        <div class = "formLabel">
            Other Workload
        </div>
        <input type="checkbox" name="workloadType" value="2"></input>
    </div>
    <div class = "subset">
        <h3>Closure Level</h3>
        <div class = "formLabel">
            Open
        </div>
        <input type="checkbox" name="workloadType" checked value="1"></input><br/>
        <div class = "formLabel">
            Physically Complete
        </div>
        <input type="checkbox" name="workloadType" value="1"></input><br/>
        <div class = "formLabel">
            Financially Complete
        </div>
        <input type="checkbox" name="workloadType" value="2"></input>
    </div>
</div>

<button name="Generate Report" value="Generate Report" id="Generate">Generate Report</button>
<button name="Clear Criteria" value="Clear Criteria">Clear Criteria</button>

HTML布局清理？

1 个答案: