编程 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实现走马灯效果

Dec 26 HTML / CSS

详解FireFox下Canvas使用图像合成绘制SVG的Bug

Jul 10 HTML / CSS

HTML5中微数据概述及在搜索引擎中的使用举例

Feb 07 HTML / CSS

HTML5 UTF-8 中文乱码的解决方法

Nov 18 HTML / CSS

HTML5中的autofocus（自动聚焦）属性介绍

Apr 23 HTML / CSS

HTML5调用手机摄像头拍照的实现思路及代码

Jun 15 HTML / CSS

HTML5 audio标签使用js进行播放控制实例

Apr 24 HTML / CSS

Canvas系列之滤镜效果

Feb 12 HTML / CSS

吃透移动端 Html5 响应式布局

Dec 16 HTML / CSS

使用layui实现左侧菜单栏及动态操作tab项的方法

Nov 10 HTML / CSS

简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl

Mar 31 HTML / CSS

css背景和边框标签实例详解

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 接口类与抽象类的实际作用

2009/11/26 PHP

php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码

2010/12/29 PHP

Codeigniter实现发送带附件的邮件

2015/03/19 PHP

简单谈谈PHP vs Node.js

2015/07/17 PHP

发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser

2007/11/30 Javascript

不懂JavaScript应该怎样学

2008/04/16 Javascript

用jQuery简化JavaScript开发分析

2009/02/19 Javascript

Jquery Ajax.ashx 高效分页实现代码

2009/10/20 Javascript

javascript 嵌套的函数（作用域链）

2010/03/15 Javascript

js实现的折叠导航示例

2013/11/29 Javascript

jqueryUI里拖拽排序示例分析

2015/02/26 Javascript

JavaScript DOM事件(笔记)

2015/04/08 Javascript

javascript删除元素节点removeChild()用法实例

2015/05/26 Javascript

简单的jQuery拖拽排序效果的实现(增强动态)

2017/02/09 Javascript

从零学习node.js之文件操作（三）

2017/02/21 Javascript

vue-router路由简单案例介绍

2017/02/21 Javascript

jsonp跨域请求实现示例

2017/03/13 Javascript

vue 表单输入格式化中文输入法异常问题

2018/05/30 Javascript

mpvue+vuex搭建小程序详细教程(完整步骤)

2018/09/30 Javascript

浅谈ng-zorro使用心得

2018/12/03 Javascript

js与jquery获取input输入框中的值实例讲解

2020/02/27 jQuery

npm ci命令的基本使用方法

2020/09/20 Javascript

Python模块学习 filecmp 文件比较

2012/08/27 Python

Windows下Eclipse+PyDev配置Python+PyQt4开发环境

2016/05/17 Python

Flask框架信号用法实例分析

2018/07/24 Python

pyqt5 实现在别的窗口弹出进度条

2019/06/18 Python

自适应线性神经网络Adaline的python实现详解

2019/09/30 Python

一篇文章教你用python画动态爱心表白

2020/11/22 Python

英国婚礼商城：Wedding Mall

2019/11/02 全球购物

德国在线香料制造商：Gewürzland

2020/03/10 全球购物

法国在线药房：1001Pharmacies

2021/03/07 全球购物

九州传奇上机题

2014/07/10 面试题

党员群众路线自我剖析材料

2014/10/06 职场文书

学校感恩节活动策划方案

2014/10/06 职场文书

python使用pymysql模块操作MySQL

2021/06/16 Python

Java的Object类的九种方法

2022/04/13 Java/Android

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

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