Template:前后导航条/style.css

.pnbar {
    position: relative;
    overflow: hidden;
    color: #fff;
    font-size: 1.05rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    text-shadow: -1px 1px 3px #000, 1px 1px 3px #000, 1px -1px 3px #000, -1px -1px 3px #000;
    user-select: none;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgzMzUwNDAwQ0RDQzExRUE5OUNCQ0Q5NDA3ODk4RUE5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgzMzUwNDAxQ0RDQzExRUE5OUNCQ0Q5NDA3ODk4RUE5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODMzNTAzRkVDRENDMTFFQTk5Q0JDRDk0MDc4OThFQTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODMzNTAzRkZDRENDMTFFQTk5Q0JDRDk0MDc4OThFQTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5ItLfuAAAAJ0lEQVR42mIUFBQUEhJigAEmZM67d++YkDlAOSZkDkg9MgcIAAIMAI/tDHMC7fUsAAAAAElFTkSuQmCC");
    transition: all 0.3s;
    margin: 1rem 0.1rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .2);
    border: 1px solid rgba(79, 79, 79, 0.67);
    border-radius: 0.25rem;
}

.pnbar:hover {
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
}

.pnbar>div {
    text-align: center;
    width: auto;
    line-height: 1.4rem;
    padding: 0.6rem 1rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pnbar>div:hover {
    color: #fff100;
}

.pnbar .pnspilt {
    width: 1px;
    background: rgba(255, 255, 255, 0.24);
    height: 2.6rem;
    padding: 0;
    margin: auto;
}

.pnbar .pnleft {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHsAAACWCAMAAADJwwcRAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAANmaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0NSA3OS4xNjM0OTksIDIwMTgvMDgvMTMtMTY6NDA6MjIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NkM5RDlBRkYzMUJGRTUxMTlBRjU4RUZGNEZBMTIzQUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTE0QzhDOUI5RDI0MTFFQUFCMjlCMDY2NTY0QTE4QkEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTE0QzhDOUE5RDI0MTFFQUFCMjlCMDY2NTY0QTE4QkEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENzQxOTRENzlEMDUxMUVBQTYxRURCMkYwRjhEOEMxMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENzQxOTREODlEMDUxMUVBQTYxRURCMkYwRjhEOEMxMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtvxA70AAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAABOFBMVEVMaXH/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QC+zE5ZAAAAZ3RSTlMA/g8VCQP5fwEG/PUc0hfw69m6qbdx5DgNTy2O2+jBMkeD3cXMIhJWn/PPG8euQJHVnN7NmbBoYasmfCSByaCiO2/uPuWJCMK9ZFy0eAyXRF9ThydKNSp+BLJqlR+/jUgw4Vel4KT2FDm6FAAAArtJREFUeNrF2udSWlEAReELAlJULEgRBbG3gKYZlSRG1MQUMcVuNJ33f4McHmHP7Jl1XuAbhj93nX2iyHMGe9ppRLaj0kccXeXoVhqjTzl6i6NXOPp3EqNfcPSjK4y+zmB0gaPHjzH6XQKjaxw9/wmjX8YxeoGj15YwengAozc5emwEo6fXMXpuCKN/3mF0cQ+jDzl65itGj15w9BRGH9QxOn/O0SWMzu1zdIejuxidmuXobxxdwejsZ45e5uj3GB3b5ugTjr7B6N4bjp7k6I8cfcnRbY4+4ugqR/vu4mX6lKO3OHqFo/8mMXqCo3138TLtu4uX6QJH++7iZdp3Fy/TNY723cXL9EYcoxc42ncXL9O+u3iZ3uRo3128TBvv4hvcXXwUVTW7Y6Sj9FPud0fpV9T/HU5ygtqcwsk8o7a2Pj5ObYzhJGrUthpOeYPalMOJP6G29HAGhrXvlrITHxmT8LcJJz70WMK/W/HFovZ9bsV3Zqg3QuFMjUr4Bytez2sdasVLq9RbuHCaOSj++2c2JeGvrXhFw40PL8NZzlIPTsPZjkn4rRV/ruEtpx1Nal/O91Z8V8O/WHExWNpWXAyWS6ctBotxrNGDxThS6cFiHOf0YDGOknqwGMdYPViMI7QeLMbxXQ+W7C8wWIyPLfRgMT4y0YPF+LhGD5bUAxgs/7pOXAyWXBMMlpz1DlAMltV9MFiMjyX1YMnXnbgYLAc/wGAxvswN50xrBuOLZD1YjC+x9WAxPn7Xg6W4CAbLnzsnLgaLdeVQg8W6cqjBYl051GCxrhxisHhXjkyBWq31YPGuHGKweFcOMVi8K4cYLN6VQwwW78ohBot35RCDxbtyiMHiXTnEYPGuHGKweFcOMVi8K4cYLN6VQwwW78ohBot35RCDxbtyiMHiXTnEYPGuHGKweFcOMVh67f87CSnywOCX9gAAAABJRU5ErkJggg==) no-repeat;
    width: 37%;
    background-size: contain;
    background-position: left;
}

.pnbar .pnright {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHsAAACWCAMAAADJwwcRAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAANmaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0NSA3OS4xNjM0OTksIDIwMTgvMDgvMTMtMTY6NDA6MjIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NkM5RDlBRkYzMUJGRTUxMTlBRjU4RUZGNEZBMTIzQUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFMUIxODM5RDk4MTFFQTk1QzE4QjUwREIyQTQxRDIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFMUIxODI5RDk4MTFFQTk1QzE4QjUwREIyQTQxRDIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMTRDOEM5QTlEMjQxMUVBQUIyOUIwNjY1NjRBMThCQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMTRDOEM5QjlEMjQxMUVBQUIyOUIwNjY1NjRBMThCQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjFiP68AAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAABOFBMVEVMaXH/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QD/8QC+zE5ZAAAAZ3RSTlMA/hUPCQP5fwEG/PXr0hfZHPC65KkNTzLoccEtjrcbrtsiOEdAn4OR3dXHEvPPzFacxXwmzSSZyWGw3qA+q4FoSn5cZLKXom+VNbTCOwgqalN4DCe9ie6NX4dEBL8f9qTg4VcwSKXldmZwbwAAArBJREFUeNrF23dSUwEURvEXQmJCDTUQEhECCIiAHStYsNBUFAuKXdn/DlzDmflmTjbw+wMI79x7X1EUxdI5+1wogp8TE2+LeO2yie+a+KaJL4p45a+JPxTxL7MiXn9m4h0RPxwV8d73Jt4S8eNrIl6+Y+LrIn7lqoj3DJr4iogPDYv4xUsi3lgW8bOfIn5rzMT/ifi7KRE/GhDxGRNvfhDxVyMiPm/iB/0i/sDET028WxXxHROfNPE3fSK+YeJPTHyrJOJPTfy1ib84F/FpE39r4o9N/JGJn5h4W8TxrD+K75r4pokvinjlu4mPizie9SdxPOuP4h0Rx7P+JI5n/VG8JeJ41p/Ey6smvi7ieNafxPGsP4qviDie9SdxPOtP4njWv5SchDG67e04bte0n/f9mvZ7Pl7R/r7v1rXvtdG69n3e6tX+j61OBGm2q79ZztET7LllsCf4vLaP6OGhIP0V0fcaQZo9n4/NaV0ydSNI7yF6YCZIsw4daQb7m93arc1r6d+/EKSfI7ra1UY91UltxNW3EaRfIrq0FXwuZCPN0naQ/siehqeD9GdGX/dG98n8gCuLZH7AVU0yP+CKKpkfcDWXzA+4kkzmB1zFJvMDrqCT+QFX78n8+MXoZH7AU4tkfsATk2R+wNOaZH78YXQyP06/afmxwK64kvkBr9eS+XGwpuUHPJVM5keT0cn8+M2uU5P5Aa9yk/kBr5FLn3I0vMJO5gc9fQ/mxxykg/lx9kPLD7p5CeYH3TgF84Nu2oL5QTeMwfygm9VgftCNcidH0016MD/o24LB/IAbiGR+wA1EMj/gBiKZH3ADkcwPehkVzA+4gUjmB9xAJPODvu0fzA96fBjMD7iBSOYHPTYN5gc9sg3mB9xARPODbSCi+QE3EMn8gBuIZH7QlweC+fEfhTQpyJgexfsAAAAASUVORK5CYII=") no-repeat;
    width: 37%;
    background-size: contain;
    background-position: right;
}

.pnbar .pncenter {
    width: calc(26% - 2px);
}

.pnbar .transparentblock {
    position: absolute;
    top: 0;
    overflow: hidden;
    height: 100%;
    width: inherit;
}

.pnbar .transparentblock img {
    height: 100%;
    width: 100%;
    opacity: 0;
}

@media screen and (max-width: 768px) {
    .pnbar {
        font-size: 90%;
        margin: 1rem 0;
    }
    .pnbar>div {
        line-height: 1.2rem;
        padding: 0.6rem 0.2rem;
    }
}