基于css3仿造window7的开始菜单

2024-07-11 08:26:38

字体：大中小

来源：转载

供稿：网友

相当逼真，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="#">Documentsspan>a></li>
<li><a href="#">Picturesspan>a></li>
<li><a href="#">Musicspan>a></li>
<li><a href="#">Computerspan>a></li>
<li><a href="#">Networkspan>a></li>
<li><a href="#">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;阴影效果

上一篇：table CSS制作好看的网页表格

下一篇：css中IE判断语句 if !IE

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注