仓酷云

标题: DIV教程之CSS实例教程:复杂的的滑动导航栏效果 [打印本页]

作者: 谁可相欹 时间: 2015-1-15 23:16
标题: DIV教程之CSS实例教程:复杂的的滑动导航栏效果
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
破洛洛文章简介：CSS实例教程:复杂的的滑动导航栏效果.
因为网页字体的限定，和对导航栏美妙的需求，利用background-repeat来做一个复杂的笔墨导航栏已远远不敷了。在良多场所，导航栏的背景是一个图案，字体也不再是单调的宋体，这就必要我们把导航栏的全体效果做图在网页中利用。
明天我们就来做一个复杂的的滑动导航栏效果（不晓得应当叫它甚么^_^），效果以下图：

思绪：经由过程改动链接鼠标悬停形态(hover)的背景图片，来到达把鼠标放上往有高亮显现的效果。
办法：在本例中，我们是经由过程调剂各链接hover形态的背景图片地位来使其“看起来产生了改动”。（不分明？能够先懂得“csssprites”）
起首，构造导航栏的html代码。
<ul>
<liid="itemA"><ahref="#">首页</a></li>
<liid="itemB"class="select"><aclass="urlB"href="#">原创</a></li>
<liid="itemC"><aclass="urlC"href="#">关于54173BLOG</a></li>
<liid="itemD"><aclass="urlD"href="#">网站建立</a></li>
</ul>
//a元素中仍旧保存笔墨，如许能够包管用户在加载不到css文件的情形下仍能看到基础的内容。
//每一个链接的背景都分歧，必要独自界说，以是这里给每一个链接一个类。
//li元素的id本例中没有效到，但在实践利用中，能够共同js来完成对以后页面的高亮显现。
其次，把导航栏的一般形态和hover形态做全体最终效果并拼合在一张图片上。

做图注重：两种形态下导航栏上的笔墨相对背景图案的地位要不异，不然会呈现过渡效果不屈滑，而不异的地位也便于我们在css中举行把持。（如本例，倡议先做好一种效果，然后将其复制再修正色彩，如许笔墨绝对背景的地位就不会有错了。）
另：假如链接间要留间距等，下手前就盘算好，以便做图一步到位。

最初，经由过程CSS调剂款式，完成最后的效果。（检察演示页面）
.navbar{height:50px;padding-left:6px;overflow:hidden;background:url(01.jpg)no-repeat;}/*每一个a元素都只能显现本人局限的背景，假如摆布有空缺、各元素有间距，必要为navbar界说背景图片，不然空缺、间距处看不到我们的图片。*/
.navbarli{display:inline;}
.navbarlia{float:left;height:50px;text-indent:-9999px;background:url(01.jpg)no-repeat;}/*经由过程text-indent把a元素中的笔墨埋没起来；为一切链接界说一致的背景图片。*/
/*以下分离界说了4个链接的宽度和背景图片地位。（本例中两种形态下笔墨在程度偏向地位不异，在这里每一个链接两种形态的背景图片就只要垂直地位分歧了，如许把持起来就更便利。）*/
.navbarlia.urlA{width:78px;background-position:-6px0;}
.navbarlia.urlA:hover,.navbarli.selecta.urlA{background-position:-6px-50px;}
.navbarlia.urlB{width:75px;background-position:-84px0;}
.navbarlia.urlB:hover,.navbarli.selecta.urlB{background-position:-84px-50px;}
.navbarlia.urlC{width:211px;background-position:-159px0;}
.navbarlia.urlC:hover,.navbarli.selecta.urlC{background-position:-159px-50px;}
.navbarlia.urlD{width:126px;background-position:-370px0;}
.navbarlia.urlD:hover,.navbarli.selecta.urlD{background-position:-370px-50px;}
/*background-position两个参数的按次：先程度，后垂直。“先摆布，后高低”简单记错。*/
至此，滑动导航栏制造完成。如需参考代码请检察“演示页面”的源代码。
在本例中：
li元素和个中的a元素也能够经由过程别的办法把持地位；
li元素和a元素分离付与了id和class，大概能够更复杂；
各链接的hover形态背景图片地位都不不异，均需独自界说，也就是说你也能够把它们分隔而不用总连在一同；
而假如把两种形态的图片存成两个图片利用，代码量也是差未几，csssprites的优点也没法表现。
大概你有更好的办法，或发明本例中有毛病，还请不惜见教。
接待来54173BLOG交换更多CSS、HTML的相干常识。
54173BLOG原创文章，转载请保存本文链接：http://www.54173.cn/blog/?p=255
</p>
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

作者: 小妖女 时间: 2015-1-17 21:12
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 再见西城 时间: 2015-1-25 17:55
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 仓酷云 时间: 2015-2-9 03:01
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 小女巫 时间: 2015-2-26 20:05
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 飘飘悠悠 时间: 2015-3-8 17:41
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 灵魂腐蚀 时间: 2015-3-16 10:33
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 精灵巫婆 时间: 2015-3-22 22:50
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

欢迎光临仓酷云 (http://ckuyun.com/)