用DW制作隔行换色的背景效果--div篇

    在table布局方法下的隔行变换背景色效果制作十分简单，其实在div布局中，它的制作方法也不难。

    下面给大家介绍一下div布局法中隔行换色的详细制作方法。

准备工作：

    通常div布局情况下，文字列表都是用<ul><li>...</li><li>...</li></ul>制作出来的，所以制作隔行换色的列表需要在它上面做文章，样式如图1-1。

    一、在Dreamweaver中新建一个网页，设置背景色为#CCCCCC，文字大小为12像素，然后保存。这些应该不用我再教一遍了，还不会的话请翻看前面的文章《如何用dreamweaver新建一个网页》。

    二、在页面中一个项目列表，插入七个列表项。代码为：

  <ul>

    <li>·<a href="dsdasadsa#dsada">阿邦资讯内容一</a></li>

    <li>·<a href="dsdasadsa#dsada">阿邦资讯内容一</a></li>

    <li>·<a href="dsdasadsa#dsada">阿邦资讯内容一</a></li>

    <li>·<a href="dsdasadsa#dsada">阿邦资讯内容一</a></li>

    <li>·<a href="dsdasadsa#dsada">阿邦资讯内容一</a></li>

    <li>·<a href="dsdasadsa#dsada">阿邦资讯内容一</a></li>

    <li>·<a href="dsdasadsa#dsada">阿邦资讯内容一</a></li>

    </ul>


开始设置背景：

    设置方法同样有两种，第一种和隔行换色table法中的第二种方法相似，将全部<li>的背景色定义为白色，将偶数行的背景定义一个class，背景色定为蓝色。

    第二种方式是固定<li>的行高，用背景图完成背景色定义。

    原理到此结束，开始详细讲解制作方法。

    方法一，定义<li>的背景和class

    1.点击软件右侧其他工具栏那里的CSS面板，单击它下方的“新建CSS规则”按钮，如图1-2。

    2.现在弹出一个新建CSS规则对话框，如图1-3所示，“选择器类型”一项中选择第一项“标签（重新定义特定标签的外观）”，“标签”项中选择ul，“定义在”一项选择“仅对该文档”，因为是在本页做例子没必要新建CSS文件，所以选择此项即可，三项都选好后点击确定。

    3.接下来是设置刚刚选择好的ul属性的对话框，左侧分类直接选到第一项“类型”，然后在右侧的背景颜色行高中填入20，单位选择像素，如图1-4；然后在左侧选择第四项“方框”，右侧宽度填入200，单位选择像素，如图1-5，随后点击确定。

    4.点击CSS面板中的“新建CSS规则”按钮，如图1-6所示，“选择器类型”一项中选择第一项“标签（重新定义特定标签的外观）”，“标签”项中选择li，“定义在”一项选择“仅对该文档”，三项都选好后点击确定。

    5.在li属性的对话框中，先选择左侧第二项背景，右侧背景颜色填入#FFFFFF，如图1-7。随后在左侧选择“列表”，在右侧类型中选择“无”，如图1-8。

    6.点击CSS面板中的“新建CSS规则”按钮，新建一个名为bluebg的class，如图1-9，“选择器类型”一项中选择第一项“类（可应用于任何标签）”，“名称”项中填写bluebg，“定义在”一项选择“仅对该文档”，都选好后点击确定。

    7.建好.bluebg这个class属性（如图1-9），在对话框左侧分类直接选到第二项“背景”，如图1-10，然后在右侧的背景颜色中填入颜色值#b4e2fd，随后点击确定。

    8.分别将偶数的<li>选中，并在属性面板中的样式菜单中选择名为bluebg的class，如图1-11。

    到此为止，列表中偶数行的背景都被设置成了蓝色背景。