WordPress 主题美化:打造精美底部菜单

底部菜单的美化是提升 WordPress 主题整体视觉效果的重要环节之一。而实现底部菜单美化的关键就在于特定的 CSS 代码。以下便是底部菜单美化的 CSS 代码。这些代码犹如神奇的画笔,能够在网页的底部区域勾勒出精美的图案和色彩。每一行 CSS 代码都承载着特定的功能和使命,它们相互配合,共同为底部菜单赋予独特的魅力。通过调整字体样式、颜色搭配、背景效果以及边框属性等,这些 CSS 代码能够将原本平淡无奇的底部菜单打造成一个引人注目的视觉焦点,为用户带来更加舒适和愉悦的浏览体验。

代码部署

/** 底部菜单美化 */
.menu-footer-list {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff !important;
    line-height: 15px;
    margin-bottom: 5px;
}
.menu-footer-list .menu-item a {
    color: #fff !important;
    font-size: 13px;
}
.menu-footer-list .menu-item{
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-right: 5px;;
}
 
.menu-footer-list li:nth-child(6n+1) {
    background-color: #4dc820;
}
.menu-footer-list li:nth-child(6n+2) {
    background-color: #8833d7;
}
.menu-footer-list li:nth-child(6n+3) {
    background-color: orange;
}
.menu-footer-list li:nth-child(6n+4) {
    background-color: #e91515;
}
.menu-footer-list li:nth-child(6n+5){
    background-color: #007ec6;
}
.menu-footer-list li:nth-child(6n) {
    background-color: #e323c2;
}
 
#menu-footer-nav li:hover {
  transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

 

阅读剩余
十月 29

本站历史上的今天

    "吼吼~~~,往年的今天站长不知道跑哪里偷懒去了~~~"
提示:本文最后更新于2024年10月29日,如有错误或者已经失效,请留言告知。
THE END
赶紧收藏我们,查看更多心仪的内容?按Ctrl+D收藏我们 或 发现更多