编程 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的定位页面元素

Aug 29 HTML / CSS

CSS3提交意见输入框样式代码

Oct 30 HTML / CSS

纯CSS3打造属于自己的“小黄人”

Mar 14 HTML / CSS

CSS3 毛玻璃效果

Aug 14 HTML / CSS

CSS3 实现发光边框特效

Nov 11 HTML / CSS

Html5上传图片移动端、PC端通用代码

Jun 08 HTML / CSS

HTML5中使用postMessage实现Ajax跨域请求的方法

Apr 19 HTML / CSS

html5组织文档结构_动力节点Java学院整理

Jul 11 HTML / CSS

html5新增的属性和废除的属性简要概述

Feb 20 HTML / CSS

使用HTML5进行SVG矢量图形绘制的入门教程

Feb 19 HTML / CSS

html5录音功能实战示例

Mar 25 HTML / CSS

奇妙的 CSS shapes(CSS图形)

Apr 05 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

对javascript和select部件的结合运用

2006/10/09 PHP

ThinkPHP3.1新特性之字段合法性检测详解

2014/06/19 PHP

php中bind_param()函数用法分析

2017/03/28 PHP

PHP读取Excel类文件

2017/05/15 PHP

thinkPHP3.2使用RBAC实现权限管理的实现

2019/08/27 PHP

thinkphp5 框架结合plupload实现图片批量上传功能示例

2020/04/04 PHP

PHP7 windows支持

2021/03/09 PHP

js 操作select相关方法函数

2009/12/06 Javascript

JavaScript 学习笔记（十五）

2010/01/28 Javascript

IE8 中使用加速器(Activities)

2010/05/14 Javascript

js+cookies实现悬浮购物车的方法

2015/05/25 Javascript

javascript 判断两个日期之差的示例代码

2015/09/05 Javascript

jQuery中ztree 点击文本框弹出下拉框的实例代码

2017/02/05 Javascript

JavaScript数据结构之广义表的定义与表示方法详解

2017/04/12 Javascript

vue.js中实现登录控制的方法示例

2018/04/23 Javascript

js实现简单的随机点名器

2020/09/17 Javascript

使用Typescript开发微信小程序的步骤详解

2021/01/12 Javascript

Python内置函数之filter map reduce介绍

2014/11/30 Python

Python中__name__的使用实例

2015/04/14 Python

python中字符串前面加r的作用

2015/06/04 Python

Python中collections模块的基本使用教程

2018/12/07 Python

对python while循环和双重循环的实例详解

2019/08/23 Python

.dcm格式文件软件读取及python处理详解

2020/01/16 Python

美国第一香水网站：Perfume.com

2017/01/23 全球购物

使用索引(Index)有哪些需要考虑的因素

2016/10/19 面试题

学校安全教育制度

2014/01/31 职场文书

技术负责人岗位职责

2015/02/10 职场文书

行政复议决定书

2015/06/24 职场文书

摘录式读书笔记

2015/07/01 职场文书

2016国庆节67周年寄语

2015/12/07 职场文书

九年级数学教学反思

2016/02/17 职场文书

公司开业的祝贺语大全（60条）

2019/07/05 职场文书

html+css实现滚动到元素位置显示加载动画效果

2021/08/02 HTML / CSS

SpringBoot整合阿里云视频点播的过程详解

2021/12/06 Java/Android

《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表

2022/03/20 日漫

MySQL新手入门进阶语句汇总

2022/09/23 MySQL

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

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