纯CSS3制作的Windows 7开始菜单_菜单导航

纯CSS3制作的Windows 7开始菜单: 发布时间：2019-12-25编辑：脚本学堂

纯CSS3模拟制作的Windows7风格的开始菜单，整体的色彩和图标搭配效果不错。注意要在支持CSS3的浏览器中运行，IE9以下不支持本效果，建议使用火狐或Opera以及Chrome等主流浏览器。

<!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>纯CSS3制作的Windows 7开始菜单</title>
    <style type="text/css">
    body { font-family:Segoe UI, Arial, Sans-Serif; font-size:12px; color:#4b4b4b; background:#fff url() no-repeat scroll center center;}
    #meta { position:absolute; top:70px; right:20px; }
    #meta div { padding:20px; color:#000; margin: 0 0 20px;
    -moz-border-radius:5px;-webkit-border-radius:5px;
    background:rgba(255,255,255,0.50)}
    #meta a {color:#005aff;}
    #meta a img {margin:0 10px 0 0; border:solid 1px #000;}
    #startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:30px 0 0 0;
    -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
    box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
    background-color:#619bb9;
    background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
    background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }
    #programs, #links {float:left; display:block; padding:0; list-style:none;}
    #programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
    box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
    -moz-border-radius:3px;-webkit-border-radius:3px;}
    #programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;
    color:#4b4b4b; text-decoration:none; min-width:220px;}
    #programs a:hover {border:solid 1px #7da2ce;
    -moz-border-radius:3px; -webkit-border-radius:3px;
    box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
    background-color:#cfe3fd;
    background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
    background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
    #programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}
    #links {margin:7px; margin-top:-30px;}
    #links li.icon {text-align:center;}
    #links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
    color:#fff; text-decoration:none; min-width:120px;}
    #links a:hover {border:solid 1px #000;
    -moz-border-radius:3px; -webkit-border-radius:3px;
    box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
    background-color:#658da0;
    background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
    background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
    }
    #links a span { padding:5px; display:block; }
    #links a:hover span  { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
    background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
    color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }
    </style>
    </head>
    <body>
    <div style="width:480px;margin:0 auto">
    <div id="startmenu">
    <ul id="programs">
    <li><a href="#" _fcksavedurl="#"><img src="/source/images/201207/tp71303_firefox-32.png" _fcksavedurl="/source/images/201207/tp71303_firefox-32.png" alt="" />Mozilla Firefox</a></li>
    <li><a href="#" _fcksavedurl="#"><img src="/source/images/201207/tp71303_chrome.png" _fcksavedurl="/source/images/201207/tp71303_chrome.png" alt="" />Google Chrome</a></li>
    <li><a href="#" _fcksavedurl="#"><img src="/source/images/201207/tp71303_safari.png" _fcksavedurl="/source/images/201207/tp71303_safari.png" alt="" />Safari</a></li>
    <li><a href="#" _fcksavedurl="#"><img src="/source/images/201207/tp71303_opera.png" _fcksavedurl="/source/images/201207/tp71303_opera.png" alt="" />Opera</a></li>
    <li><a href="#" _fcksavedurl="#"><img src="/source/images/201207/tp71303_ie.png" _fcksavedurl="/source/images/201207/tp71303_ie.png" alt="" />Internet Explorer</a></li>
    <li><a href="#" _fcksavedurl="#"><img src="/source/images/201207/tp71303_rss_32.png" _fcksavedurl="/source/images/201207/tp71303_rss_32.png" alt="" />RSS Feeds</a></li>
    <li><a href="#" _fcksavedurl="#"><img src="/source/images/201207/tp71303_twitter_32.png" _fcksavedurl="/source/images/201207/tp71303_twitter_32.png" alt="" />Twitter</a></li>
    <li><a href="#" _fcksavedurl="#"><img src="/source/images/201207/tp71303_delicious_32.png" _fcksavedurl="/source/images/201207/tp71303_delicious_32.png" alt="" />Delicious</a></li>
    </ul>
    <ul id="links">
    <li class="icon"><img src="/source/images/201207/tp71303_folder.png" _fcksavedurl="/source/images/201207/tp71303_folder.png" alt="" /></li>
    <li><a href="#" _fcksavedurl="#"><span>Documents</span></a></li>
    <li><a href="#" _fcksavedurl="#"><span>Pictures</span></a></li>
    <li><a href="#" _fcksavedurl="#"><span>Music</span></a></li>
    <li><a href="#" _fcksavedurl="#"><span>Computer</span></a></li>
    <li><a href="#" _fcksavedurl="#"><span>Network</span></a></li>
    <li><a href="#" _fcksavedurl="#"><span>Connect to</span></a></li>
    </ul>
    </div>
    </div>
    <div style="width:640px;margin:10px auto 20px auto; padding:0 0 0 380px;overflow:hidden">
    
    <div id="jiathis_style_32x32">
    <a class="jiathis_button_qzone"></a>
    <a class="jiathis_button_tsina"></a>
    <a class="jiathis_button_tqq"></a>
    <a class="jiathis_button_renren"></a>
    <a class="jiathis_button_kaixin001"></a>
    <a href="#" _fcksavedurl="#" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
    <a class="jiathis_counter_style"></a>
    </div>
    </div>
    
    </div>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：使用jQuery制作向下滑动的二级菜单
下一篇：简单实用的滑动门导航菜单(jquery实现)

与纯CSS3制作的Windows 7开始菜单有关的文章

本文标题：纯CSS3制作的Windows 7开始菜单
本页链接：http://www.jb200.com/tx/9.html

浏览排行

栏目分类

热点文章

纯CSS3制作的Windows 7开始菜单