第六课编制滑动门教程.doc

第六课：滑动门的制作求实滑动门是用DIV + CSS 编制的，首先要设计滑动门的尺寸，具体说你要在这个滑动门 里显示几个内容，整体宽和高，导航的高度，内容的高度， 本实例课设计宽 450，高 230，显示4 个内容，导航条高 28，内容高 200， 1，新建文档，保存跟文件夹里，命名为 hdm.htm， 2，删除所有代码，插入 DIV标签，在类里输入zkj 点确定， 打开 CSS 样式面板，点新建 CSS 规则，出来下面对话框，（这个样式是控制总表格 的）仅对该文档 确定，在对话框里，类型里 大小 12，在区块里，文本对齐 居中，方框里，宽 456， 高 自动， 确定 3，在代码里删除“此处显示 class zkj 的内容”光标不移动，插入DIV标签，在类 里输入dht 点确定，点新建 CSS 规则， （这个样式是控制总导航条的）按下图设置点确定，在方框里 ，宽 456，高 28，清除 选两者，在定位里 溢位选隐藏。点确定 4，在代码里删除“此处显示 class dht 的内容”，打开文本，点击ul 在的 右面点一下，空格，找到 id 双击 在 ” 里输入 myTab0，打开 CSS 样式面板，点新建 CSS 规则， （这个样式是控制总导航条的）出来下面对话框确定，在方框里 把填充和边界都输入 0， 确定5，在左面点一下，点击文本里的li。在的 右面点一下，空格，找到 class 双击 在 ” 里输入 active ，在”后面空格输入onMouseOver=nTabs(this,0); 在外输入PHP动网录像 ，打开 CSS 样式 面板，点新建 CSS 规则， （这个样式是控制分导航的）出来下面对话框 把选择器里换成.zkj .dht li确定，在方框里 宽 114，高 28，填充 上8 下 2 浮动 左对齐，在列表里 类型 无，在扩展里， 光标输入 pointer 6刷黑PHP动网录像，打开 CSS 样式面板，点新建 CSS 规则， （这个样式是控制打开显示的导航的）出来下面对话框 把. .nTab .TabTitle #myTab0 .active换成 .active ， 确定，类里 大小 14 ，粗体，颜色 #07519A，背景里找 到 images 里的 bj.jpg，方框里 宽114 高 28，打开填充 上 3 在列表里 类型 无，确定7，在代码里的PHP动网录像右面输入 右面点一下 ，点击文本里的li。在的 右面点一下，空格，找到 class 双击 在 ” 里输入normal ，在”后面空格输入onMouseOver=nTabs(this,1); 在外输入ASP动网录像 ，打开 CSS 样式 复制ASP动网录像 粘贴到下一行上，再粘贴一行。把第一次粘贴的ASP动网录像改为帝国改造录像，把(this,1)，的1改为2，把第二次粘贴的ASP动网录像改为综合教程录像，把(this,1)，的1改为3打开 CSS 样式面板，点新建 CSS 规则， （这个样式是控制第 2 个导航的）出来下面对话框 按下图设置确定，类里 大小 14。粗体 ，颜色#07519A，背景里 找到 images 里的title_bg.gif，方框里 宽 114 高28 浮动 左对齐，打开填充 上 3 在列表里 类型 无，确定9, 在代码里下面的后面点一下，回到设计面板，插入 DIV 标签，在类里输入 TabContent 点确定，打开 CSS 样式 面板，点新建 CSS 规则， （这个样式是控制内容的）出来下面对话框 确定后 在方框里 宽 450，高 200，填充 上 5 其他0边界 0 定位 溢位 隐藏，确定 10，在代码里 删除“此处显示 class TabContent 的内容”插入 div 在id里输入 myTab0_Content0 删除“此处显示 id myTab0_Content0 的内容”输入PHP动网录像内容在 插入 div 标签 在 id里输入 myTab0_Content1 在代码里id=myTab0_Content1后面空格 找到 class 双击 在 ” 里输入 none 删除“此处显示 id myTab0_Content1 的内容”输入ASP动网录像内容，复制ASP动网录像内容，下面粘贴2次把把第一次粘贴的id=myTab0_Content1的1改为2，把ASP动网录像内容改为帝国改造录像内容，把第二次粘贴的id=myTab0_Content1的1改为3，把ASP动网录像内容改为综合教程录像内容，打开 CSS 样式面板， 点新建 CSS 规则， （这个样式是控制内容隐藏的）选择器类型 选类 名称 输入 none 点确定，在区块里，把显示改为 无 11， 把角本代码粘贴在代码第一行里 function nTabs(thisObj,Num) if(thisObj.className = active)return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName(li);for(i=0; i tabList.length; i+) if (i = Num) thisObj.className = active; document.getElementById(tabObj+_Content+i).style.display = block; else tabListi.className = normal; document.getElementById(tabObj+_Content+i).style.display = none; 滑动门内容页面的制作1， 新建文档，保存跟文件夹里，命名为1.htm，删除全部代码，链接样式 （测试完成在链接样式路径前加!-news.url-）2， 插入2行1列，宽440，其他0的表格，第1行高165，垂直顶端，第2行高30，水平右对齐，输入更多。空格，刷黑更多。做空连接，目标_top，在第1行里插入1行3列，宽100%的表格，全新所有单元格，高 25，样式 xc