网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
菜单导航
-> 纯CSS倾斜菱形导航菜单
纯CSS倾斜菱形导航菜单
作者:admin 发布时间:2010-11-10 3:51:42 发布人: admin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>纯CSS倾斜菱形导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> #pad{height:150px;} #menu{padding:0 0 0 30px;margin:0;list-style:none;} #menu li{float:left;position:relative;margin-right:2px;display:block;height:0;width:60px;border-bottom:30px solid #069;border-left:30px dashed transparent;} #menu li a{position:absolute;left:60px;top:0;border-top:30px solid #069;border-right:30px dotted transparent;text-decoration:none;font-family:arial, sans-serif;font-size:12px;color:#fff;} #menu li a b{display:block;background:#069;position:absolute;top:-30px;left:-60px;width:60px;height:30px;line-height:30px;text-align:center;cursor:pointer;font-weight:normal;} #menu li#single{width:80px;} #menu li#single a{left:80px;} #menu li#single a b{left:-80px;width:80px;} #menu li a:hover{color:#000;} .home #menu li#home,.single #menu li#single,.dropdown #menu li#dropdown,.dropline #menu li#dropline,.flyout #menu li#flyout,.support #menu li#support,.contact #menu li#contact{border-bottom-color:#e70;} .home #menu li#home a,.single #menu li#single a,.dropdown #menu li#dropdown a,.dropline #menu li#dropline a,.flyout #menu li#flyout a,.support #menu li#support a,.contact #menu li#contact a{color:#000;border-top-color:#e70;} .home #menu li#home a b,.single #menu li#single a b,.dropdown #menu li#dropdown a b,.dropline #menu li#dropline a b,.flyout #menu li#flyout a b,.support #menu li#support a b,.contact #menu li#contact a b{background:#e70;} </style> </head> <body> <ul id="menu"> <li id="home"><a href="http://web.archive.org/web/20150530112318/http://www.syplay.com/" target="_blank"><b>Home</b></a></li> <li id="single"><a href="http://web.archive.org/web/20150530112318/http://www.0491.com/" target="_blank"><b>Menu1</b></a></li> <li id="dropdown"><a href="#" target="_blank"><b>Menu2</b></a></li> <li id="dropline"><a href="#" target="_blank"><b>Menu3</b></a></li> <li id="flyout"><a href="#" target="_blank"><b>Menu4</b></a></li> <li id="support"><a href="#" target="_blank"><b>About</b></a></li> <li id="contact"><a href="#" target="_blank"><b>Contact</b></a></li> </ul> </body> </html>
纯CSS倾斜菱形导航菜单
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
输入序列号时常用的让焦点自动跳转的特效
下一篇:文章:
比较实用的二级下拉导航菜单
本类浏览排行 »
比较实用的二级下拉导航菜单
纯CSS倾斜菱形导航菜单
输入序列号时常用的让焦点自动跳转的特效..
复制到剪贴板的按钮
获取指定图片的url地址的JS脚本
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
鼠标滑过缩略图时图片放大效果
本站推荐文章 »
比较实用的二级下拉导航菜单
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
兼容ie6、ie7、ff、opera、safari的水平垂..
一款设计精美的CSS滑动门菜单
一款简洁漂亮的CSS滑动门特效
结构和表现分离的Tab选项卡特效
滑动的div层做的动态菜单