布局：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是为了解决兼容性问题才引入的