html - 如何操作窗口列表颜色？

Question

我正在为 HTML 弹出窗口制作一个 GUI，它应该看起来像这个模型

我制作了显示几乎相似视图的 HTML：

但是我不知道如何使模型的蓝色褪色到更浅的细微差别的窗户的褪色尖端。当这是一个显示在 DIV 中的弹出窗口时，HTML / CSS 甚至可能吗？你能告诉我怎么做吗？我现在的代码是

        <table id="mainTable" border="1" class="tabell" cellspacing="5" cellpadding="2">
          <tr>
            <!-- Placeholder for the form table -->
            <td valign="top">
              <table id="formTable" border="1" class="tabell" cellspacing="2" cellpadding="2">
                <tr>
                  <td>
                    <b>Sök efter ansvarig</b>
                  </td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>Sök efter person, funktion, organisation, roll eller signatur med följande namn:</td>
                </tr>
                <tr>
                  <td>
                    <input type="text" class="textandlist" name="searchValue" size="40" />
                  </td>
                </tr>
                <tr>
                  <td align="right">
                    <input type="button" class="knapp" name="searchButton" id="searchButton" value="&nbsp;&nbsp;Sök&nbsp;&nbsp;" onclick="doSubmit('HandlaggareSearch','search')" />
                    <input type="button" class="knapp" name="cancelButton" id="cancelButton" value="Avbryt" onclick="cancelHandlaggareDialog()" />
                    <input type="button" class="knapp" name="showButton" id="showButton" value="Visa alla" onclick="doSubmit('HandlaggareSearch','showAll')" />
                  </td>
                </tr>
              </table>                      
            </td>
            <!-- Placeholder for the result table -->
            <td valign="top"><a href="javascript:void(0)" onclick="document.getElementById('popupD').style.display = 'none';"
" align="right">Stäng</a>

              <img src="images/spacer.gif" />
              <table id="headerTable" class="tabell" cellspacing="2" cellpadding="2" width="700">

                <tr>
                  <td colspan="5">
                    <b>Sökningen gav inga träffar.</b>
                  </td>
                </tr>

                <tr>
                  <td colspan="5">
                    <b>Resultat</b>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <span>Antal träffar: </span>
                  </td>

                  <td colspan="3" align="right">

                  <a href="javascript:SearchHandlaggareShow('previous')">
                    &lt;&lt;

                    -

                  </a>

                  [

                  -

                  ]

                  <a href="javascript:SearchHandlaggareShow('next')">

                    -

                    &gt;&gt;
                  </a>

                </td>

              </tr>

            </table>

            <div style="height: 220px; overflow: auto;" >   
              <table id="resultTable" class="tabell" cellspacing="2" cellpadding="2" width="700">
                <tr>
                  <th><a href="javascript:SearchHandlaggareSort('1')">Signatur</a></th>
                  <th><a href="javascript:SearchHandlaggareSort('2')">Namn</a></th>
                  <th><a href="javascript:SearchHandlaggareSort('3')">Enhet</a></th>
                  <th><a href="javascript:SearchHandlaggareSort('4')">Grupp</a></th>
                  <th><a href="javascript:SearchHandlaggareSort('5')">Roll</a></th>
                </tr>

                <tr class="bakgrund1" onmouseover="this.className='highlight'" onmouseout="this.className='bakgrund1'">

                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>

              </table>
            </div>

          </td>
        </tr>
      </table>

感谢您的任何建议

Answer 1

http://jsfiddle.net/efortis/t6QsP/

<div class="horizontal-gradient"> Pandora - sok ... </div>​


.horizontal-gradient {
    background: #1a2adb; /* Old browsers */
    background: -moz-linear-gradient(left,  #1a2adb 0%, #a1e6ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1a2adb), color-stop(100%,#a1e6ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* IE10+ */
    background: linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a2adb', endColorstr='#a1e6ed',GradientType=1 ); /* IE6-9 */
    color: white;
}

​</p>

用

http://www.colorzilla.com/gradient-editor/