相当逼真，css3果然强悍。友情提示：请勿在IE下浏览。来看下原作者的设计草图： 简明创建过程 第一步 ：创建如下菜单结构 复制代码代码如下: <div id="startmenu"> <ul id="programs"> <li><a href="#"><img src="firefox-32.png" alt="" />Mozilla Firefoxa></li> <li><a href="#"><img src="chrome.png" alt="" />Google Chromea></li> <li><a href="#"><img src="safari.png" alt="" />Safaria></li> <li><a href="#"><img src="opera.png" alt="" />Operaa></li> <li><a href="#"><img src="ie.png" alt="" />Internet Explorera></li> <li><a href="#"><img src="rss_32.png" alt="" />RSS Feedsa></li> <li><a href="#"><img src="twitter_32.png" alt="" />Twittera></li> <li><a href="#"><img src="delicious_32.png" alt="" />Deliciousa></li> <ul> <ul id="links"> <li class="icon"><img src="folder.png" alt="" /></li> <li><a href="#"><span>Documentsspan>a></li> <li><a href="#"><span>Picturesspan>a></li> <li><a href="#"><span>Musicspan>a></li> <li><a href="#"><span>Computerspan>a></li> <li><a href="#"><span>Networkspan>a></li> <li><a href="#"><span>Connect tospan>a></li> <ul> div> win7的开始菜单有二个部分，左侧程序菜单，右侧系统菜单。 第二步：菜单容器css 复制代码代码如下: #startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px; -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)); } 有几个关注的点,可以留意下： -moz-border-radius:5px;-webkit-border-radius:5px;圆角效果，这是css3中应用最广的 box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;阴影效果 background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));渐变背景 第三步：菜单左侧部分的css 复制代码代码如下: #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;} 这里值得留意的是鼠标经过菜单项的效果设置，也就是#programs a:hover里的样式，这是难点，也是css3的强大之处，依旧是圆角、阴影、渐变背景。 第四步：菜单右侧的CSS部分 复制代码代码如下: #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))); } 要留意的点依旧是哪几项，难点在于细节的微调，尤其是渐变背景的制作，css3中非常灵活，下次有机会，发篇css3渐变背景的详细教程。 英文原文：http://www.jankoatwarpspeed.com/post/2010/04/06/windows-7-start-menu-css3.aspx 代码打包下载(请不要在IE下测试)

　　推荐阅读

　　css 条件注释使用指南

在CSS 框架和模板出现以后，一些布局的问题可以很容易解决掉，但是显然这不能解决全部问题。这些问题通常可以通过普通的CSS来解决，但是有时候只针对IE显示一些(样式)信息可能会更好。 这是用条件注释是可以实现>>>详细阅读

本文标题：基于css3仿造window7的开始菜单

地址：http://www.17bianji.com/kaifa2/CSS/16531.html

 1/2    1