053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

css菜单的横竖转换技巧

时间:2017-08-16

css菜单的横竖转换就是原来原来的竖式的菜单通过改变css的代码就可以直接转换为横式菜单.

竖式菜单的css代码:

 

以下为引用的内容:

<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>

 

横式菜单的css代码:

 

以下为引用的内容:

<style>
<!--
body{
 background-color:#ffdee0;
}
#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;      /* 改变文字颜色 */
}
-->
</style>

 

 

横式和竖式的css 代码区别在于对li是否加 float:left

#navigation li {
 float:left;       /* 水平显示各个项目 */

}

#navigation li {
 border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP