立体菜单、带箭头的菜单、带说明信息的菜单
来源：互联网 发布：汉诺塔问题算法 编辑：程序博客网 时间：2024/06/06 07:12
带说明信息的菜单
<!DOCTYPE html><head> <style> #menu { /*对menu层设置*/ font-family:Arial;/*字体*/ font-size:16px;/*字号*/ width:140px; /*宽度*/ margin:0;/*菜单项之间间隔0.5em，并水平居中*/ border:solid 1px #ccc;/*灰色细边框*/ } #menu a, #menu a:visited { text-decoration:none; /*文字无下划线*/ text-align:center; /*文字水平居中对齐*/ color:#c00; /*红色文字*/ display:block; /*设置为块级元素*/ padding:4px;/*内边距*/ background-color:#fff; /*背景色*/ border:solid 1px #fff;/*与背景色相同边框，防止跳动*/ position:relative;/*使用相对定位*/ width:130px; } #menu a span { display:none; } #menu a:hover { border-color:#c00;/*边框颜色红色*/ } #menu a:hover span { display:block; /*设置为块级元素*/ position:absolute; /*使用绝对定位*/ height:0; /*高度为0*/ width:0; /*宽度为0*/ overflow:hidden; /*防止溢出*/ border:solid 8px #fff;/*设置默认的边框样式*/ top:4px;/*竖直方向的定位*/ } #menu a:hover span.left { border-left-color:#c00; left:8px; } #menu a:hover span.right { border-right-color:#c00; right:8px; } #menu a:hover span.intro { font-size:12px; display:block; position:absolute; /*绝对定位*/ left:150px; top:0px; padding:5px; width:100px; height:auto; background-color:#eee; color:#000; border:1px dashed #234; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带说明信息的菜单</title></head><body> <div id="menu"> <a href="#"> <span class="left"></span> Home <span class="right"></span> <span class="intro">这里说明Home菜单项</span> </a> <a href="#"> <span class="left"></span> Contact Us <span class="right"></span> <span class="intro">这里说明Contact Us菜单项</span> </a> <a href="#"> <span class="left"></span> Web Dev <span class="right"></span> <span class="intro">这里说明Web Dev菜单项</span> </a> <a href="#"> <span class="left"></span> Web Design <span class="right"></span> <span class="intro">这里说明Web Design菜单项</span> </a> <a href="#"> <span class="left"></span> Map <span class="right"></span> <span class="intro">这里说明Map菜单项</span> </a> </div></body></html>带箭头的菜单
<!DOCTYPE html><html> <head> <style> #menu { /*对menu层设置*/ font-family:Arial;/*字体*/ font-size:16px;/*字号*/ width:140px; /*宽度*/ margin:0 auto;/*菜单项之间间隔0.5em，并水平居中*/ border:solid 1px #ccc;/*灰色细边框*/ } #menu a, #menu a:visited { text-decoration:none; /*文字无下划线*/ text-align:center; /*文字水平居中对齐*/ color:#c00; /*红色文字*/ display:block;/*设置为块级元素*/ padding:4px;/*内边距*/ background-color:#fff; /*背景色*/ border:solid 1px #fff;/*与背景色相同边框，防止跳动*/ position:relative;/*使用相对定位*/ width:130px; } #menu a span { display:none; } #menu a:hover { border-color:#c00;/*边框颜色红色*/ } #menu a:hover span { display:block; /*设置为块级元素*/ position:absolute; /*使用绝对定位*/ height:0; /*高度为0*/ width:0; /*宽度为0*/ border:solid 8px #fff;/*设置默认的边框样式*/ top:4px;/*竖直方向的定位*/ overflow:hidden; } #menu a:hover span.left { border-left-color:#c00; border-right-color:#c00; left:8px; } #menu a:hover span.right { border-right-color:#c00; right:8px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>箭头菜单</title></head> <body> <div id="menu"> <a href="#"><span class="left"></span> Home <span class="right"></span></a> <a href="#"><span class="left"></span> Contact Us <span class="right"></span></a> <a href="#"><span class="left"></span> Web Dev <span class="right"></span></a> <a href="#"><span class="left"></span> Web Design <span class="right"></span></a> <a href="#"><span class="left"></span> Map <span class="right"></span></a> </div> </body></html>立体菜单
<!DOCTYPE html><html> <head> <title>立体菜单</title> <style> #menu { /*对menu层设置*/ font-family:Arial;/*字体*/ font-size:14px;/*字号*/ } #menu a, #menu a:visited { text-decoration:none; /*文字无下划线*/ text-align:center; /*文字水平居中对齐*/ color:#fff; /*白色文字*/ display:block;/*设置为块级元素*/ width:10em; /*宽度*/ padding:0.25em;/*内边距*/ margin:0.5em auto;/*菜单项之间间隔0.5em，并水平居中*/ background-color:#8ab; /*背景色*/ border:2px solid #fff;/*边框粗细2像素*/ border-color:#def #678 #345 #cde;/*边框颜色显示突起效果*/ position:relative;/*使用相对定位*/ } #menu a:hover { top:2px;/*向下移动2像素*/ left:2px;/*向右移动2像素*/ border-color:#345 #cde #def #678;/*边框颜色显示突起效果*/ } </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head> <body> <div id="menu"> <a href="#"> Home</a> <a href="#"> Contact Us</a> <a href="#"> Web Dev</a> <a href="#"> Web Design</a> <a href="#"> Map</a> </div> </body></html>- 立体菜单、带箭头的菜单、带说明信息的菜单
- css带说明信息的菜单
- 带历史信息的菜单
- 带历史信息的菜单
- 带历史信息的菜单
- 非常酷的css带说明信息导航菜单
- C#制作带历史信息的菜单
- C#0007--带历史信息的菜单
- C#0007--带历史信息的菜单
- 创建带菜单的DVD
- 带网页缩略图的菜单
- MFC_CMenu_CIconMenu_带图标的菜单
- 带自定义菜单的微信类
- 一个简单的带历史信息的菜单
- 带历史信息的菜单（1--001）
- 带历史信息的菜单 清除INI文件内容
- 基于C#带记录历史信息的菜单
- Android：DropPopMenu — 显示位置跟随操作按钮显示的带箭头的弹出菜单
- C运行时库和标准C++库
- c++ string 和 stl算法
- C++,二维数组与指针,二维数组名是不是首地址?
- Log中出现You must supply a layout_width attribute的解决方法
- C++设计模式之一 工厂模式（简单工厂、工厂和抽象工厂）
- 立体菜单、带箭头的菜单、带说明信息的菜单
- 门面（Facade）模式
- 实现内存检测工具
- leetcode001：3sum solution
- Android 处理图片（ 图像二值化、锐化、转换格式）
- 用MyEclipse搭建SSH框架 Struts Spring Hibernate
- C++类模板实现数据结构——栈
- 十道海量数据处理面试题与十个方法大总结
- A SOAP Example in Java
