看到这
篇文章
想必你在学习CSS技术CSS
含义你定也不陌生:层叠样式表
我们需要注意样式可层叠性在以往制作中我们往往将导航菜单处理成直角矩形或者直接定义Border和Background样式即完成了菜单制作难道我们只能这样了吗我们需要制作出更加美观、实用、方便菜单什么是滑动门技术？究其本意
就是根据文本自适应大小进行滑动我们可以用背景图片来营造这样现象个在左个在右把这两个图片想象成可以滑动门当文本较少时候两个图片重叠就多些当文本较多时候就滑动开重叠部分就少些我们看下面图片举例![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052833463.jpg\")
在上在
图示中左边窄门遮住了右链宽门我们主要想实现了是图片圆弧部份中间区域大小可以根据文本多少来自适应如果文本少侧距离就近相重叠就多如果文本多就撑开了两扇门让区域变大大家应该能理解这样思维我们用象处理软件Software
制作了 4个图片以备用:![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052897307.jpg\")
![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052842706.jpg\")
![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052880412.jpg\")
![\"\"/](\"http://www./Files/BeyondPic/2007-5/24/0752416052859763.jpg\")
下面我们来动手制作这个滑动门菜单
大家跟我起做如果有疑问欢迎来我主页52css.com给我留言首先我们需要创建
个无序列表来放置菜单内容xhtml代码如下:<divid=\"woaicss\">
<ul>
<li><ahref=\"#\">DivCSS</a></li>
<li><ahref=\"#\">52CSS</a></li>
<li
=\"dang\"><ahref=\"#\">52CSS.com</a></li><li><ahref=\"#\">CSSWebDesign</a></li>
<li><ahref=\"#\">CSSLayoutExample</a></li>
</ul>
</div>
我们写相应
样式使菜单能初步成形CSS代码如下:#woaicss{
width:100%
margin:0;
padding:0;
}
#woaicssul{
margin:20px;0018px;
padding:0;
list-style:none;
white-space:nowrap;
}
#woaicssli{
float:left;
margin:0;
padding:0;
background:url(hm_4.jpg)no-repeatrighttop;
}
在上面
代码中我们首先设置容器woaicss大小就外边距、内边距设置无序列表上边距为20PX左边距为18PX并设置了列表标记为无列表元素li为左浮动
并设置了背景图片请注意背景图片对齐方式:无重复、居右、顶端对齐我们运行
下看看效果得到了如下图所示样子菜单
链接文字距离左右边距太近期了滑动门另扇(左侧)还没有定义我们继续后面制作在CSS文件中加入如下代码:#woaicsslia{
display:block;
background:url(hm_3.jpg)no-repeatlefttop;
padding:015px;
}
#woaicsslia:hover{
color:#c00;
}
我们定义li
链接区为块元素设置背景图片请注意背景图片对齐方式:无重复、居左、顶端对齐设置内边距:上下为零左右为15PX我们运行
下看看效果得到了如下图所示样子至此
滑动门菜单样子已经具备了我们成功了实现了滑动门菜单制作但我们菜单还不够美观链接文字需要定义需要制作链接菜单“当前页”样式我们继续制作
CSS代码如下:#woaicsslia{
display:block;
background:url(hm_3.jpg)no-repeatlefttop;
padding:015px;
font-size:15px;
color:#000;
font-weight:800;
text-decoration:none;
}
#woaicsslia:hover{
color:#c00;
}
#woaicssli.dang{
background:url(hm_2.jpg)no-repeatrighttop;
}
#woaicssli.danga{
background:url(hm_1.jpg)no-repeatlefttop;
color:#fff;
}
#woaicssli.danga:hover{
color:#fc0;
}
链接文字进行了定义
并设置了hover效果设置类dang
样式这是当前页效果背景图片定义和上面所讨论类似我们形成完整
代码运行下面代码看最终CSS滑动门菜单制作:=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
滑动门菜单
制作打破了种方方正正矩形菜单模式让我们页面设计可以更加灵活方便不必拘泥于代码局限大家多做偿试欢迎你来我主页52css.com和我交流相信你能做出更加漂亮效果
最新评论