在Dreamweaver中制作选项卡式网页效果在网站设计过程中经常会遇到选项卡效果的制作,很多刚开始学习网页设计的朋友会觉得这个很难制作,今天我就结合div和css做一个选项卡效果实例,大家一起探讨一下Dreamweaver中的“行为”的奥妙
操作步骤:一、制作选项卡的鼠标交换效果1
打开DreamweaverCS6
0,新建一个html空白文件并保存到文件夹内
创建一个父层
打开“插入”>“布局对象”>“Div标签”
在弹出的“插入Div标签”对话框中的ID文本框中输入“gen”,然后单击“确定”按钮
然后在代码视图标签前输入如下代码:#gen{position:absolute;width:376px;height:30px;z-index:1;border-bottom:solid#F302px;border-top:solid#CCC1px;border-right:solid#CCC1px;}5
div变成如下图所示效果
删除div中的“此处显示id“gen”的内容”提示文字后,输入文本“汽车”,然后在设计视图中选择该文本后,在“html”属性面板中“链接”文本框中输入“#”,为该文本添加了一个空链接
在前输入如下所示代码:#gena{height:30px;display:block;float:left;padding-left:10px;padding-right:10px;line-height:30px;color:#000;font-weight:bold;text-decoration:none;border-bottom:2pxsolid#F30;border-left:1pxsolid#CCC;}8
“汽车”的超级链接样式变成如下图所示样式:9
在前输入如下所示代码:#gena:hover{color:#F00;backgro