CSS3 网页下拉菜单代码解释 中文翻译


Posted in HTML / CSS onFebruary 27, 2010

当我在为 WordPress 编写 Notepad 主题 时,顺道学习了一些新的 CSS3 特性,现在此分享。查看演示可以看到一款类似 Mac 风格的多级下拉菜单,使用 border-radius,box-shadow 和 text-shadow 创建。在 Firefox,Safari 和 Chrome 浏览器中能够完美地渲染。即便是诸如 IE7+ 等不兼容 CSS3 的浏览器,也可以正常呈现页面,只不过忽略了对圆角和阴影的渲染。

查看演示:http://www.webdesignerwall.com/demo/css3-dropdown-menu

预览

下图展示了不兼容 CSS3 情况下的菜单样式。
CSS3 网页下拉菜单代码解释 中文翻译
使用了一个渐变图像

白色透明的图像用于实现渐变效果。因为新的 CSS3 渐变特性还没有得到所有浏览器的支持,使用简便背景图片更为安全。

CSS3 网页下拉菜单代码解释 中文翻译
渐变的强度可以通过切换背景图像的上移或下移来改变。此外,渐变颜色可以很容易地通过改变背景颜色来调整。

CSS3 网页下拉菜单代码解释 中文翻译

CSS 代码

我不打算解释逐行解释 CSS 代码。下面的图片很好地解释了编写下拉菜单的关键点。

CSS3 网页下拉菜单代码解释 中文翻译

CSS3 网页下拉菜单代码解释 中文翻译

英文原稿:CSS3 Dropdown Menu | WebDesignerWall

HTML / CSS 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 #HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 #HTML / CSS
玩转CSS3色彩
Jan 16 #HTML / CSS
需要知道的CSS3动画技术
Jan 01 #HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 #HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 #HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 #HTML / CSS
You might like
php中mkdir()函数的权限问题分析
2016/09/24 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
php实现图片压缩处理
2020/09/09 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
自考毕业生自我鉴定
2013/11/04 职场文书
承诺书格式
2014/06/03 职场文书
大学生简短的自我评价
2014/09/12 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
招商引资工作汇报
2014/10/28 职场文书
党员个人总结范文
2015/02/14 职场文书
Python进程间的通信之语法学习
2022/04/11 Python