导航栏在网页设计中很常见，主要用于引导网站访问者浏览，也可以清晰地告诉搜索引擎网站内部目录所在。
面包屑导航栏就是类似于这样的导航栏：
主页 > 博客 > 移动专栏 > 发表博文
大致有一下几点好处：
1.面包屑作为用户寻找路径的一种辅助手段，能方便他们定位和导航。
2.面包屑可以减少的用户返回上一级页面的所需的操作次数。
3.临时性，动态性，占用屏幕空间小，干扰性小。
4.降低网站访问者的总体跳出率。
下面就来看下如何制作面包屑导航栏。
（至于它为什么叫做面包屑导航栏，我想可能是源于那个童话故事，用面包屑做线索留下踪迹之类的）
你可以点击这里下载元件库，有一个雅虎元件库中包含了很多常用元件，比如日历啊，导航栏之类。
我们先用它的元件来制作一个面包屑导航。
首先，因为导航栏每个页面基本都会用到，所以添加一个母板：
接下来就是载入雅虎的导航栏元件库，在元件面板点击左上角，选择载入元件库：
载入完成就可以看到很多新增的元件了：
接下来我们把Breadcrumbs拖动到面板上：
但是这样的导航没有任何效果，我们先做一个二级页面的导航。
将右边的面包屑删减至两个，选中左侧的，双击OnClick添加用例：
接下来就是给导航栏添加链接：
然后选中第二个文本标签，选择OnPageLoad：
选择设置变量/元件值：
在依次部署好相关的选项。点击编辑：
将其内容改为PageName，也就是当前页面的名称：
这是基本就设置完毕了，我们把第一个标签的内容改成主页，以便更为和谐，然后选择添加页面：
点击全选按钮应用到所有页面：
这是就会发现所有的页面都有导航栏了：
运行的时候，TopicName的字样会自动变成当前页面的名称。
当然这只是二级页面的导航，比较复杂的多级页面就不能这样操作了，在此提供一个思路：
1.使用母板做好首页的导航，只有一个标签。
2.在每个二级页面中创建单独的标签，并将文字内容设置为OnPageLoad的时候就变成当前页面的名称。
3.在每个三级页面像是首页一样做一个便签实现到二级页面的跳转，紧跟在首页标签的后面，同时三级标签中创建单独的标签，并将文字内容设置为OnPageLoad的时候就变成当前页面的名称。
4.后面级别的页面以此类推。
《CSS3 入门教程系列》前一篇文章详细介绍了 border-radius 的用法，今天这篇文章我们在一起来看看 CSS3 中实现圆角效果 text-shadow 属性的具体用法。在以前，阴影效果一般都是做成图片，现在有了 CSS3 可以直接使用 text-shadow 属性来实现阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不需要图片的情况下就能给文字增加质感。
- Web 开发人员和设计师必读文章推荐
- 20个非常绚丽的 CSS3 特性应用演示
- 35个让人惊讶的 CSS3 动画效果演示
- 推荐12个漂亮的 CSS3 按钮实现方案
- 24款非常实用的 CSS3 工具终极收藏
text-shadow 曾经在 CSS2 中就出现过，但在 CSS 2.1版本中又被抛弃了，现在 CSS3 版本又重新捡回来了。这说明 text-shadow 这个属性非常值得我们做前端的人员重视，而且 CSS3 这么多属性中，我个人觉得 text-shadow 运用得是最多的一个属性，作为我们前端人员我觉得有必要学习并掌握这个 text-shadow 属性。
基本语法：
也就是：
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...
取值范围:
<length>：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值
<color>：指定阴影颜色，也可以是rgba透明色
<shadow>：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离。
如下图所示：
简单说明：
可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色。
浏览器的兼容性：
我们来看个实例。首先给所有的DEMO一个公用的样式和类名：
background: #666666;
width: 440px;
padding: 30px;
font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
color: #fff;
text-transform: uppercase;
}
接下来我们在每个Demo上加上自己特定的样式，分别如下所示：
text-shadow: red 0 1px 0;
}
效果是不错，可是让我们头痛的是IE是不支持text-shadow效果，但为了在兼容这一问题，我们只好使用滤镜filter:shadow来处理（本人不提倡使用滤镜）。filter:shadow滤镜作用与dropshadow类似，也能使用对象产生阴影效果，不同的是shadow可产生渐近效果，使用阴影更平滑实现。
滤镜语法：
其中E是元素选择器，Color用于设定对象的阴影色；Direction用于设定投影的主向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；Strength就是强度，类似于text-shadow中的blur值。
我们先不管IE下的效果了，我个人认为text-shadow运用好了，也能像photoshop一样制作出非常好的效果，下面我这里罗列出一些比较好看的实例以供大家参考
注：下面所有的Demo需要加上这个公用的样式：
background: #666666;
width: 440px;
padding: 30px;
font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
color: #fff;
text-transform: uppercase;
}
效果一：Glow and Extra Glow effect(也就是NEON effect)
text-shadow: 0 0 20px red;
}
辉光效果，我们设置比较大的模糊半径来增加其辉光效果，你可以改变不同的模糊半径值来达到不同的效果，当然你也可以同时增加几个不同的半径值，创造多种不同的阴影效果。就如下面的NEON效果。
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}
效果二：Apple Style Effect
color: #000;
text-shadow: 0 1px 1px #fff;
}
效果三：Photoshop Emboss Effect
color: #ccc;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}
效果二和效果三，我想用photoshop的朋友一定很熟悉，是不是很类似我们 photoshop中的投影和浮雕效果的呀。应用这两个效果大家一定要注意，其模糊值一定要设置为0，使文本不具有任何模糊效果，主要用来增加其质感，你也可以像photoshop中制作一样，改变不同的投光角度，从而制作出不同的效果，这里我就不举例子了，感兴趣的朋友可以自己尝试一下。
效果四：Blurytext Effect
color: transparent;
text-shadow: 0 0 5px #f96;
}
用text-shadow制作模糊的效果主要要注意一点就是，把文本的前景色设置为透明transparent,如果模糊值越大，其效果越糊糊；其二，我们不设置任何方向的偏移值。如果结合前面的photoshop emboss效果，可以让你等到不同的效果。提醒一下opera浏览器不支持这个效果。
我们结合前面的Photoshop Emboss效果，我们可以制作出一个带有模糊的浮雕效果：
color: transparent;
text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;
}
效果五：Inset text effect
《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3 RGBA 特性的用法，今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法。
以前制作圆角效果，我们都需要使用多张圆角图片做为背景分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，非常繁琐。
- Web 开发人员和设计师必读文章推荐
- 20个非常绚丽的 CSS3 特性应用演示
- 35个让人惊讶的 CSS3 动画效果演示
- 推荐12个漂亮的 CSS3 按钮实现方案
- 24款非常实用的 CSS3 工具终极收藏
现在有了 CSS3 的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。
既然 border-radius 有这么多好处，我们就从他的语法，属性和属性值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧：
基本语法：
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
取值范围：
<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。
简单说明：
border-radius 是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：
1、只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。
2、有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值
3、有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
4、有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。
前面，我们主要看了 border-radius 的缩写格式，其实 border-radius 和 border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius:<length> <length> //右下角
border-bottom-left-radius:<length> <length> //左下角
这里说一下，各角拆分出来取值方式：<length> <length> 中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。
border-radius 只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式，对于老版的浏览器，border-radius 需要根据不同的浏览器内核添加不同的前缀，比说 Mozilla 内核需要加上“-moz”，而 Webkit 内核需要加上“-webkit”等，那么我为了能兼容各大内核的老版浏览器，我们看看 border-radius 在不同内核浏览器下的书写格式：
1、Mozilla(Firefox, Flock等浏览器)
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角
2、WebKit (Safari, Chrome等浏览器)
-webkit-border-top-right-radius: //右上角
-webkit-border-bottom-right-radius: //右下角
-webkit-border-bottom-left-radius: // 左下角
3、Opera浏览器：
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
4、Trident (IE)
IE9 以下版本不支持 border-radius，而且 IE9 没有私有格式，都是用 border-radius，其写法和 Opera 是一样的，这里就不在重复。
为了不管是新版还是老版的各种内核浏览器都能支持 border-radius 属性，那么我们在具体应用中时需要把我们的 border-radius 格式改成：
-webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
其拆分开来的格式相应需要加上 -moz 和 -webkit，上面的代码其实就等价于下面的代码：
-moz-border-radius-topright: <length> <length> //右上角
-moz-border-radius-bottomright: <length> <length> //右下角
-moz-border-radius-bottomleft: <length> <length> //左下角
-webkit-border-top-left-radius: <length> <length> //左上角
-webkit-border-top-right-radius: <length> <length> //右上角
-webkit-border-bottom-right-radius: <length> <length> //右下角
-webkit-border-bottom-left-radius: <length> <length> // 左下角
border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius: <length> <length> //右下角
border-bottom-left-radius: <length> <length> //左下角
另外需要特别注意的是，border-radius 一定要放置在 -moz-border-radius 和 -webkit-border-radius 后面，（特别声明：本文中所讲实例都只写了标准语法格式，如果你的版本不是上面所提到的几个版本，如要正常显示效果，请更新浏览器版本，或者在 border-radius 前面加上相应的内核前缀，在实际应用中最好加上各种版本内核浏览器前缀。）
我们初步来看一个实例，HTML代码：
为了更好的看出效果，我们给这个demo添加一点样式：
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
}
注：如无特殊声明，本文实例所有基本代码格式如上所示，只在该元素上添加border-radius属性设置。
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}
这种写法我们前面有提到过，“/”前是指圆角的水平半径，而“/&rdq