PIX主题07:页面圆角和直角设置

pix设置两栏后下面出现如图情况,为了美观,我们把这两个角要设置成直角。

代码中查看到在 page_main 中的边框圆角border-radius

  • 设置路径如下:pix → inc → assets → css → main.css
  • 在main.css中找到上面图片中的位置,把后面的12px 改成0px 即可
  • 可以用FTP下载css改,或者在主题文件编辑器中按上面的路径找到相应位置,更改即可。

需要更改的问题

按照之前的设置是把page_main的四角都变成了直角,所以会发现右上角会有一个白色的小尖尖。想把它去掉,的设置如下:

把border-radius去掉,分别对四个角进行设置即可。

下面是我设置的最终样子,哈哈。下面有点小出入

按照现在的改法,浏览的时候一般是没有什么问题了,但其实还存在一个问题!就是当浏览器宽度缩小时,但还没有小到触发手机下面的菜单的时候。就会面临两个问题:1)博客页面左边上下两个角,是因为导航这列的消失,就会“变成”直角;2)再没有触发手机底部菜单的时候,这种情况下是没有导航菜单的。

解决方法:1)不解决了,哈哈,就这样吧!2)打开web端顶部菜单,方法如下:

本站文章除注明出处外,均为原创或翻译,转载请务必署名。
© 2024 www.evan.xin

Comments | 12 条评论
  • Evan

    在main.css中更改如下内容即可实现当前页面效果。切记,备份备份备份!!!

    .page_main

    border-top-left-radius: 0px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 0px;

    .left_nav_inner

    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;

    • 麦淘

      @Evan 我比较懒,一般都是在主题后台的自定义CSS里打补丁,能不动原版代码的地方就懒得动。

      • Evan

        @麦淘 主要是在主题编辑器里面容易出错,少个符号就麻烦。我已经两次了哈哈~~

  • Hanson

    建议把底部那两个角也改成圆角的,这样看上去会比较协调点👍

    • Evan

      @Hanson 哈哈,刚刚改完。。。

    • Evan

      @Hanson 在文章里面与写了。哈哈哈。。想到一起了

      • Hanson

        @Evan nice!! 对了,你换1Panel了吗?

        • Evan

          @Hanson 本来新网站换1p的,都装完了,结果新网站的SSL用1p自带的SSL就是不行,折腾半天,最后重置装bt了。。哈哈。。目前一个主机都没有用1p,等等再说吧。

          • Hanson

            @Evan 你折腾的时候用的是什么系统呢,我用ubuntu20.04没问题

  • Pnnk

    我之前研究好久,没研究出来…放弃了…

    • Evan

      @Pnnk 我是从上面两个角获得的启发哈哈哈😂

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

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