文章信息:


文章类型:

当前文章标签:

文章发布日期:

最后修改日期:

文章摘要:


一、简单记录下一个粘性定位的问题。 看到文章有时候内容太长,如果往下滑动时,右侧边栏会因为没有内容了导致一篇空…

文章目录:


使用古登堡及WordPress默认2024主题来自定义各项内容

545 Views


一、简单记录下一个粘性定位的问题。

看到文章有时候内容太长,如果往下滑动时,右侧边栏会因为没有内容了导致一篇空白影响美观,因此想要让右侧边栏变得相对左边的文章内容粘性。

解决方法并不复杂,只需要css使用position: sticky 属性就好了。【ps: 才不考虑IE及落后浏览器的兼容性问题!】

附上代码:

.apost-content{
height:100%;}

.sidebarsticky{
   position: sticky !important;
   top: 0px;
  height: 100%;

}

注意:以上代码不一定适用于所有的网站。

需要注意几点核心:

  1. 高度,【2个相对定位的元素需要有高度属性,否则无法定位,高度可以是百分比/定高,但一定要有。】
  2. 注意css冲突。【添加完成不生效后,一定要学会在前端进行debug,看看添加的代码是否正确,如果出现position: sticky这种,说明有其他css干扰,你可以添加!important 来加强优先级,如上述代码。】

二、记录下文章标题的拟写规范:

  一级标题序号 如:一、二、三、

  二级标题序号 如:(一)(二)(三)

  三级标题序号 如:1.2.3.

  四级标题序号 如:(1)(2)(3)

  五级标题序号 如:①②③

三、记录下开站后先做的事情

(一)ico文件 – 即网站图标

随意百度搜索或者ps导出一个ico格式的图片文件,放在网站根目录即可,一般命名: favicon.ico

(二)伪静态

无论是后期生成纯静态还是网站SEO,都推荐以.html结尾,如图:

网站文章分类及页面


格言警句