博客园自定义样式

前两天开通了博客园，方便记录我关于HTML以及C#的历程。博客园有自己修改CSS样式的功能，正好可以把前段时间学的给用上，也算是练练手吧。不管是HTML还是C#，不用的话真的很容易忘记，还是记下来比较靠谱吧。开通了博客园当然得修改自己的界面了，不然为什么不用QQ空间记录呢。

我自己的博客走的是简约的路线，最近不是流行扁平化设计嘛，不仅简约代码也很简单。好了下面开始。首先需要的是进入后台的修改界面。从[管理]点击[设置]按钮进入。然后就是开始你的修改了。首先，我们需要选择一个模板，我选择的是LessIsMore，有的模板内容太多给人很不好修改的感觉。

现在开始写页面定制 CSS 代码。我建议大家先选择一张心仪的背景图片，从背景图片开始并围绕背景图片配色界面就不会显得太花。我们在网上找到心仪的图片，右键直接复制图标地址就行，然后粘贴到url括号内，背景就添加好了。

body {
　　background: url(https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0A/07/ChMkJlwaFVKIBxTgAADb2kJZOSgAAt4CwH2lWkAANvy439.jpg) no-repeat fixed;
　　background-size: cover;
}

然后就是主要的内容部分，这里我们主要需要修改的是里面的背景色。虽然一般都会弄成半透明的，但是颜色还是需要跟背景差不多会好看点。记得把边框弄成圆角，看起来会比较舒服。颜色的三个数字可以百度到。我这里用的是百分比来控制位置，这样别的分辨率界面也不会乱。

#home {
    margin: 0 auto;
    width: 65%;
    background-color: rgba(253,245,230, 0.6);        //透明度为0.6
　  left:14.5%;     
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    border-radius: 8px；                             //圆角
    position: absolute;
}

这样，主要的布局算是完成了，接下来我们需要先修改的是导航栏。主要修改了边框颜色，背景颜色还有鼠标悬停的特效。当鼠标指向导航栏文字时，字体变大颜色变灰。为了防止字体变大使得导航栏字体乱动，我们需要把导航栏长宽固定，并把文字居中。不过其实不固定也行，乱动也挺好看，我不习惯就改了。最后我还将大标题也就是我们的ID往右边移了一些腾出以后的头像位置。

#Header1_HeaderTitle{
margin-left:10%;
}
#navigator{
   border: 1px solid OldLace;
   background-color: rgba(253,245,230, 0.4);
   border-radius:4px;
   text-align: center;
}
#navList li {
　　border: 1px;
　　font-size: 13px;
　　height:25px;
　　width:50px;             //固定长宽
}
#navList a {
　　text-align: center;
}
#navList a:hover {
　　color: grey;
　　font-size: 16px;
}

下面我们要修改的是公告栏，公告栏很丑很碍眼很普通有没有。首先先改的还是CSS样式，还是写在页面定制 CSS 代码框，结合后面的HTML代码使用。首先是主要的文字部分，我们把宽度改成100%，最小高度为1000px。然后把公告栏移到右边去。还是把透明度，圆角弄好。日历说实话没啥用，还丑，我们就让它消失吧。再把“找一找”的框和按钮美化一下，改成符合我们界面的风格。我们通过hover给按钮添加鼠标滑过的样式。下面的谷歌搜索我们也用不了，有点点碍眼，也消失吧。

#mainContent{               //文本栏
　　width:100%;
　　min-height:1000px;
}
#sideBar{                   //公告栏
　　display:none;
　　top:50px;
　　right:-180px;
　　width:150px;
　　background-color: rgba(253,245,230, 0.6);
　　border:1px solid #999;
　　overflow:hidden;
　　position: absolute;
　　box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
　　border-radius: 8px;
}
#calendar{
display:none;                   //日历消失
}
.mySearch #q {                  //文本框样式
    height: 22px;
    width: 90px;
    border-radius: 2px;
    border: 1px solid grey;
}
.mySearch #btnZzk {             //按钮样式
    height:22px;
    width: 50px;
    background: cadetblue;
    border: 1px solid cadetblue;
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    cursor: pointer;
}
.mySearch #btnZzk:hover{        //按钮悬停样式
    background: white;
    color: cadetblue;
}
#widget_my_google{
　　display:none;                  //谷歌消失
}

现在基本的样子已经是完工了，我们可以再添加一些小功能，比如通过按钮控制公告栏的出现和消失。这个需要我们结合后面的“博客侧边栏公告（支持HTML代码）（支持 JS 代码）”栏和“页首 HTML 代码”栏。不过我们可以先在css把后面要用的按钮样式设计好。这里我用了两个按钮，一个控制打开、一个控制关闭。两个按钮用一个CSS就可以了。当然，颜色位置什么的都可以根据自己的喜好进行调整。别忘了加上悬浮样式。

.button1{                                      //控制按钮的样式
　　z-index:1;
　　position: absolute;
　　right: 15%; 
　　margin-top: 10px;
　　border-radius: 2px;
　　background-color: rgba(83,134,139, 0.5);
　　border: none; 
　　color: ghostwhite;
　　height: 30px; 
　　width: 60px;
}
.button1:hover {                               //控制按钮的悬浮样式
　　background-color: rgba(83,134,139, 0.8);
　　box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

好了CSS代码部分已经完成了，但为了实现按钮功能我们还需要写JS代码。JS代码需要提前申请，我晚上11点半申请的，第二天早上9点半就通过了。代码使用了JQUERY,也不用完全懂，会用就可以。具体可以看注释。

<script>
$(document).ready(function(){
  $("#open").click(function(){      //"open"按钮点击事件
  $("#sideBar").fadeIn("slow");     //渐渐消失，"slow"可以换成数字
  $("#open").hide();                //"open"按钮消失
  $("#hide").show();                //"hide"按钮出现
  });
});
$(document).ready(function(){
  $("#hide").click(function(){
  $("#sideBar").fadeOut("slow");    //渐渐出现
  $("#open").show();
  $("#hide").hide();
  });
});
</script>

我们已经设计好了按钮样式和按钮功能，但我们还没有添加按钮！所以最后的“页首 HTML 代码”栏我们把我们的头像还有按钮添加上去。头像的样式为了方便修改我直接写在style里面了。

<img border="0" src="https://images.cnblogs.com/cnblogs_com/zcgary/1664198/o_200308061526%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200306193401.jpg"  width="80" height="80" style="z-index:1;border: 2px solid OldLace;margin: auto;border-radius:50%; left: 17.5%; top: 60px; position: absolute;">
<button id="open" class="button1">展开</button>
<button id="hide"  class="button1" style="display:none;">隐藏</button>

这样我们的博客就算完全完工了。不过因为第一篇随笔评论还没有，不知道什么样子，就没设计评论区。而且CSS用的不算熟练，时间也比较有限，所以页面比较简单，还有黑科技也没用上。不过设计出来的页面也算比较满意的。

以后有空的话会把页码再改改，到时候再来分享一些心得吧。下面把代码全贴出来。

页面定制 CSS 代码：

#home {
    margin: 0 auto;
    width: 65%;
    min-width:65%;
    background-color: rgba(253,245,230, 0.6);
    left:14.5%;
    padding: 3%;
    top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    border-radius: 8px;
    position: absolute;
}
body {
background: url(https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0A/07/ChMkJlwaFVKIBxTgAADb2kJZOSgAAt4CwH2lWkAANvy439.jpg) no-repeat fixed;
background-size: cover;
}
#Header1_HeaderTitle{
margin-left:10%;
}
#navigator{
   border: 1px solid OldLace;
   background-color: rgba(253,245,230, 0.4);
   border-radius:4px;
   text-align: center;
}
#navList li {
border: 1px;
font-size: 13px;
height:25px;
width:50px; 
}
#navList a {
text-align: center;
}
#navList a:hover {
color: grey;
font-size: 16px;
}
#mainContent{
width:100%;
min-height:1000px;
}
#sideBar{
display:none;
top:50px;
right:-180px;
width:150px;
background-color: rgba(253,245,230, 0.6);
border:1px solid #999;
overflow:hidden;
position: absolute;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
border-radius: 8px;
}
#calendar{
display:none;
}
.mySearch #q {
    height: 22px;
    width: 90px;
    border-radius: 2px;
    border: 1px solid grey;
}
.mySearch #btnZzk {
    height:22px;
    width: 50px;
    background: cadetblue;
    border: 1px solid cadetblue;
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    cursor: pointer;
}
.mySearch #btnZzk:hover{
    background: white;
    color: cadetblue;
}
#widget_my_google{
display:none;
}
.button1{
z-index:1;
position: absolute;
right: 15%; 
margin-top: 10px;
border-radius: 2px;
background-color: rgba(83,134,139, 0.5);
border: none; 
color: ghostwhite;
height: 30px; 
width: 60px;
}
.button1:hover {
background-color: rgba(83,134,139, 0.8);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

博客侧边栏公告（支持HTML代码）（支持 JS 代码）：

<script>
$(document).ready(function(){
  $("#open").click(function(){
  $("#sideBar").fadeIn("slow");
  $("#open").hide();
  $("#hide").show();
  });
});
$(document).ready(function(){
  $("#hide").click(function(){
  $("#sideBar").fadeOut("slow");
  $("#open").show();
  $("#hide").hide();
  });
});
</script>

页首 HTML 代码：

<img border="0" src="https://images.cnblogs.com/cnblogs_com/zcgary/1664198/o_200308061526%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200306193401.jpg"  width="80" height="80" style="z-index:1;border: 2px solid OldLace;margin: auto;border-radius:50%; left: 17.5%; top: 60px; position: absolute;">
<button id="open" class="button1">展开</button>
<button id="hide"  class="button1" style="display:none;">隐藏</button>

posted @ 2020-03-08 20:39 Garyara 阅读(275) 评论(1) 收藏举报

刷新页面返回顶部