编程 HTML / CSS

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 Dropdown Menu | WebDesignerWall

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

需要知道的CSS3动画技术

Jan 01 HTML / CSS

CSS3的RGBA中关于整数和百分比值的转换

Aug 04 HTML / CSS

Css3圆角边框制作代码

Nov 18 HTML / CSS

html5/css3响应式页面开发总结

Oct 16 HTML / CSS

Html5移动端获奖无缝滚动动画实现示例

Jun 25 HTML / CSS

HTML5引入的新数组TypedArray介绍

Dec 24 HTML / CSS

HTML5资源预加载(Link prefetch)详细介绍（给你的网页加速）

May 07 HTML / CSS

HTML5 Canvas之测试浏览器是否支持Canvas的方法

Jan 01 HTML / CSS

HTML5 Canvas入门学习教程

Mar 17 HTML / CSS

HTML5标签嵌套规则详解【必看】

Apr 26 HTML / CSS

HTML5中原生的右键菜单创建方法

Jun 28 HTML / CSS

html5简介_动力节点Java学院整理

Jul 07 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使用fsockopen函数发送post,get请求获取网页内容的方法

2014/11/15 PHP

Laravel框架实现简单的学生信息管理平台案例

2019/05/07 PHP

php扩展开发入门demo示例

2019/09/23 PHP

深入解析PHP底层机制及相关原理

2020/12/11 PHP

javascript下4个跨浏览器必备的函数

2010/03/07 Javascript

为jQuery增加join方法的实现代码

2010/11/28 Javascript

Prototype源码浅析 Number部分

2012/01/16 Javascript

javascript代码运行不出来执行错误的可能情况整理

2013/10/18 Javascript

JavaScript返回网页中超链接数量的方法

2015/04/03 Javascript

jQuery EasyUI 布局之动态添加tabs标签页

2015/11/18 Javascript

一个用jquery写的判断div滚动条到底部的方法【推荐】

2016/04/29 Javascript

vue mint-ui学习笔记之picker的使用

2017/10/11 Javascript

webpack多入口文件页面打包配置详解

2018/01/09 Javascript

微信小程序实现留言板（Storage）

2018/11/02 Javascript

在vue中使用setInterval的方法示例

2019/04/16 Javascript

原生JS生成指定位数的验证码

2020/10/28 Javascript

[03:03]DOTA2校园争霸赛济南城市决赛欢乐发奖活动

2013/10/21 DOTA

[01:33:25]DOTA2-DPC中国联赛正赛 Elephant vs IG BO3 第一场 1月24日

2021/03/11 DOTA

详解在Python程序中解析并修改XML内容的方法

2015/11/16 Python

Python绘制KS曲线的实现方法

2018/08/13 Python

Django 中间键和上下文处理器的使用

2019/03/17 Python

python函数修饰符@的使用方法解析

2019/09/02 Python

Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]

2020/02/13 Python

python怎么对数字进行过滤

2020/07/05 Python

用HTML5制作视频拼图的教程

2015/05/13 HTML / CSS

C/C++程序员常见面试题一

2012/12/08 面试题

党员年终民主评议的自我评价

2013/11/05 职场文书

人事部主管岗位职责

2013/12/26 职场文书

家具促销活动方案

2014/02/16 职场文书

教师廉洁自律承诺书

2014/05/26 职场文书

计算机毕业大学生求职信

2014/06/26 职场文书

税务干部群众路线教育实践活动自我剖析材料

2014/09/21 职场文书

介绍信样本

2015/01/31 职场文书

个人年底工作总结

2015/03/10 职场文书

DE1107机评

2022/04/05 无线电

MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法

2022/06/14 MySQL

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

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