使用css3仿造window7的开始菜单
发布时间:2015-05-12 来源:查字典编辑
摘要:相当逼真,css3果然强悍。友情提示:请勿在IE下浏览。查看实例:http://www.jankoatwarpspeed.com/examp...
相当逼真,css3果然强悍。
友情提示:请勿在IE下浏览。
查看实例:http://www.jankoatwarpspeed.com/examples/windows7menu/
点击下载源码
来看下原作者的设计草图:
简明创建过程
第一步 :创建如下菜单结构
<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> |
相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
- ■photoshop 合成一杯盛有世界地图的咖啡
- ■jQuery选择器的工作原理和优化分析
- ■Jquery工作常用实例 使用AJAX使网页进行异步更新
- ■in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
- ■NodeJS框架Express的模板视图机制分析
- ■jQuery .tmpl(), .template()学习资料小结
- ■jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
- ■Photoshop 盛有精灵的水晶球
- ■jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
- ■multiSteps 基于Jquery的多步骤滑动切换插件
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类