/* .nav {
    固定位置使得窗口滚动而条不动
    position:fixed;
    top:0px;
    left:5%;
} */

.nav ul {
    list-style: none;
    /* background-color:#444; */
    /* background-color:#242424; */
    background-color:#0a1533;
    text-align: center;
    padding: 0;
    margin: 0;
}

.nav li {
    /* 在这里设置排版 */
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    line-height: 40px;  /* 设置为每一行垂直居中 */
    border-bottom: 1px solid #888;
}

.nav a {
    text-decoration: none; /* 设置下划线 */
    color: #fff;
    display: block; /* 选择用块来展示，不需要点到文字上才可以超链接*/
    transition: 0.5s background-color; /* 悬停的过渡效果*/
}

.nav a:hover {
    /* background-color: #005f5f; */
    background-color: rgb(34,70,94);
}

.nav a:active {
    background-color: #fff;
    /* color: #0a1533; */
    color: #242424;
    cursor: default;
}

@media screen and (min-width:1000px) {
    /* 此处的条件是要在页面小于600px的时候
        将页面中的nav调整为打竖排列 */
    .nav li {
        width: 120px;
        border-bottom: none;
        height: 50px;
        line-height: 50px;
        font-size: 1.4em;
    }
    .nav li {
        display: inline-block;
        margin-right:  -4px;
    }
}