最近一直在园子里潜水,觉得园子的氛围还是挺好的,大神很多。于是,跑去注册了博客园,然后马上申请开通博客,当天就通过了审批,心情略微有点小激动。
首先自定义一个博客地址,该弄一个怎样的才够cool呢?··· youlin98,youlinwd,youlinzero。。。有点纠结ing,算了就这个吧,youlinwd ,还行。。。next,选择博客园皮肤(简称博皮),看了两圈,选了custom的博皮。开始自定义博皮ing...
下载了这两个东西,打开文档一看。。。
===========================================华丽的分割线==============================================
===========================================华丽的分割线==============================================
原谅我不够聪明,这。。。/yun/yanhua (不支持表情麽),基本一头雾水。遂度之,结果也是寥寥无几。ok,只能试试看了。根据博问里的一些提示,按下F12,出来了熟悉的devtool。
整理了一下html的结构布局,几乎都是只有id命名,只能用id了,
<body>
<div id="home">
<div id="header">
<div id="blogTitle">
</div>
<!--end: blogTitle 博客的标题和副标题 -->
<div id="navigator">
<div class="blogStats">
</div>
<!--end: blogStats -->
</div>
<!--end: navigator 博客导航栏 -->
</div>
<!--end: header 头部 -->
<div id="main">
<div id="mainContent">
<div class="forFlow">
</div>
<!--end: forFlow -->
</div>
<!--end: mainContent 主体内容容器-->
<div id="sideBar">
<div id="sideBarMain">
<!--done-->
</div>
<!--end: sideBarMain -->
<!--end: sideBar 侧边栏容器 -->
</div>
</div>
<!--end: main -->
<div id="footer">
</div>
<!--end: footer -->
</div>
<!--end: home 自定义的最大容器 -->
</body>
看着有点混乱,画个图来~
应该是这样,凑合着看吧
试着改了一下,然后粘贴,id选择器写css
看看效果
看来大概就是这样改了。
ok,看看目前的样子吧,有点陋...
初步样子就这样了。。。没有设计天赋 <奈何>
现在真的受不了那种又臭又长的网页,没有一个回到顶部的按钮,还要慢慢滚到顶部,这真是什么鬼
看看我效果~原本想用iconfont的,结果不支持文件的格式,没办法了,自制一个吧
还算不是很刺眼,哈哈
附上jq代码
$(function () {
$(window).scroll(function(){
//当滚动条到距顶部100像素以下,淡入
if ($(window).scrollTop() > 100){
$("#back2Top").fadeIn(2000);
} else {
$("#back2Top").fadeOut(1000);
}
});
//当点击回到顶部
$("#back2Top").click(function(e){
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
});
新人第一次发帖,好像图片有点多,欢迎各位大神指正,希望本文对想玩博皮的dev有帮助。
应该说,对于自定义css管理员给了很大的自由度,先写到这吧,后续待更···
最后附一张模仿的p图