查看“柯南百科:首页（2020年）/导航元素/style.css”的源代码

.mainframe.navlist {
    display: block;
    position: relative;
    max-width: 200px;
    transition: all 0.2s ease;
    text-decoration: none;
    margin: 0 0.5rem;
}

.mainframe.navlist:hover {
    box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 2px 2px;
}

.mainframe.navlist .limg {
    width: 200px;
    height: 200px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mainframe.navlist .limg img {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    vertical-align: middle;
}

.mainframe.navlist .lname {
    height: 37px;
    text-align: center;
    font-size: 1rem;
    padding-bottom: 0.5rem;
    color: #000;
    font-weight: bold;
    transform: rotate(-2.8deg);
    white-space: nowrap;
    user-select: none;
}

.mainframe.navlist .lnamebg {
    position: absolute;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAAA+CAMAAACr1KYkAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAANmaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MSA2NC4xNDA5NDksIDIwMTAvMTIvMDctMTA6NTc6MDEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6M0FFNjU3MzgyRkJGRTUxMTlBRjU4RUZGNEZBMTIzQUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQwNDMwREJCRjMxMTFFNTlFM0RFNzc1NTg2NDVBQzIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQwNDMwREFCRjMxMTFFNTlFM0RFNzc1NTg2NDVBQzIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQUU2NTczODJGQkZFNTExOUFGNThFRkY0RkExMjNBRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQUU2NTczODJGQkZFNTExOUFGNThFRkY0RkExMjNBRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9y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') no-repeat;
    background-size: cover;
    width: 100%;
    height: 40px;
    bottom: 5px;
}