网站头部设计登录优化

本文共计2065个字,预计阅读时长6分钟。

emmm…先来清除一下我感觉不合理的项目吧。也许就是我认为,看官请随意~

杂项

模型路径:Modules>Templates>Header.php

header修改

这个功能在pc端上个人感觉很多余,所以先干掉它

查找:<div class="mobile-hidden" v-show="login" v-cloak>(在706行)

<div class="mobile-hidden" v-show="login" v-cloak>
     <button @click="showBox">'.b2_get_icon('b2-add').'</button>
</div>

修改:

字面意思也看的出来,也就是css样式手机端是hidden(隐藏),估计就是判断768px下display:none;其次就是vue判断是否登录显示v-show="login"

那么怎么弄?别问,问就是直接删除,如果你以后还想要的话注释掉也行。

 

登录后样式修改

效果预览

老规矩,既然是样式那么文件路径Assets>fontend>style.css

素材:

登录后背景素材

欧克,第一步我们先将图片加上去。(老铁别问我图片怎么下载,信不信我死给你看)

查找:.top-user-box-drop ul li:first-child修改:

.top-user-box-drop ul li:first-child{
    width: 100%;
    border: 0;
    background-image: url(https://www.imhanhan.com/wp-content/uploads/2021/02/titletop.png); background-repeat: round; padding: 20px; }

再来清除原有的背景和鼠标移动效果hover

查找.top-user-box-drop a.top-my-home,下面添加

.top-user-box-drop ul li:first-child a{
    background: initial;
    background-image: none;
}

查找.top-user-box-drop ul li:first-child下面添加

.t.top-user-box-drop ul li:first-child a{
    border: none;
}
.top-user-box-drop ul li:first-child a:hover{
    background: initial;
}

好了主要的部分就完事了,下面把细节调一调

最下面的登出居中,查找:.top-user-box-drop ul li:last-child a修改:

顺便提一下,为什么修改li标签只有第一个生效?这个以后做排行榜的话,比如要给前3名设置不用的炫酷小牌牌就要用到这玩意了,不懂这个?来度娘教你什么是伪类选择器

.top-user-box-drop ul li:last-child a{
    border:0;
    justify-content: center;
}

emmm…做了上面这些,好像格子都被压扁了,那么继续…

查找:.top-user-box-drop a修改:

.top-user-box-drop a{
    display: flex;
    width: 100%;
    font-size: 15px;
    padding: 20px 15px;
    overflow: hidden;
    height:100%;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    color:initial;
    box-sizing: border-box;
}

还是不行,顶部好像还有多出一丢丢的白色区域

查找:.top-user-box-drop修改:

.top-user-box-drop{
    position: absolute;
    top:43px;
    right:-22px;
    width:312px;
    background: #fff;
    z-index: 2;
    visibility: hidden;
    transition: 0s max-height 0.15s linear,0.1s opacity cubic-bezier(0.39,0.575,0.565,1),0.15s transform cubic-bezier(0.1,1.26,0.83,1);
    transform: perspective(1px) scale(0.7);
    transform-origin: center top;
    opacity: 0;
    box-shadow: 0 3px 3px rgba(26,26,26,.1);
}

最后把描述的颜色换一下就完工啦~

查找:.top-user-box-drop p span.top-user-link-des修改:

春哥也是不小心呢,竟然两个color

.top-user-box-drop p span.top-user-link-des{
    display: block;
    color:#636c78;
    font-size: 12px;
}

用户名的颜色也改一下吧。

查找:.top-user-box-drop ul li:first-child在下面添加

.top-user-box-drop ul li:first-child b{
    color: #324e90;
}

到此登陆后的美化就结束了,你学会了吗~

有需要交流的去圈子发表哈~必回~快来坐灰机 圈子

文章最后更新于 2021-02-27
b2美化

文章列表样式一(更新中...)

2021-2-23 20:39:59

b2美化

本站超细优化记录,持续迭代中...

2021-2-25 2:01:03

2 条回复 A文章作者 M管理员
  1. 这个很好看,学习下,感谢分享

  2. 罗拉

个人中心
购物车
优惠劵
有新私信 私信列表
搜索