任务1-7 列表样式与IFrame的使用
需求：
用列表布局超链接，并将超链接所指页面显示在IFrame标签中，如图1-19所示。
分析：
列表分有序列表OL（OrderList）和无序列表UL（UnOrderList），列表包含多个列表项LI（ListItem），本任务中列表项内容是超链接。将超链接所指页面src显示目的区域用target属性值表示，它可以是FrameSet中的Frame，也可以是行内框架IFrame。IFrame定位更加灵活，可以嵌入页面＜table＞或＜div＞标签中。
图1-19 含有上下两个排列的IFrame页面布局
实现：
第一步，新建静态页面，设置页面所用到的UL、LI、A等标签的样式。代码见清单1-17。
清单1-17 列表与超链接样式的定义
第二步，建立用户界面，通过设置UL的id属性引用#nav，将超链接的target属性分别设置IFrame1和IFrame2。代码见清单1-18。
清单1-18 项目列表定义
第三步，添加两个IFrame，使用style属性上下布局，设置它们的name属性为IFrame1和IFrame2。代码见清单1-19。
清单1-19 上下布局的内框架IFrame
第四步，浏览页面。至此，本任务已经完成。
说明
Iframe标签中name属性必须指定，这样才能在超链接中通过设置target属性为Iframe标签中的name属性发挥Iframe标签作为页面容器的作用。
以“#”为前缀的样式名（如本任务中#nav）用id="样式名"引用；以“.”为前缀的样式名用class="样式名"引用。读者可以将两样式定义中的“#”改为“.”，与之对应的id改为class，页面效果相同。使用“#”有双重功能，既能标识标签，又能设置样式引用。
标签及其样式是相互对应的，标签可以并列与嵌套，样式定义也可以并列与嵌套。使用空格实现嵌套定义，如本任务中的#nav li a：link表示在id="nav"标签下li标签下的a：link样式。使用逗号实现并列定义，如本任务中的#nav li a：link，#nav li a：visited{…}表示两个样式同时定义为一种样式。
本任务中将样式定义部分放在页面的头部＜head＞，使得本页面body内的所有标签共享样式定义，为了进一步提高样式表文件的可重用性，将样式定义集中到样式表文件中，在引用样式表文件的页面头部＜head＞添加对样式文件的引用即可。代码见清单1-20。
清单1-20 对样式文件的链接引用
