PIX主题02:菜单透明自定义CSS

原pix主题上面的菜单栏不是透明的,这就把图片就遮掉了一部分,为了让整体感更强,同时更贴近一部分人的审美,做了一些改动。

下面红框部分就是原主题的样子

下面是改后的样子

下面是具体的改进内容:

.index_banner {
  height: 300px;
  margin-top: -65px;
  border-top-right-radius: 13px;
  border-top-left-radius: 13px;
  margin-bottom: 65px;
  background-color: var(--day-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;}

.user_info {
  position: absolute;
  bottom: -6%;
  right: 6%;
}

.top_bar {
  height: 65px;
  z-index: 9;
  background-color: var(--top-bg-color);
}

.user_info .des {
    color: #000000;
  }

.top_tool i{
color: #fff;}

.top_bar.uk-sticky-fixed.uk-active {
    background: rgb(183 183 183 / 80%);
}

.user_info .avatar {
    width: 75px;
    height: 75px;
}

/*站长名称间距以及字体粗细*/
.user_info .name {
    margin: 0px 10px 40px 0;
    font-weight: 500;
    font-size: 18px;
}
.user_info .des {
    margin: 0 -100px -47px 0;
    color: #606060ba;
}
/*片刻文章页top间*/
.moment_cat_nav, .posts_cat_nav{
    margin-top: -65px;
}

/*文章top间距*/
.single_wrap {
    margin-top: -50px;
}
.page_content .entry-header {
    margin-top: -25px;
}
/*手机端调整*/
@media only screen and (max-width: 540px){

.user_info .avatar {
    width: 60px;
    height: 60px;}
.user_info .name {
    margin: 0;
    font-weight: 500;
}
.index_banner {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    height: 234px;
}
.user_info .name {
    margin: 0px 0px 30px 0;
    font-weight: 600;
    font-size: 15px;
}
.user_info .des {
    margin: 0 -90px -46px 0;
    color: #606060ba;
}

/*片刻文章页top间*/
.moment_cat_nav, .posts_cat_nav{
    margin-top: 5px;
}
.page_content .entry-header {
    margin-top: 35px;
}
.single_wrap {
    top: 35px;
}
.archive_main {
    margin-top: -25px;
}
.mobile_logo img {
    height: 35px;
}}

代码我做了整合,有想再细分PC端和手机端设置的,可以再看看原作。
想对字体大小进行调整的,也可以在这里进行调整,可以针对PC端和手机端分别设置。

另外想对PIX音乐播放器,实现歌词显示、音量调节和伪自动播放功能的朋友可以直接访问
https://abohe.cn/geek/213.html

出处:冰水薄荷https://abohe.cn/geek/563.html

消息盒子
# 您有6条未读消息 #
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息

.