下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页设计CSS样式 → CSS中的滑动门技术
CSS中的滑动门技术
日期:2007-6-20 9:34:49 人气:123     [ ]
上一页 [1] [2] [3] [4] [5] 下一页

[图像显示了两幅图像底部的额外高度。右边图像的左侧同样具有额外的宽度。可见的部分是标签成型。]

如果标签被撑大,图像即滑开,doorway变宽,图像的也将被显露的更多:

[图像显示出两幅图像被拉开,形成更宽标签的情况,在高度上则是使用额外的那部分高度。]

此例中,我在photoshop中制作两个平滑,细的3D标签图像,如文章开头所显示的那样。对于其一,内部明亮,边框暗淡些,用来表现当前选中的标签。将这种技巧模型应用于左右两幅图像中,我们需要扩大标签图像覆盖的区域,将它裁剪成两部分:

[左侧和右侧的图像]

同样的方式将应用到被称为“当前”的标签中。一旦我们完成了这四幅图像(1, 2, 3, 4),我们就可以开始用标记和CSS来制作我们的标签了。

标签的创造

当你在研究用CSS来创造水平列表时,会发现至少有两种方法将列表项安排在同一行里。两种方法各有千秋,但都需要CSS来解决布局所带来的混乱。一种方法使用inline box,另一种则用floats。

方法一,可能是比较普遍的一种,是将列表项都inline显示。inline方法的魅力在于它的简易性。但是,对于我们即将谈到的滑动门技术来说,inline方法在特定的浏览器上存在一些解释上问题。方法二,是我们将要关注的,即用floats将列表项安排在同一行里。令人沮丧的是,floats表面上矛盾的行为正巧回避了自然的逻辑。尽管如此,对于解决多重浮动元素的基本认识,以及可靠浮动的意义,仍是值得讨论的。

我们将用另一种浮动元素来解决浮动元素的排列问题。这样,父类元素将子类元素完全包括起来。于是,我们就可以为标签加上背景色彩和背景图像。非常重要的一点必须记住,紧跟在标签后的文本元素用CSS中的clear功能来清除浮动对象。这样避免了浮动标签影响页面上其它元素的位置。

我们从以下的标记开始:

<div id="header">    <ul>      <li><a href="#">Home</a></li>      <li id="current"><a href="#">News</a></li>      <li><a href="#">Products</a></li>      <li><a href="#">About</a></li>      <li><a href="#">Contact</a></li>    </ul></div>

现实中,#header div可能同样包含logo和搜索框。对于我们的例子,我们要缩短每一个锚链中超链接的值。显然,这些值应该正确的包含文件或者目录的位置。

我们从定位#header容器开始设计列表。这样确保了这个容器确确实实的充当了容器的作用,以包容它内部浮动的列表项。既然元素是浮动的,我们同样需要声明它的宽度为100%。加入临时的黄色背景以确保父类容器完全填满标签后面的整个区域。同样,设定默认的文本属性,确保样式的统一:

#header {    float:left;    width:100%;    background:yellow;    font-size:93%;    line-height:normal;    }

现在,我们同样需要为无序列表设定默认的margin/padding值为0,并去掉列表项前面的标记。每个列表项左浮动:

#header ul {    margin:0;    padding:0;    list-style:none;    }#header li {    float:left;    margin:0;    padding:0;    }

设定锚链强制作为块对象呈递,我们便可无忧的控制所有的样式:

#header a {    display:block;    }

下一步,我们将右侧的背景图像加入到列表项中去(改变如粗体所示):

#header li {    float:left;    background:url("norm_right.gif")      no-repeat right top;    margin:0;    padding:0;    }

在加入左侧图像之前,我们可以在效果1种看看目前为止的效果。(在效果中,忽略body中的规则。仅设定基本margin,padding,colors,text的属性。)

---

现在我们可以将左侧图像放置在锚链的左边(容器内的元素)。我们同时加入padding,扩大标签并将文本从标签的边缘推开:

#header a {    display:block;    background:url("norm_left.gif")      no-repeat left top;    padding:5px 15px;    } 
出处:本站原创 作者:佚名
 相关文章
·CSS中的滑动门技术__教程
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.