本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3创建一个现代装饰条风格的导航条

随着CSS 3的不断发展,已经可以用来可以实现很多之前必须要使用图片才能实现的视觉效果。本文介绍如何使用CSS 3来创建一个具有现代装饰条风格的导航条。


制作导航链接

在本例中,我们将创建一个导航链接条,所以我们将使用一个ul无序列表,并且在每个列表项li元素中放置一个链接元素(a元素):

<!--导航链接-->
<ul id="navigation">
    <li><a href="#">&#10029; 首页</a></li>
    <li><a href="#">&#10029; 关于我们</a></li>
    <li><a href="#">&#10029; 成功案例</a></li>
    <li><a href="#">&#10029; 联系我们</a></li>
</ul>

首先,我们需要横向放置ul无序列表中的每个li列表项元素,移除浏览器默认的列表项符号,同时在每个li列表项元素之间放置一些空隙:

#navigation li {
    list-style: none;
    display: block;
    float: left;
    margin: 1em 0.8em;
}

接下来,我们为链接元素添加一些文字阴影,移除链接元素的链接下划线,同时设置链接文字的颜色与字体大小。

#navigation li a {
    text-shadow: 0 2px 1px rgba(0,0,0,0.5);
    display: block;
    text-decoration: none;
    color: #f0f0f0;
    font-size: 1.6em;
    margin: 0 .5em;
}

接下来,我们略微定制一下当鼠标指针停留在链接元素上时的视觉特效。

#navigation li a:hover {
    margin-top: 2px;
}

为了在链接元素中显示一个小星星,我们使用了HTML的符号文字&#10029; (✭)。

现在,导航条的链接区域已经制作完毕。接下来,我们需要将这个链接区域放在一个美丽的装饰条中。

制作装饰条

为了制作装饰条,我们需要添加4个元素。

首先,我们在导航链接外部创建一个容器元素,这使得我们可以设置导航条的总宽度。

<div id="navigation_container">
    <!--导航链接-->
    <ul id="navigation">
        <li><a href="#">&#10029; 首页</a></li>
        <li><a href="#">&#10029; 关于我们</a></li>
        <li><a href="#">&#10029; 成功案例</a></li>
        <li><a href="#">&#10029; 联系我们</a></li>
    </ul> 
</div>

接下来,我们在样式代码中设置导航条的宽度,并且将其放置在页面中央(水平方向上)。

#navigation_container {
     margin: 0 auto;
     width: 960px;
}

接下来,我们再在导航链接区外部创建一个容器元素,这将是我们的装饰条的主区域。

<div id="navigation_container">
     <!--中间的装饰条 -->
    <div class="rectangle">
        <!--导航链接-->
        <ul id="navigation">
            <li><a href="#">&#10029; 首页</a></li>
            <li><a href="#">&#10029; 关于我们</a></li>
            <li><a href="#">&#10029; 成功案例</a></li>
            <li><a href="#">&#10029; 联系我们</a></li>
        </ul> 
    </div>
</div>

接下来,我们将通过以下样式代码创建装饰条的背景。我们将其z-index样式属性值设置为500,因为接下来我们需要为装饰条两边的装饰三角块而继续添加一些元素,而在这些元素中间,装饰条部分应该始终位于屏幕的最前方。我们也将分别通过-moz-box-shadow样式属性与box-shadow在Firefox浏览器、WebKit引擎系列浏览器(包括Chrome浏览器与Safari浏览器)以及IE 9以上浏览器中为装饰条创建一个盒阴影。

.rectangle {
   background: #e5592e;
   height: 62px;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   z-index: 500; 
   margin: 3em 0;
}

接下来,我们在装饰条两边制作两个装饰三角块。

<div id="navigation_container">
    <!-- 左边的装饰三角块 -->
    <div class="l-triangle-top"></div>
    <div class="l-triangle-bottom"></div>
    <!--中间的装饰条 -->
    <div class="rectangle">
        <!--导航链接-->
        <ul id="navigation">
            <li><a href="#">&#10029; 首页</a></li>
            <li><a href="#">&#10029; 关于我们</a></li>
            <li><a href="#">&#10029; 成功案例</a></li>
            <li><a href="#">&#10029; 联系我们</a></li>
        </ul> 
    </div>
   <!-- 右边的装饰三角块 -->
   <div class="r-triangle-top"></div>
   <div class="r-triangle-bottom"></div>
</div>

最后,我们通过样式代码来定制装饰条两边的装饰三角块。此处的制作关键在于使用CSS 3中神奇的border-width样式属性。我们首先将装饰块中每个div元素的边框颜色设置成透明色,除了位于上部元素的顶边框,以及位于下部元素的底边框。同时,将边框宽度设置为50px。这将在装饰块中产生两个交错的三角形。然后,我们将把这两个三角形放置在中间装饰条的后部(z轴方向上)。

.l-triangle-top {
    border-color: #d9542b transparent transparent;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: left;
    top: 1px;
    left: -50px;
}
.l-triangle-bottom {
    border-color: transparent transparent #d9542b;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: left;
    top: -40px;
    left: -150px;
}
.r-triangle-top {
    border-color: #d9542b transparent transparent;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: right;
    right: -45px;
    top: -107px;
}
.r-triangle-bottom {
    border-color: transparent transparent #d9542b;
    border-style:solid;
    border-width:50px;
    height:0px;
    width:0px;
    position: relative;
    float: right;
    top: -149px;
    right: -145px;
}

现在,这个具有现代装饰条风格的导航条就已经制作完毕了。为了示例页面更加漂亮一些,我们为其使用了图片背景,代码如下所示。

html{
    background: #77d5fb;
}
body{
    background: transparent url('images/top_bg.png') top center no-repeat;
    width: 100%; 
    height: 100%;
    margin: 0 0;
}