表格布局 + JS鼠标切换选项卡

Web课堂笔记：表格布局 + JS鼠标切换选项卡

一、HTML表格基础知识点 1. 表格核心标签 - <table>：表格外层容器；<tr>代表一行；<td>代表单元格。 2. table基础属性 - width：设置表格整体宽度；border="0" 隐藏原生边框； - cellspacing="0"：消除单元格之间空隙；cellpadding="0"：清除单元格内边距。 3. 单元格合并（本节课重点） colspan="2"：横向合并2列，当前单元格占两个格子宽度，用于底部大图区域。4. 单元格多属性混用 td标签可同时设置宽高、class类名、id唯一标识、背景图片、鼠标事件。

二、CSS样式部分 1. 全局初始化 *{margin:0;padding:0;}，清空所有标签默认留白。 2. 选项卡按钮样式 .denglu1 / .denglu2 - float:left：两个单元格横向并排； - 固定宽高，line-height+text-align:center 实现文字水平垂直居中； - background 复合属性：引入背景图、不平铺、左对齐；color:#fff 白色文字。 三、JS交互：鼠标悬浮切换选项卡背景 ### 1. 鼠标触发事件 onmouseover="change('标识')"：鼠标悬浮单元格时，调用change函数并传入id参数。 ### 2. JS自定义函数 change(ss) 1. document.getElementById("id名")：通过id获取页面元素； 2. .style.backgroundImage：动态修改元素背景图片，实现切换按钮底色； 3. 判断逻辑： - 鼠标悬浮登录（left）：登录按钮切换高亮图lib2，注册切默认lib1； - 鼠标悬浮注册（right）：注册按钮切换高亮图lib2，登录切默认lib1。

四、完整页面结构逻辑 1. 两行表格：第一行2个单元格（登录/注册选项卡），第二行1个合并单元格放登录背景大图； 2. CSS完成按钮基础外观布局； 3. JS+onmouseover事件实现鼠标悬浮切换高亮效果，完成简易选项卡交互。 ## 五、课堂核心知识点总结 1. 表格布局：table、tr、td基础结构，colspan横向合并单元格； 2. 浮动布局：float:left实现单元格横向并排； 3. 文字居中技巧：行高等于盒子高度+文字居中属性； 4. JS基础DOM操作：getElementById获取元素，修改style样式； 5. 鼠标事件：onmouseover悬浮触发函数，实现简单页面交互； 6. 背景复合写法：background可同时设置图片、平铺、定位。

六、实操易错点 1. 图片路径写错，背景图无法加载； 2. 合并单元格colspan数值计算错误，表格布局错乱； 3. JS函数传参引号、if判断双等号==书写错误，切换功能失效； 4. 忘记全局清零margin/padding，表格出现多余空白间隙。