纯css制作的菱形模块的导航菜单

发布时间：2018-08-18 07:39:06 所属栏目：政策来源：站长网

导读：纯css制作的菱形模块的导航菜单纯css制作的的倾斜导航菜单，更个性一些，给人耳目一新的感觉，颜色不喜欢的朋友可自己换下颜色，试着修改一些属性，会有更多效果。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.or

　　纯css制作的菱形模块的导航菜单

　　纯css制作的的倾斜导航菜单，更个性一些，给人耳目一新的感觉，颜色不喜欢的朋友可自己换下颜色，试着修改一些属性，会有更多效果。

　　演示：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 倾斜的css导航菜单</title> <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="#" target="_blank">Home</a></li> <li id="single"><a href="#" target="_blank">Menu1</a></li> <li id="dropdown"><a href="#" target="_blank">Menu2</a></li> <li id="dropline"><a href="#" target="_blank">Menu3</a></li> <li id="flyout"><a href="#" target="_blank">Menu4</a></li> <li id="support"><a href="#" target="_blank">About</a></li> <li id="contact"><a href="#" target="_blank">Contact</a></li> </ul> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：云计算网_宿迁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!