编程 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 相关文章推荐

浅析两列自适应布局的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

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

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