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

学做Bootstrap的第一个页面

May 15 HTML / CSS

button在IE6/7下的黑边去除方案

Dec 24 HTML / CSS

CSS改变网页中鼠标选中文字背景颜色例子

Apr 23 HTML / CSS

css3实现超炫风车特效

Nov 12 HTML / CSS

HTML+CSS3模拟心的跳动实例代码

Sep 05 HTML / CSS

HTML5 本地存储实现购物车功能

Sep 07 HTML / CSS

HTML5 语音搜索(淘宝店语音搜素)

Jan 03 HTML / CSS

html5 viewport使用方法示例详解

Dec 02 HTML / CSS

24个canvas基础知识小结

Dec 17 HTML / CSS

HTML5页面音视频在微信和app下自动播放的实现方法

Oct 20 HTML / CSS

简述Html5 IphoneX 适配方法

Feb 08 HTML / CSS

HTML5图片层叠的实现示例

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 5.3.0 安装分析心得

2009/08/07 PHP

解决PhpMyAdmin中导入2M以上大文件限制的方法分享

2014/06/06 PHP

php静态文件返回304技巧分享

2015/01/06 PHP

PHP如何实现Unicode和Utf-8编码相互转换

2015/07/29 PHP

js同时按下两个方向键

2007/12/01 Javascript

toString()一个会自动调用的方法

2010/02/08 Javascript

一个简单的实现下拉框多选的插件可移植性比较好

2014/05/05 Javascript

浅谈Javascript中深复制

2014/12/01 Javascript

DeviceOne 让你一见钟情的App快速开发平台

2016/02/17 Javascript

Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

2016/10/30 Javascript

网络传输协议（http协议）

2016/11/18 Javascript

使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

2017/03/01 Javascript

用vue的双向绑定简单实现一个todo-list的示例代码

2017/08/03 Javascript

使用jQuery实现页面定时弹出广告效果

2017/08/24 jQuery

JQuery+Bootstrap 自定义全屏Loading插件的示例demo

2019/07/03 jQuery

Koa从零搭建到Api实现项目的搭建方法

2019/07/30 Javascript

浅谈JS中几种轻松处理'this'指向方式

2019/09/16 Javascript

Weex开发之地图篇的具体使用

2019/10/16 Javascript

JS实现拖动模糊框特效

2020/08/25 Javascript

JavaScript中的Proxy对象

2020/11/27 Javascript

Python使用正则表达式抓取网页图片的方法示例

2017/04/21 Python

Python实现压缩文件夹与解压缩zip文件的方法

2018/09/01 Python

利用python在大量数据文件下删除某一行的例子

2019/08/21 Python

sklearn的predict_proba使用说明

2020/06/28 Python

简单的命令查看安装的python版本号

2020/08/28 Python

python3.7中安装paddleocr及paddlepaddle包的多种方法

2020/11/27 Python

HTML5实现动画效果的方式汇总

2016/02/29 HTML / CSS

GetYourGuide台湾：预订旅游活动、景点和旅游项目

2019/06/10 全球购物

JD Sports西班牙：英国领先的运动服装公司

2020/01/06 全球购物

环境工程与管理大学毕业生求职信

2013/10/02 职场文书

学校食堂食品安全责任书

2014/07/28 职场文书

领导干部群众路线教育实践活动剖析材料

2014/10/10 职场文书

Django项目配置Memcached和Redis, 缓存选择哪个更有优势

2021/04/06 Python

python实现对doc、txt、xls等文档的读写操作

2022/04/02 Python

Python+Matplotlib图像上指定坐标的位置添加文本标签与注释

2022/04/11 Python

Android开发手册TextInputLayout样式使用示例

2022/06/10 Java/Android

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

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