当前位置:首页 >> 互联网 >>

网页 第二章 列表、表格与框架_图文

网页设计 2017-1-16 第二章 列表、表格与框架 本章目标 ? 会使用有序列表实现数据展示 ? 会使用无序列表实现数据展示(重点) ? 会使用定义列表实现数据展示(重点) ? 会使用表格实现数据展示 ? 会使用<iframe>进行页面设计(重点) 列表的分类 ? ? ? 无序列表 有序列表 定义列表 定义列表 有序列表 无序列表 无序列表 声明无序列表 <ul> <li>桔子</li> <li>香蕉</li> <li>苹果</li> </ul> 声明列表项 有序列表 声明有序列表 <ol> <li>桔子</li> <li>香蕉</li> <li>苹果</li> </ol> 声明列表项 定义列表 声明定义列表 <dl> <dt>所属学院</dt> <dd>计算机应用</dd> <dt>所属专业</dt> <dd>计算机软件工程</dd> </dl> 声明列表项 定义列表项内容 表格 表格标签 <table> 行标签 <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> …… </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> …… </tr> </table> 单元格标签 表格 例子 表格标签 <table border=1> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> 运行结果: 行标签 单元格标签 表格对齐方式 align=center 表格对齐方式 – 默认对齐、居中对齐、左对齐、右对齐 单元格对齐方式 – 水平对齐方式、垂直对齐方式 属性 align 水平对齐方式 left center right top valign 垂直对齐方式 middle bottom baseline 值 左对齐 居中对齐 右对齐 顶端对齐 居中对齐 底端对齐 基线对齐 说明 表格的跨列 <table border=1> <tr> 所跨的列数 <th>姓名</th> <th colspan=2>电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> 表格的跨行 <table border=1> <tr> <th>姓名</th> <td>Bill Gates</td> 所跨的行数 </tr> <tr> <th rowspan=2>电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> 表格的跨行和跨列 …… <tr> 跨列 <td colspan=3>学生成绩</td> </tr> 跨行 <tr> <td rowspan=2>张三</td> <td>语文</td> <td>98</td> </tr> …… 框架 常用框架技术 重用网站顶部 ? ? <frameset>框架 <iframe>内联框架 左侧导航目录 单击左侧导航,改变右 侧内容,顶部和底部不 需要再次加载 重用网站底部 14/40 <frameset>框架 frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独 立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或 多少行。您必须使用 cols 或 rows 属性。 表示横向分割 表示纵向分割 <frameset cols=25%,50%,* rows =50%,* border=5> <frame src=the_first.html > <frame src=the_second.html > …… </frameset> 表示引用页面的地址 参考:http://www.w3school.com.cn/tags/tag_frameset.asp 纵向分割窗口 ? 使用 “rows” 属性 <frameset rows=25%,50%,25%> <frame src=/example/html/frame_a.html> <frame src=/example/html/frame_b.html> <frame src=/example/html/frame_c.html> </frameset> 横向分割窗口 ? 使用 “cols” 属性 <frameset cols=25%,50%,25%> <frame src=/example/html/frame_a.html> <frame src=/example/html/frame_b.html> <frame src=/example/html/frame_c.html> </frameset> 混合分割窗口 <frameset rows=50%,50%> <frame src=/example/html/frame_a.html> <frameset cols=25%,75%> <frame src=/example/html/frame_b.html> <frame src=/example/html/frame_c.html> </frameset> </frameset> <iframe>内联框架 引用页面地址 框架标识名 边框 是否出现滚动条 <iframe src=path name=mainFrame frameborder=x scrolling=yes/no noresize=noresize width=x height=y></iframe> 是否允许调整框架窗口大小 框架宽度 框架高度 <ifram