网页导航栏样式与布局-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
</head>
<style type="text/css">
    body{
        background:#ebebeb;
    }
    *{
        margin:0;
        padding: 0;
    }
    .nav{

        margin:0 auto;
        margin-top: 30px;
        width: 560px;
        height: 50px;
        background-color: #f65f57;
        border-radius: 5px;
        box-shadow: 2px 4px;
        /*font:bold 0/50px Arial;*/
    }
    .nav li:after{
        content: "";
        position: absolute;
        width: 1px;
        height: 18px;
        background: linear-gradient(to bottom,#f82f87,#B0363F,#f82f87);
        top: 15px;
        right: 0px;
    }
    .nav li:last-child:after{
        width: 0px;
        height: 0px;
    }
    .nav li{
        position: relative;
        list-style: none;
        display: inline-block;
        padding:0 14px ;
    }
    .nav li a:hover{
        -webkit-transform:rotate(10deg);
          -moz-transform:rotate(10deg);
          -o-transform:rotate(10deg);
          -ms-transform:rotate(10deg);
          transform:rotate(10deg);
    }
    .nav li a{
        display: inline-block;
        -webkit-transition: all 0.2s ease-in;
           -moz-transition: all 0.2s ease-in;
             -o-transition: all 0.2s ease-in;
            -ms-transition: all 0.2s ease-in;
                transition: all 0.2s ease-in;/*transition定义过渡      实现所有动画延迟0.2s*/
                /*ease 规定慢速开始，然后变快，然后慢速结束的过渡效果;   ease-in 规定以慢速开始的过渡效果;   ease-out 规定以慢速结束的过渡效果;   ease-in-out 规定以慢速开始和结束的过渡效果*/
        text-decoration: none;
        line-height: 50px;
        color: #FFF;
        font:bold;
        font-size: ;
        font-family: Arial;
        text-shadow:1px 2px rgba(0,0,0,.5);
    }
</style>
<body>
    <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About Me</a></li>
        <li><a href="">Protfilo</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Resource</a></li>
        <li><a href="">Contact Me</a></li>
    </ul>
</body>
</html>