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 网页下拉菜单代码解释 中文翻译

英文原稿:CSS3 Dropdown Menu | WebDesignerWall

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