用CSS+DIV制作纵向和横向菜单、Tab菜单
Dec072013
纵向菜单效果如下:
横向菜单效果如下:
1、纵向菜单CSS部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <style> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } #navigation li { border-bottom:1px solid #ED9F9F; /* 添加下划线 */ } #navigation li a{ display:block; /* 区块显示 */ padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #711515; /* 左边的粗红边 */ border-right:1px solid #711515; /* 右侧阴影 */ } #navigation li a:link, #navigation li a:visited{ background-color:#c11136; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#990020; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ } --> </style> |
2、纵向菜单body部分:
1 2 3 4 5 6 7 8 9 |
保持完全相同的HTML项目列表结构,即body部分不变,将纵向菜单转换为横向菜单,CSS部分改为如下:
1、横向菜单CSS部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #navigation { font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } #navigation li { float:left; /* 水平显示各个项目 */ } #navigation li a{ display:block; /* 区块显示 */ padding:3px 6px 3px 6px; text-decoration:none; border:1px solid #711515; margin:2px; } #navigation li a:link, #navigation li a:visited{ background-color:#c11136; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#990020; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ } |
知识点:
通过设置<Li>的浮动属性float后,项目按水平方向排列到了一起。
本文固定链接: https://www.ouchaoman.com/2013/12/07/create-menu-with-css/ | 欧阳博客