布局:HTML+CSS
属性:确定修改哪些属性
事件:确定用户进行哪些操作
编写js:在事件中,用js来修改页面的样式
例子:
1、鼠标提示框:
属性:样式的display,obj.style.[.......]
事件:onmouseover、onmouseout
具体:鼠标移入到input时,div1显示,鼠标离开时,div1隐藏
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>鼠标移入显示,移出隐藏</title> <style> #div1 {width:100px; height:200px; background:#CCC; display:none;} </style> </head> <body> <input type="checkbox" onmouseover="document.getElementById('div1').style.diaplay='block';"
onmouseout="document.getElementById('div1').style.diaplay='none';"/> <div id="div1"> 。。。。。。 </div> </body> </html>
document.getElementById是为了解决兼容性问题才引入的