滑动门技术实现的导航菜单

站在css2.1的角度实现的demo，在不使用css3多背景的情况下，带有圆角的导航菜单，并且无论菜单文字的多少都能自适应

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">/* 滑动门的核心，小图压大图，大图在伸展 */ul.nav {padding: 0;margin: 0;list-style: none;overflow: hidden;}ul.nav li {background: url('img/tab-right.gif') no-repeat top right;float: left;}ul.nav a {background: url('img/tab-left.gif') no-repeat  top left;display: block;line-height: 1.5em;padding: 0 0.8em;text-decoration: none;color: white;}</style></head><body><ul class="nav"><li><a href="#">滑动菜单1</a></li><li><a href="#">滑动菜单2</a></li><li><a href="#">滑动菜单3</a></li><li><a href="#">滑动菜单圆角4</a></li><li><a href="#">滑动菜单5</a></li></ul></body></html>

转载于:https://blog.51cto.com/huyusheng/1925582

滑动门技术实现的导航菜单相关推荐

css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享发布时间:2009-10-15 12:48:01 作者:佚名我要评论可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...
css html应用实例1：滑动门技术的简单实现
关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...
CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
HTML+CSS(精灵图)实现微信滑动门技术
微信滑动门技术为了使各种[特殊形状的背景]能够[自适应元素中文本内容的多少],出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强 ...
CSS中的滑动门技术
原文作者: Douglas Bowman 原文出自: A List Apart 中文翻译: 54player.com nobita 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许 ...
用CSS实现“滑动门”技术
在前几天无意中翻看网页代码的过程中,无意中发现了微信官网的nav里有一个很有意思的小细节.在跟着代码学习了一番,在网上阅读了相关资料,原来这就是传说中的滑动门技术. 接下来就来分享一下我个人对滑动门的 ...
CSS3 总结（十五）——滑动门技术
滑动门技术使各种特殊形状的背景能够自适应元素中文本内容的多少,他从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,最常见于各种导航栏的滑动门. 主要技术 1.CSS ...
CSS学习笔记——滑动门技术
1.CSS滑动门技术产生的原因例如:导航栏中,同样的背景,字数不同,背景可以自己适应字数的增加,本质上就是各种形状背景的左右自由拉伸,以适应元素内部的文本内容. 2.CSS精灵技术精灵技术的本质: ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...

滑动门技术实现的导航菜单

滑动门技术实现的导航菜单相关推荐

最新文章

热门文章