电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

在Dreamweaver中制作选项卡式网页效果

在Dreamweaver中制作选项卡式网页效果_第1页
1/7
在Dreamweaver中制作选项卡式网页效果_第2页
2/7
在Dreamweaver中制作选项卡式网页效果_第3页
3/7
在 Dreamweaver 中制作选项卡式网页效果在网站设计过程中常常会遇到选项卡效果的制作,很多刚开始学习网页设计的朋友会觉得这个很难制作,今日我就结合 div 和 css 做一个选项卡效果实例,大家一起探讨一下 Dreamweaver 中的“行为”的奥妙.操作步骤:一、制作选项卡的鼠标交换效果1.打开 Dreamweaver CS6.0,新建一个 html 空白文件并保存到文件夹内。2.创建一个父层。打开“插入”>“布局对象”〉“Div 标签".3。在弹出的“插入 Div 标签”对话框中的 ID 文本框中输入“gen”,然后单击“确定"按钮。4。然后在代码视图#gen {position: absolute;width: 376px;height: 30px;z-index: 1;border—bottom:solid #F30 2px;border-top:solid #CCC 1px;border-right:solid #CCC 1px;}〈/style〉5。div 变成如下图所示效果.6.删除 div 中的“此处显示 id“gen”的内容”提示文字后,输入文本“汽车”,然后在设计视图中选择该文本后,在“html"属性面板中“链接”文本框中输入“#",为该文本添加了一个空链接.7。在前输入如下所示代码:#gen a:hover {color: #F00;background—color:#FFF;text-decoration: underline;border—top: 2px solid #F30;border—left:#CCC solid 1px;border-bottom:#FFF solid 2px;border—radius: 3px 3px 0px 0px;margin-top:-2px; }10.“汽车”的鼠标交换链接样式变成如下图所示样式:11。在“设计"视图中,激活“汽车”所在的〈a>标签,然后使用“CTRL+C”复制,用鼠标将插入点定位到div“gen”的空白处,使用“CTRL+V”粘贴两次,得到如图所示效果:12。分别将文字修改为“降价”、“二手车"。二、添加“显示—隐藏"行为13。将插入点定位到 div“gen”的空白处,打开“插入”>“布局对象”>“Div 标签",在弹出的“插入 Div标签"对话框中的 ID 文本框中输入“qc",然后单击“确定”按钮。14。参考上一步所示方法,再先后创...

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

在Dreamweaver中制作选项卡式网页效果

确认删除?
VIP
微信客服
  • 扫码咨询
会员Q群
  • 会员专属群点击这里加入QQ群
客服邮箱
回到顶部