第1-2章表单和样式要点.ppt

图片按钮 input type=image src=... / input type=image src=gif/1.gif onmousemove=this.src=gif/2.gif onmouseout=this.src=gif/1.gif onclick=window.location=// 鼠标事件 【返回】 fieldset legend 标题 /legend 其他元素 /fieldset filedset标签 【返回】 fieldset style=width:270px; legend登录/legend 用户名: input type=text /br/ 密nbspnbsp码: input type=text / br/br/ 说明：用户名和密码必填 /fieldset style样式属性 div和span标签 div 是一个块级元素，浏览器通常会在 div 元素前后放置一个换行符。 span是一个行内元素，SPAN 的前后是不会换行的。 fieldset style=width:270px; legend登录/legend div id=login style=padding:10px; 用户名: input type=text /span style=color:red*/spanbr/ 密nbspnbsp码: input type=text /span style=color:red*/span div div id=footer style=color:red; 说明：用户名和密码必填 /div /fieldset padding定义元素的内边距 【返回】 2.2 样式 样式是对 HTML 元素的一种格式化。 三种方法定义： 内联样式 -- 在元素的style属性中定义 (局部) 内部样式 -- 在head 中通过 style 标签定义 (页面级) 外部样式 -- 在css文件中定义 (可被多个文件调用) 更改一个样式文件可改变整个站点的外观 【返回】 内联样式示例 学号: input type=text style=color:red; font-size:30px/ br/ 姓名: input type=text style=background-color:yellow; font-size:12pt/ br/ 年龄: input type=text style=width:40px; font-size:1.2em/ 文字颜色 背景色 文字大小 元素宽度 px：像素点，最小单位； pt：磅，一般9pt=12px。 em：百分比值(比例值) 【返回】 内部样式示例1 head style type=text/css body { background-color:silver } input { background-color:yellow; font-size: 12px } /style /head body 学号: input type=text / br/ 姓名: input type=text /br/ 年龄: input type=text /br/ /body 所有input都将使用同一样式 内部样式示例2--改动一下 head style type=text/css body { background: url(123.jpg) no-repeat; } .input1 { background-color:yellow; font-size: 12px } #input2 { background-color:red; font-size: 16px } /style /head body 学号: input type=text class=input1/br/ 姓名: input type=text id=input2/br/ 年龄: input type=text /br/ /body 背景图 class属性调用 #号前缀 【返回】 点号前缀 id属性调用 body { background: url(123.jpg) no-repeat; } .input1 { background-color:yellow; font-size: 12px} #input2 { background-color:red; fo