css实现立体凹凸导航条导航栏效果代码-html代码-BFW代码库

css实现立体凹凸导航条导航栏效果代码

代码语言：html

代码描述：css实现立体凹凸导航条导航栏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .cf:before,.cf:after {
        content:"";
        display:table;
}
.cf:after {
        clear:both;
}
body {
        background:#a9b6c8;
        color:#fff;
        font:14px/18px Arial,sans-serif;
        text-align:center;
}
p {
        bottom:10px;
        left:10px;
        position:absolute;
}
a {
        color:#fff;
}
/*--------------------------------------------------------------1.0 - TOOLBAR--------------------------------------------------------------*/.toolbar {
        left:50%;
        margin:-60px 0 0 -140px;
        position:absolute;
        top:50%;
        width:280px;
        border-radius:4px;
        box-shadow:0 0 3px rgba(64,100,138,.3),0 2px 4px #3b5c7f,0 12px 18px rgba(64,100,138,.4);
}
.toolbar li {
        float:left;
        list-style:none;
        width:25%;
}
.toolbar a {
        background:#f4f7f9;
        background:-moz-linear-gradient(top,#f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f4f7f9),color-stop(4%,#f7fafd),color-stop(30%,#ecf2f7),color-stop(68%,#e4ebf3),color-stop(89%,#dce4ee),color-stop(92%,#d5e0eb),color-stop(96%,#c7d3e0),color-stop(100%,#c6d2df));
        background:-webkit-linear-gradient(top,#f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
        background:-o-linear-gradient(top,#f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
        background:-ms-linear-gradient(top,#f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,.........完整代码请登录后点击上方下载按钮下载查看