第1周：网页设计重点.ppt

css的三种选择器 ■ 选择器—课堂小练习 选择器练习,请使用适当的css选择器，完成下面的页面. 练习2. 网页所有的超链接(html选择器),要求这样的格式: (1)默认样式是 红色，24px, 华文新魏字体没有下划线 (2)当鼠标移动到超链接时， 自动出现下划线,字体大小变成40px,字体变成 宋体.green色. (3)点击后,超链接变成 灰色。 块元素和行内元素 ■ 块元素和行内元素-概念 行内元素(inline element),又叫内联元素: 内联元素只能容纳文本或者其他内联元素,常见内联元素span a 块元素(block element): 块元素一般都从新行开,可以容纳文本,其它内联元素和其它块元素， 即使内容不能占满一行，块元素也要把整行占满。常见块元素div p 举例说明:[HTMLPage3.htm] ■ 上机练习题 html常用标记/元素-table 请用html编写如下网页 ■ html列表-无序列表 UL 的属性设定（常用）： 例如： UL type=square ?type=square 设定符号款式，其值有三种，如下，默认为 type=disc： type=disc 时的列项符号为实心圆点。 type=circle 时的列项符号为空心圆。 type=square 时的列项符号为空心正方形。 html常用标记/元素-ul/li ul type=“属性值” li列表内容/li /ul ■ html列表-有序列表 OL称为顺序列表标记。LI则用以标示列表 项目。所谓顺序列表就是每一项有顺序，又称 编号列表。 OL 的属性设定（常用）： 例如： ol type=i start=4/ol type=i 设定数目款式，其值有五种，请参考 右表，内 定为 type=1。? start=4 设定开始数目，不论设定了哪一数目款式，其 值只能是 1,2,3.. 等整数，默认为 start=1。 i可以取以下值中的任意一个： 1 阿拉伯数字 1, 2, 3, ... a 小写字母 a, b, c, ... A 大写字母 A, B, C, ... i 小写罗马数字 i, ii, iii, ... I 大写罗马数字 I, II, III, ... 。 html常用标记/元素-ol/li ol type=“属性值” start=“起始值” li列表内容/li /ol ■ html列表-框架 html常用标记/元素-frameset frameset frameborder=“边框大小” cols=‘”各窗口百分比，隔开” rows=“各窗口百分比” frame name=“给frame取名” src=“html路径” noresize /frameset ■ html框架-(frameset小练习) html常用标记/元素-frameset/frame 完成下面的网页,用户点击左侧的超链接，可以看到相应的歌词 ■ iframe 浮动窗口 html常用标记/元素-iframe 浮动窗口 ■ form(表单)元素介绍 html常用标记/元素-form 客户端 服务器 form action=url method=* ... ... input type=submit input type=reset /form 星号*部分可以为GET,也可以是 POST ■ form(表单)元素 html常用标记/元素-form ■ form(表单)元素-小练习 html常用标记/元素-form ■ input元素 html常用标记/元素-input元素 您的姓名: input type=text name=姓名br 密码: input type=password name=密码br input type=checkbox name=水果1香蕉p input type=checkbox name=水果1 checked苹果p input type=Image name=submit align=top src=shan.jpg input type=radio name=水果香蕉p input type=radio name=水果 checked苹果p input type=hidden name=add“ value=hoge@hoge.jp 这里有一个隐藏的表单元素 p ■ select/option/textarea html常用标记/元素-select/option/textarea.. select name=like option value=网游 selected 网游/option option value