滑动门切图

HTML:

<ul class="nav">

<li><a href="" class="cur"><span>首页</span></a></li>

<li><a href=""><span>杂谈</span></a></li>

<li><a href=""><span>科技</span></a></li>

</ul>

.nav a{ float:left; height:24px; line-height: 24px;display: block; overflow: hidden; padding-right:10px;}

.nav a span{ float:left; height:24px; line-height: 24px;padding-left:10px;}

.nav a:hover{ background-position:100% 0; text-decoration: none;}

时间: 2024-11-25 20:32:09

滑动门切图的相关文章

8.3 应用滑动门技术的玻璃效果菜单

本例中要实现一个玻璃材质效果的水平菜单.为了表现出立体的视觉效果,以及玻璃的质感.必须借助图像才可以实现,完成后的效果如图1所示. 该实例文件位于网页学习网CSS教程资源的“第8章\03\glass-navi.htm”. 图1 玻璃效果的菜单 本例中用到了两个图像,分别作为整个菜单的背景色平铺使用的,和当鼠标指针经过某个菜单项的时候显示出来的. 从效果图中可以看出,玻璃材质图是一个固定的图像文件,而菜单中的各个菜单项宽窄不一,却都可以完整地显示出来,这是如何实现的呢?这里使用的就是“滑动门”技术

制作滑动门菜单

在之前的工作中有一次遇到了一种菜单,要随菜单名称的长短而伸展和缩短,后来查了相关资料才知道这种菜单的被称为“滑动门菜单”…… 样子就像下面的图片这样: 做法: 把菜单分成三部分:左边.中间.右边.菜单的左边和右边各用一张背景图片(不平铺),中间用一张背景图片,这张背景图是要平铺的,因为中间部分会随着菜单字数的增多而伸展开来,切图如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

实现滑动门的三种方法

目录 [1]定义[2]案例效果 [3]切图[4]实现 三层嵌套 两层嵌套 绝对定位 [5]效果 定义 在border-radius出现之前,实现圆角效果使用的是滑动门.滑动门是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果. 案例效果 切图 实现方法 滑动门的实现共三种方法:三层嵌套.两层嵌套和绝对定位. 三层嵌套 三层嵌套,文字只能写到最里面的div里,适用于图片比较大或者拓展要求高,比如导航. [注意1]要想让滑动门适用于多种场合,左右两个角必须透明,以此露出背景

css滑动门制作圆角按钮

之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式. 效果展示:http://runjs.cn/detail/evk8nkc8 先上传要用的两张图片吧.              btnBg.png                                                      bg.png <!doctype html>

iOS app 切图

iOS 切图尺寸规则 目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的“降采样”(Downsampling)(1080-1920),还有iPhone6和6+上的放大模式(1125-2001)和默认模式(1242-2208),是不是感觉好恐怖?但是不用怕,我分享一套超简单的适配方法,看完你都不信有这么简单~ 美工交付给开发的资料有: 1.  标注图(以640为宽度尺寸为基准标注) 2.  2x切图(以640为宽度尺寸为基准切图) 3.  3x切图(以1280为宽度尺寸为基准切图) 开

[CSS]三层嵌套的滑动门

原理: 最外层放水平平铺的背景,第二层放左边,第三层放右边,注意这个做法背景图不能透明 结构: <div class="module-title"> <span class="left"> <span class="right"></span> </span> </div> 样式: .module-title {    height:33px;    background:

11.4 “5图形”二维滑动门经典圆角框

11.3节介绍的不固定宽度的圆角框制作方法只适用于单色的圆角框,对于带有复杂边框的圆角框就不适用了. 另外,还需要考虑一个问题,用11.3节介绍的方法制作的圆角框,尽管可以适应不同宽度,但是它里面的正文段落也承担了设置圆角框布局的任务.也就是说,圆角框中的正文并不是独立的,正文内容不能自由地设置样式.这对于通用型的网页来说,局限性很大:例如,如果较为复杂的页面,每个圆角框用于放置不同的栏目,希望达到的目标应该是可以在每个圆角框中放置任何内容,并且可以对这些内容设置样式,还能保证圆角框本身显示正确

CSS如何实现滑动门效果

CSS如何实现滑动门效果:所谓的滑动门和tab选项卡其实是一个意思,下面就通过实例介绍一下如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <meta name="key

公司后台切图

一.三级菜单的切图 HTML: <div class="subNavBox">            <div class="subNav">                 <div class="mident"></div>                 <div class="mword">我的工作</div>                 &l