首页 > 其他 > 详细

博客园首页页面设计

时间:2019-04-14 18:00:42      阅读:217      评论:0      收藏:0      [点我收藏+]

本人是博客园刚开通的小白,想在这讲一下,前几天博客园首页设计的心得(作为作为一个前端怎么可以不搞点花样来装饰下自己的博客园首页)

一、页面样式的修改

  技术分享图片

   在首页任意一处的样式都可以在这个“页面定制css”中进行覆盖修改。

   此外还可以对页首与页脚部分添加div等标签来修改样式,位置不符合预期的话,可以用自己学过的position定位等来修改部分位置的布局方式

二、引入bootstrap与jquery等外部文件

  可以在页首html中引入需要的bootstrap等css文件,要使用jquery的话,那么就在页脚html代码中引入,当然引用的文件是以链接方式引入才行,如下图

  技术分享图片

  技术分享图片

  在我的首页你可以看到,我的轮播图使用的就是bootstrap的轮播图

 三、如何在主体内容的中加入样式

  博客园提供对页首与页脚代码的添加,但是没有提供对主体内容加入html代码的入口,这时候就要想一些小窍门门了,我想在主题内容中添加bootstrap的轮播图,我选择在在页首中通过jquery动态给主体内容div中添加html代码,这样就可以解决了,当然首先你要开通js权限(很快,提交请求后几个小时就一般能审核通过了),我的jquery如下

  技术分享图片

  效果如下:

  技术分享图片

四、侧边栏引入外部插件

  1、开通js权限

  2、百度搜索“博客园侧边栏插件”

  3、然后在侧边栏中贴入插件代码

  4、一般贴入代码,你在控制台中看不到侧边栏插件,但是会占一片空白的位置,你按F12查看控制台会看到报http的错误,你可以,将你复制的代码中的http改成https试一试,如果还是不行的话,那你还是再去找找其他插件吧,反正我是找了很多,然后就这个老鼠插件能用(插件代码中的http改https)

  5、如果你自己能用代码写出来那也是你的本事,可以忽略上面4条

  

 

博客园首页页面设计

原文:https://www.cnblogs.com/liuke123/p/10706087.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!