漂亮的menu 9个

最新推荐文章于 2017-11-18 08:58:43 发布

转载最新推荐文章于 2017-11-18 08:58:43 发布 · 953 阅读

文章标签：

#menu #download #url #css #div #float

css技术专栏收录该内容

12 篇文章

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %> <!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" xml:lang="en" lang="en"> <head runat="server"> <title>Free Menu Designs - e-lusion.com</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="CSS menus free for all" /> <meta name="keywords" content="CSS, css, CSS menu, CSS design, css design, CSS menu design, e-lusion, Ian, ian, e-lusion.com" /> <meta name="author" content="Ian Main" /> <meta name="Copyright" content="Creative Commons - http://creativecommons.org/licenses/by/2.0/" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 80%; font-weight: bold; background: #F3FAFF; } a:link { color: #76B0D5; text-decoration: none; } a:visited { color: #7B878F; text-decoration: none; } a:hover, a:active { color: #2399E5; } #container { width: 760px; } #header { color: #76B0D5; background: #C5E7FD; border-bottom: 3px solid #76B0D5; font-family: Georgia, "Times New Roman", Times, serif; font-size: 3em; padding: 10px; } #content { margin: 10px; color: #555; } ul { list-style: none; margin: 0; padding: 0; } p { font-size: .9em; } #firstcol { float: left; } #secondcol { float: left; } #thirdcol { padding-top: 10px; margin-right: 106px; margin-bottom: 10px; float: right; } /* =-=-=-=-=-=-=-[Menu One]-=-=-=-=-=-=-=- */ #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; voice-family: "/"}/""; voice-family: inherit; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(images/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover { color: #26370A; background: url(images/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(images/menu1.gif) 0 -64px; padding: 8px 0 0 10px; } /* =-=-=-=-=-=-=-[Menu Two]-=-=-=-=-=-=-=- */ #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; voice-family: "/"}/""; voice-family: inherit; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(images/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover { color: #283A50; background: url(images/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(images/menu2.gif) 0 -64px; padding: 8px 0 0 10px; } /* =-=-=-=-=-=-=-[Menu Three]-=-=-=-=-=-=-=- */ #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; voice-family: "/"}/""; voice-family: inherit; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(images/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li a:active { color: #283A50; background: url(images/menu3.gif) 0 -32px; padding: 8px 0 0 30px; } /* =-=-=-=-=-=-=-[Menu Four]-=-=-=-=-=-=-=- */ #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; voice-family: "/"}/""; voice-family: inherit; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(images/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover { color: #fff; background: url(images/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(images/menu4.gif) 0 -64px; padding: 8px 0 0 30px; } /* =-=-=-=-=-=-=-[Menu Five]-=-=-=-=-=-=-=- */ #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; voice-family: "/"}/""; voice-family: inherit; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(images/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover { color: #fff; background: url(images/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(images/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; } /* =-=-=-=-=-=-=-[Menu Six]-=-=-=-=-=-=-=- */ #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; voice-family: "/"}/""; voice-family: inherit; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(images/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li a:active { color: #6C7250; background: url(images/menu6.gif) 0 -32px; padding: 8px 0 0 10px; } /* =-=-=-=-=-=-=-[Menu Seven]-=-=-=-=-=-=-=- */ #menu7 { width: 200px; border-style: none dashed dashed dashed; border-color: #608FB5; border-width: 1px; } #menu7 li a { height: 32px; voice-family: "/"}/""; voice-family: inherit; height: 22px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #1D537F; display: block; background: url(images/menu7.gif) repeat-x; padding: 10px 0 0 10px; } #menu7 li a:hover { color: #fff; background: url(images/menu7.gif) repeat-x 0 -32px; padding: 10px 0 0 10px; } #menu7 li a:active { color: #fff; background: url(images/menu7.gif) repeat-x 0 -64px; padding: 10px 0 0 10px; } /* =-=-=-=-=-=-=-[Menu Eight]-=-=-=-=-=-=-=- */ #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; voice-family: "/"}/""; voice-family: inherit; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(images/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover { color: #257EB7; background: url(images/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(images/menu8.gif) 0 -64px; padding: 8px 0 0 25px; } /* =-=-=-=-=-=-=-[Menu Nine]-=-=-=-=-=-=-=- */ #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; voice-family: "/"}/""; voice-family: inherit; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(images/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover { color: #725033; background: url(images/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(images/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }</style> </head> <body> <div id="header">Free Menu Designs</div> <div id="container"> <div id="content"> <p>Need a block menu fast!</p> <p>Below are simple CSS menu designs for you to download and use any way you see fit.</p> <p>You can download the <a href="full.zip" mce_href="full.zip" title="Download 9 menu designs">complete set</a>, or an individual menu by clicking the Download Menu button located on each menu.</p> <p>Thanks to <a href="http://veerle.duoh.com/" mce_href="http://veerle.duoh.com/" title="Menu 3">Veerle</a> for the <a href="http://veerle.duoh.com/comments.php?id=208_0_2_5_C" mce_href="http://veerle.duoh.com/comments.php?id=208_0_2_5_C" title="Designing a CSS based template - part I">tutorial on the menu design 3</a>, the best looking menu here.</p> <p>Please feel free to download for commercial or private use, and modify to suit your needs.</p> <p><a href="http://creativecommons.org/licenses/by/2.0/" mce_href="http://creativecommons.org/licenses/by/2.0/">Creative Commons - Attribution 2.0</a> - designed by <a href="http://www.e-lusion.com" mce_href="http://www.e-lusion.com">Ian Main - e-lusion.com</a></p> </div> <div id="firstcol"> <div id="menu"> <ul> <li><a href="#1" mce_href="#1" title="Home">Home</a></li> <li><a href="#2" mce_href="#2" title="About">About</a></li> <li><a href="#3" mce_href="#3" title="Services">Services</a></li> <li><a href="#4" mce_href="#4" title="Portfolio">Portfolio</a></li> <li><a href="#5" mce_href="#5" title="Store">Store</a></li> <li><a href="menu1.zip" mce_href="menu1.zip" title="Download">Download Menu</a></li> </ul> </div> <div id="menu2"> <ul> <li><a href="#1" mce_href="#1" title="Home">Home</a></li> <li><a href="#2" mce_href="#2" title="About">About</a></li> <li><a href="#3" mce_href="#3" title="Services">Services</a></li> <li><a href="#4" mce_href="#4" title="Portfolio">Portfolio</a></li> <li><a href="#5" mce_href="#5" title="Store">Store</a></li> <li><a href="menu2.zip" mce_href="menu2.zip" title="Download">Download Menu</a></li> </ul> </div> <div id="menu3"> <ul> <li><a href="#1" mce_href="#1" title="Home">11111</a></li> <li><a href="#2" mce_href="#2" title="About">About</a></li> <li><a href="#3" mce_href="#3" title="Services">Services</a></li> <li><a href="#4" mce_href="#4" title="Portfolio">Portfolio</a></li> <li><a href="#5" mce_href="#5" title="Store">Store</a></li> <li><a href="menu3.zip" mce_href="menu3.zip" title="Download">Download Menu</a></li> </ul> </div> </div> <div id="secondcol"> <div id="menu4"> <ul> <li><a href="#1" mce_href="#1" title="Home">Home</a></li> <li><a href="#2" mce_href="#2" title="About">About</a></li> <li><a href="#3" mce_href="#3" title="Services">Services</a></li> <li><a href="#4" mce_href="#4" title="Portfolio">Portfolio</a></li> <li><a href="#5" mce_href="#5" title="Store">Store</a></li> <li><a href="menu4.zip" mce_href="menu4.zip" title="Download">Download Menu</a></li> </ul> </div> <div id="menu5"> <ul> <li><a href="#1" mce_href="#1" title="Home">Home</a></li> <li><a href="#2" mce_href="#2" title="About">About</a></li> <li><a href="#3" mce_href="#3" title="Services">Services</a></li> <li><a href="#4" mce_href="#4" title="Portfolio">Portfolio</a></li> <li><a href="#5" mce_href="#5" title="Store">Store</a></li> <li><a href="menu5.zip" mce_href="menu5.zip" title="Download">Download Menu</a></li> </ul> </div> <div id="menu6"> <ul> <li><a href="#1" mce_href="#1" title="Home">Home</a></li> <li><a href="#2" mce_href="#2" title="About">About</a></li> <li><a href="#3" mce_href="#3" title="Services">Services</a></li> <li><a href="#4" mce_href="#4" title="Portfolio">Portfolio</a></li> <li><a href="#5" mce_href="#5" title="Store">Store</a></li> <li><a href="menu6.zip" mce_href="menu6.zip" title="Download">Download Menu</a></li> </ul> </div> </div> <div id="thirdcol"> <div id="menu7"> <ul> <li><a href="#1" mce_href="#1" title="Home">Home</a></li> <li><a href="#2" mce_href="#2" title="About">About</a></li> <li><a href="#3" mce_href="#3" title="Services">Services</a></li> <li><a href="#4" mce_href="#4" title="Portfolio">Portfolio</a></li> <li><a href="#5" mce_href="#5" title="Store">Store</a></li> <li><a href="menu7.zip" mce_href="menu7.zip" title="Download">Download Menu</a></li> </ul> </div> <div id="menu8"> <ul> <li><a href="#1" mce_href="#1" title="Home">22222</a></li> <li><a href="#2" mce_href="#2" title="About">About</a></li> <li><a href="#3" mce_href="#3" title="Services">Services</a></li> <li><a href="#4" mce_href="#4" title="Portfolio">Portfolio</a></li> <li><a href="#5" mce_href="#5" title="Store">Store</a></li> <li><a href="menu8.zip" mce_href="menu8.zip" title="Download">Download Menu</a></li> </ul> </div> <div id="menu9"> <ul> <li><a href="#1" mce_href="#1" title="Home">Home</a></li> <li><a href="#2" mce_href="#2" title="About">About</a></li> <li><a href="#3" mce_href="#3" title="Services">Services</a></li> <li><a href="#4" mce_href="#4" title="Portfolio">Portfolio</a></li> <li><a href="#5" mce_href="#5" title="Store">Store</a></li> <li><a href="menu9.zip" mce_href="menu9.zip" title="Download">Download Menu</a></li> </ul> </div> </div> </div> </body> </html>