Question

这是我第一次尝试用PSD文件制作HTML代码。问题是我有一个动态表，其内容越来越高，具体取决于所选按钮。但是，这会产生问题。其他列创建了带有白色背景的丑陋间隔，而不是我使用的背景颜色。

我读过一些名为Faux Column的内容，但我无法将其应用于我的HTML代码。

我正在使用photoshop和dreamweaver。你会建议我在一个表行中处理高度变化以补偿其他行中的高度变化吗？

我在这个领域完全麻木和假。

css文件：

@charset "UTF-8";
/* CSS Document */

body{

width: 1426px;
margin: 0 auto;

}
    #hovermenu ul{
    font: 12px arial;
    color:#a1a1a1;
    padding-left: 10;
    margin-left: 0;
    height: 15  px;
    }


#hovermenu ul li{
list-style: none;
display: inline;
}

#hovermenu ul li a{
padding:0 ;
text-decoration: none;
float: left;
color:#878787;


}

#hovermenu ul li a:hover{
background-color:#FFF;
color:#b81321;
border-style:none;
}




<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<link href="styles.css" rel="stylesheet" type="text/css">

</head>

<body>

<table id="Table_01" width="1426" height="%100" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="12">
            <img src="images/red-ruler.jpg" width="1425" height="4" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
        <td width="19" height="1379" rowspan="17">
            <img src="images/spacer2.gif" width="19" height="1379" alt=""></td>
        <td colspan="11">
            <img src="images/clouds.jpg" width="1406" height="71" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="71" alt=""></td>
    </tr>
    <tr>
        <td rowspan="6">
            <img src="images/clouds-04.jpg" width="197" height="285" alt=""></td>
        <td colspan="5" rowspan="3">
            <img src="images/logo.jpg" width="279" height="111" alt=""></td>
        <td colspan="3">
            <img src="images/reklam.jpg" width="404" height="1" alt=""></td>
        <td rowspan="2">
            <img src="images/arama-sepetim.jpg" width="317" height="67" alt=""></td>
        <td rowspan="6">
            <img src="images/clouds-08.jpg" width="209" height="285" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="images/reklam-top.jpg" width="404" height="110" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="66" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/arama-bg.jpg" width="317" height="44" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="44" alt=""></td>
    </tr>
    <tr>
        <td colspan="9">
            <img src="images/top-siyah-menu.jpg" width="1000" height="45" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="45" alt=""></td>
    </tr>
    <tr>
        <td width="1000" height="13" colspan="9">
            <img src="images/spacer.gif" width="1000" height="13" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="images/ust-reklam-cerceve-1.jpg" width="330" height="116" alt=""></td>
        <td>
            <img src="images/ust-reklam-cerceve-2.jpg" width="335" height="116" alt=""></td>
        <td colspan="2">
            <img src="images/ust-reklam-cerceve-1-14.jpg" width="335" height="116" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="116" alt=""></td>
    </tr>
    <tr>
        <td width="197" height="1023" rowspan="10">
            <img src="images/spacer2.gif" width="197" height="1023" alt=""></td>
        <td colspan="3">
            <img src="images/magazalar-right-menu.jpg" width="221" height="38" alt=""></td>
        <td colspan="6" rowspan="3">
            <img src="images/ana-logo.jpg" width="779" height="256" alt=""></td>
        <td width="209" height="1023" rowspan="10">
            <img src="images/spacer.gif" width="209" height="1023" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
        <td width="221" height="180" colspan="3">
            <div id="hovermenu">
        <ul>
        <li>
        <a href="http://www.test.net/test-ozel/398">test Ozel</a>
        </li>

        </ul>

         <ul>
        <li>
        <a href="http://www.test.net/Apple-App-Store/236">Apple App Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/test-Magaza/Blackberry/400">Android Market</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Blackberry-App-World/241">Blackberry App World</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Nokia-Ovi-Store/242">Nokia Ovi Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Windows-Phone/243">Windows Phone</a>
        </li>


        <li>
        <a href="http://www.test.net/test-ozel/398">test Ozel</a>
        </li>

        </ul>


         <ul>
        <li>
        <a href="http://www.test.net/Apple-App-Store/236">Apple App Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/test-Magaza/Blackberry/400">Android Market</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Blackberry-App-World/241">Blackberry App World</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Nokia-Ovi-Store/242">Nokia Ovi Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Windows-Phone/243">Windows Phone</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Apple-App-Store/236">Apple App Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/test-Magaza/Blackberry/400">Android Market</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Blackberry-App-World/241">Blackberry App World</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Nokia-Ovi-Store/242">Nokia Ovi Store</a>
        </li>

        </ul>
         <ul>
        <li>
        <a href="http://www.test.net/Windows-Phone/243">Windows Phone</a>
        </li>

        </ul>





        </div></td>
        <td>
            <img src="images/spacer.gif" width="1" height="180" alt=""></td>
    </tr>
    <tr>
        <td width="2" height="125" colspan="2" rowspan="3">
            <img src="images/spacer.gif" width="2" height="125" alt=""></td>
        <td>
            <img src="images/sepetim-right-menu.jpg" width="219" height="38" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
        <td width="219" height="87" rowspan="2">
            <img src="images/spacer.gif" width="219" height="87" alt=""></td>
        <td width="25" height="767" rowspan="7">
            <img src="images/spacer.gif" width="25" height="767" alt=""></td>
        <td width="754" height="31" colspan="5">
            <img src="images/spacer.gif" width="754" height="31" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="31" alt=""></td>
    </tr>
    <tr>
        <td width="754" height="667" colspan="5" rowspan="5">
            <img src="images/spacer.gif" width="754" height="667" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="56" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/haber-grubu-right-menu.jpg" width="221" height="38" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
        <td width="1" height="150" rowspan="2">
            <img src="images/spacer.gif" width="1" height="150" alt=""></td>
        <td width="220" height="73" colspan="2">
            <img src="images/spacer.gif" width="220" height="73" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="73" alt=""></td>
    </tr>
    <tr>
        <td width="220" height="77" colspan="2">
            <img src="images/spacer.gif" width="220" height="77" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="77" alt=""></td>
    </tr>
    <tr>
        <td width="221" height="423" colspan="3">
            <img src="images/spacer.gif" width="221" height="423" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="423" alt=""></td>
    </tr>
    <tr>
        <td width="221" height="69" colspan="3">
            <img src="images/spacer.gif" width="221" height="69" alt=""></td>
        <td width="754" height="69" colspan="5">
            <img src="images/spacer.gif" width="754" height="69" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="69" alt=""></td>
    </tr>
    <tr>
        <td colspan="12">
            <img src="images/ruler-bottom.jpg" width="1425" height="3" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
        <td width="1425" height="520" colspan="12">
            <img src="images/spacer.gif" width="1425" height="520" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="520" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="19" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="197" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="219" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="25" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="33" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="51" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="335" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="18" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="317" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="209" height="1" alt=""></td>
        <td></td>
    </tr>
</table>

</body>
</html>

Answer 1

您应该显示您的代码以便更好地理解，但是您所说的修改高度可以帮助或使用css来修改内部填充。

psd到html表高度调整自动

1 个答案: