XHTML和CSS设计中的皮肤切换

;
    height: 100px;
    height: 70px;
）
.pageNav
（
    padding: 10px;
    border: 1px solid #666;
    height: 100px;
    height: 30px;
）
.catalogNav
（
    float: left;
    top: 130px;
    padding: 10px;
    border: 1px solid #666;
    width: 20%;
）
.pageSearch
（
    float: left;
    top: 130px;
    padding: 10px;
    border: 1px solid #666;
    width: 20%;
）
.pageContent
（
    float: left;
    padding: 10px;
    border: 1px solid #666;
    height: 400px;
    width: 60%;
）
.pageBottom
（
    clear: both;
    padding: 10px;
    border: 1px solid #666;
    height: 100px;
    height: 70px;
）
如此，我们定义了一个三列的页面布局：顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度，当然您也可以将页面定义为中间只有两列等等，您只需要调整layout.css文件即可，这样您可以灵活的修改页面的布局，让页面外观发生根本的变化，而不必动到HTML源文件，这一点对于服务器端生成代码的程序尤为重要。 更多关于CSS布局的资料，请参见：/uploadfile/201210/19/A7132246250.jpg) #36c; 
)
 对于栏目导航，我们想给每个栏目连接加上背景色，并且有鼠标滑过和移出的效果。 栏目导航区的html代码为：

<div class="catalogNav">
        <ul>
            <li>
                <A href="1">栏目1</A>
            <li>
                <A href="2">栏目2</A>
            <li>
                <A href="3">栏目3</A>
            <li>
                <A href="4">栏目4</A>
            <li>
                <A href="5">栏目5</A>
            <li>
                <A href="6">栏目6</A>
            </li>
        </ul>
    </div>
栏目导航区对应的Css代码为：

.catalogNav ul
(
 &