查看完整版本: 实现中英文菜单翻转CSS技巧

实现中英文菜单翻转CSS技巧

虽然PJ在后台里可以实现中英文菜单,但一些新手可能还是想知道CSS是怎么样做到的,呵呵雪狐就在此演示一下CSS文件!这是我的小站里的一个电台的中英文菜单CSS文件,大家可以去看看[url]http://www.musicfy.com/radio/[/url]比较一下.CSS文件如下:

#nav{
padding: 138px 20px 0;[color=red]这是菜单的填充,就是距离TOP(顶部)填充[/color]
font-size: 12px;[color=red]这是文字的大小[/color]
font-weight: bold;[color=red]这是文字的粗体[/color]
font-family:Arial, Helvetica, sans-serif,宋体;[color=red]这是字体样式[/color]
margin: 0em 0 0;[color=red]这是菜单的边距[/color]
list-style:none;[color=red]这是菜单的列表的样式属性,就是不要列表前的符号[/color]
}
#nav li{
float: left;[color=red]这是菜单向左边浮动,这样就是水平导航菜单[/color]
margin-right: 0px;[color=red]这是菜单的li边距,也就是每个菜单之间的距离,也可以不要[/color]
}
#nav li a,#nav li a:hover span{[color=red]这里是链接属性[/color]
line-height: 20px;[color=red]这里是菜单文字的行高距离[/color]
text-decoration: none;[color=red]这里是链接样式属性,就是不要链接下划线[/color]
background: #081218;[color=red]这里是菜单的背景色,就是还没有点开或光标还没有移动到上面时的背景色[/color]
color: #00ccff;[color=red]这里是菜单文字色彩[/color]
display: block;[color=red]这里是将对象呈递为内联对象,也就是让菜单呈水平线,而不是呈垂直[/color]
width: 75px;[color=red]这里是单个菜单的宽度[/color]
text-align: center;[color=red]这里是文字居中对齐[/color]
overflow:hidden;[color=red]这里是内容溢出时的设置[/color]
}
#nav li a span{display:none;}[color=red]这里是元素隐藏,就是说在光标没有移动的时候隐藏[/color]
#nav a:hover{
position: relative;[color=red]这里是元素定位,relative为相对定位[/color]

}
#nav a:hover span{
display:block;[color=red]这里是内容溢出时的设置[/color]
position:absolute;[color=red]这里是元素定位,absolute为绝对定位[/color]
top: 0;[color=red]这里是定位属性,top为顶部[/color]
left: 0;[color=red]这里是定位属性,left为左边[/color]
cursor: pointer;[color=red]这里是光标样式属性,pointer为手型[/color]
}
#nav a:hover span{
    padding-top:2px;[color=red]这里是填充属性,top为顶部[/color]
}
#nav li a:hover,#nav li a:hover span{[color=red]这里是光标移动到上面后的样式[/color]
color: #FFFFFF;[color=red]这里是字体色彩[/color]
background: #DC4E1B;[color=red]这里是背景色[/color]
}
[color=red]从这里开始下面的可以不要[/color]
#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}
#nav li.home a{color: #0011ff;
}
#nav li.home a:hover span{ background: #DC4E1B;}

[[i] 本帖最后由 雪狐轩 于 2008-2-29 14:45 编辑 [/i]]

很不错的方法哦,学习一下

好贴

不错不错啊！

嘎嘎
很不起眼的效果
但还是不错的