
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
实例03 插入彩色的水平线

案例说明:水平线用于分隔网页中的不同内容,网页中的水平线可以将网页划分成几个不同的页面。在网页中插入水平线时,水平线的默认颜色都是黑色,无法直接插入其他颜色的水平线,这样就会出现插入的水平线与整个网页颜色不协调的情况。如果需要其他颜色的水平线,就需要在插入水平线后进行设置。
光盘文件:光盘\源文件与素材\01章\插入彩色的水平线
操作步骤
1 放置光标。将光标置于网页中两幅图像的中间。

2 插入水平线。选择“插入→HTML→水平线”命令,便会在光标所在位置处插入一条水平线。

3 设置水平线。选择刚刚插入的水平线,在“属性”面板中的“宽”、“高”文本框中分别输入水平线的宽度与高度,这里分别输入“750”与“9”,在“对齐”下拉列表中选择水平线的对齐方式,这里选择“居中对齐”选项。

4 添加代码。在“属性”面板中单击按钮,打开快速标签编辑器。在快速标签编辑器中对其参数进行<hr color="# xxxxxx" />设置就可以改变水平线的颜色,其中“#xxxxxx”是所需颜色的色标值。例如,在快速标签编辑器中输入“hr color=" # #FF0000"”。表示插入红色的水平线。

5 保存文件。选择“文件→保存”命令,弹出“另存为”对话框,在“保存在”下拉列表中选择文件保存的位置。在“文件名”文本框中输入保存文件的名称,完成设置后单击按钮。

6 浏览网页。按下【F12】键浏览网页。
