课堂笔记：JS实现登录注册标签悬浮切换

一、案例需求

利用表格搭建登录/注册选项卡布局，鼠标悬浮标签自动互换两个按钮背景图，实现高亮选中效果，下方通栏展示一张背景大图。

二、完整源代码

登录	注册

三、知识点梳理

1、HTML表格知识点

1. table属性：border="0"去掉边框、cellspacing="0"单元格间距清零、cellpadding="0"单元格内边距清零；

2. colspan="2"：单元格横向跨两列合并，用来做底部通栏大图；

3. onmouseover="函数()"：行间绑定鼠标移入事件，悬浮触发JS方法，还能向函数传递实参。

2、CSS布局知识点

1. 通配符*{margin:0;padding:0;}：页面布局标配，清除浏览器自带默认边距；

2. float:left：让两个td单元格横向并排，脱离文档流横向排列；

3. height:34px;line-height:34px;：行高等于盒子高度，实现文字垂直居中；text-align:center实现文字水平居中；

4. background:url() no-repeat left：设置背景图片、不平铺、靠左显示。

3、JavaScript核心知识点

1. 事件：onmouseover：鼠标悬浮移入事件，光标放上去立刻执行绑定函数；

2. DOM获取元素：getElementById('id值')：通过标签id精准获取页面DOM元素；

3. JS修改样式：元素.style.backgroundImage：JS动态修改行内样式，改变背景图片，是实现切换的关键；

4. 函数传参：调用函数时传入left/right，形参接收参数，配合if判断区分点击对象。

四、项目文件结构
项目文件夹
├─ index.html 网页文件
└─ img文件夹（存放素材图片）
├─ lib1.png 按钮默认图
├─ lib2.png 按钮高亮图
└─ denglu.png 底部大图