虽然PJ在后台里可以实现中英文菜单,但一些新手可能还是想知道CSS是怎么样做到的,呵呵雪狐就在此演示一下CSS文件!这是我的小站里的一个电台的中英文菜单CSS文件,大家可以去看看
http://www.musicfy.com/radio/比较一下.CSS文件如下:
#nav{
padding: 138px 20px 0;
这是菜单的填充,就是距离TOP(顶部)填充
font-size: 12px;
这是文字的大小
font-weight: bold;
这是文字的粗体
font-family:Arial, Helvetica, sans-serif,宋体;
这是字体样式
margin: 0em 0 0;
这是菜单的边距
list-style:none;
这是菜单的列表的样式属性,就是不要列表前的符号
}
#nav li{
float: left;
这是菜单向左边浮动,这样就是水平导航菜单
margin-right: 0px;
这是菜单的li边距,也就是每个菜单之间的距离,也可以不要
}
#nav li a,#nav li a:hover span{
这里是链接属性
line-height: 20px;
这里是菜单文字的行高距离
text-decoration: none;
这里是链接样式属性,就是不要链接下划线
background: #081218;
这里是菜单的背景色,就是还没有点开或光标还没有移动到上面时的背景色
color: #00ccff;
这里是菜单文字色彩
display: block;
这里是将对象呈递为内联对象,也就是让菜单呈水平线,而不是呈垂直
width: 75px;
这里是单个菜单的宽度
text-align: center;
这里是文字居中对齐
overflow:hidden;
这里是内容溢出时的设置
}
#nav li a span{display:none;}
这里是元素隐藏,就是说在光标没有移动的时候隐藏
#nav a:hover{
position: relative;
这里是元素定位,relative为相对定位
}
#nav a:hover span{
display:block;
这里是内容溢出时的设置
position:absolute;
这里是元素定位,absolute为绝对定位
top: 0;
这里是定位属性,top为顶部
left: 0;
这里是定位属性,left为左边
cursor: pointer;
这里是光标样式属性,pointer为手型
}
#nav a:hover span{
padding-top:2px;
这里是填充属性,top为顶部
}
#nav li a:hover,#nav li a:hover span{
这里是光标移动到上面后的样式
color: #FFFFFF;
这里是字体色彩
background: #DC4E1B;
这里是背景色
}
从这里开始下面的可以不要
#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}
#nav li.home a{color: #0011ff;
}
#nav li.home a:hover span{ background: #DC4E1B;}
[
本帖最后由 雪狐轩 于 2008-2-29 14:45 编辑 ]
![[PJblog^3]技术支持论坛 - PJBLOG SUPPORT FORUM](images/phpwind/logo.gif){kind=logo}
