摘要:初來乍到,算是一個博客園的新人,受了園里許多前輩的啟發正在一點點定制自己的小空間。效果滿意時,就可以拷貝下對應的樣式內容,再粘貼到博客園的設置中。
初來乍到,算是一個博客園的新人,受了園里許多前輩的啟發正在一點點定制自己的小空間。
也希望我的文章能夠成為大家DIY的啟發,就算是拋磚引玉了。效果可以直接在我的博客中看到,所以不另外貼圖了。
引入js文件需要先申請js權限,語言誠懇一點幾個小時(?)就可以拿到權限了。
這里以chrome瀏覽器為例,介紹一下基本的調整頁面控件css樣式的方法:
1、右鍵想要查看代碼的控件,選擇“Inspect”(因為用的是英文版所以不太清楚對應的中文是什么,不過應該是在相同的位置),如果直接“ctrl+shift+i”會進入對于整體頁面的開發者模式,適合對全局的調整。
2、進入開發者模式后,通過選擇上方html文件的內容,可以在下方看到對應的css樣式表,這里的樣式是可以修改的,而且可以直接在頁面上看到效果。
效果滿意時,就可以拷貝下對應的css樣式內容,再粘貼到博客園的設置中。
html:
蜘蛛網的原作者是github上的canvas-nest.js
下面的鏈接是我使用的稍作修改的.js文件,同樣的,大家可以自行修改,將文件上傳到博客園,再復制URL。
nest.js
html:
.ico文件在線就可以生成的,我是在這里生成的。
css:
在這個網站Github Corners選擇喜歡的一款拷貝到頁首html區就行。
css:
#div_digg {
position: fixed;
top: 380px;
left: 90px;
padding: 10px;
background-color: #FFFFFF89;
border-radius: 5px 5px 5px 5px !important;
box-shadow: 0 0 0 0px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
z-index: 999999;
}
@media screen and (max-width: 1200px)
#div_digg {
position: inherit;
}
#div_digg {
float: right;
margin-bottom: 10px;
margin-right: 100px;
font-size: 12px;
width: 52px;
text-align: center;
margin-top: 10px;
}
.diggit {
background: url(http://images.cnblogs.com/cnblogs_com/alva-rabbit-hole/1351589/o_tumbup2.png) no-repeat;
}
.diggit {
float: left;
width: 58px;
height: 36px;
text-align: left;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
div {
display: block;
}
* {
margin: 0;
padding: 0;
}
#div_digg .diggnum {
line-height: 3.9em!important;
padding-left: 25px;
}
.diggnum {
font-size: 13px;
color: #1d9021;
font-family: Verdana;
}
.buryit {
display: none;
}
有參考這篇文章《為自己的博客園添加目錄錨點和返回頂部》
首先,需要引入一個bootstrap的js文件,文件如下:
bootstrap.js
接下來就是設置目錄錨點的js文件,為了照顧閱讀體驗,文件也放在下面了,因為這部分沒有什么可以DIY的地方,所以不在這里貼代碼了,文件如下:
sidebar.js
最后就是可以自由發揮的css文件:
#sideToolbar {
position: sticky;
bottom: 50px;
left: 900px;
width: 250px;
height: 440px;
}
#sideCatalog{
background-color: #FFFFFFE3;
border-radius:5px;
}
#sideCatalog-catalog {
height: 400px;
padding-top: 20px;
padding-bottom: 30px;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 23px;
position: relative;
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top {
cursor: pointer;
top: 0
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
bottom: 0
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
height: 10px;
left: -5px;
overflow: hidden;
position: absolute;
width: 10px
}
#sideCatalog li {
margin: 0px;
padding: 4px 7px;
text-align: left;
position: relative
}
#sideCatalog li: hover {
background-color: #f5f5f5
}
#sideCatalog-catalog ul .active {
background-color: #f5f5f5
}
#sideCatalog-catalog .active a {
color: #155fad
}
#sideCatalog-catalog a: hover {
color: #519cea
}
#sideCatalog span: first-child {
color: #999;
font-family: Arial;
font-size: 14px;
font-weight: bold;
padding-right: 5px
}
#sideCatalog li.h2Offset {
padding-left: 45px;
text-indent: -25px
}
#sideCatalog li.h3Offset {
padding-left: 90px;
text-indent: -50px
}
#sideCatalog a {
text-decoration: none;
color: #3c3c3c;
font-weight: initial;
}
.sideCatalog-dot {
background: url(http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png) repeat scroll 0 -219px transparent;
cursor: pointer;
font-size: 12px;
height: 15px;
left: -10px;
line-height: 12px;
overflow: hidden;
position: absolute;
top: 4px;
width: 6px;
}
#sideCatalog .highlight .sideCatalog-dot {
background: url("http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -271px -38px transparent;
height: 13px;
left: -23px;
top: 3px;
width: 18px
}
#sideToolbar-up {
background: url("http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -1px -62px transparent;
border-radius: 2px;
display: block;
height: 45px;
margin-left: 5px;
width: 45px;
outline: 0
}
#sideToolbar-up:hover {
background: url("http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -74px -62px transparent
}
#div_digg{
z-index: 999;
}
}
大家可以在瀏覽器里右鍵控件inspect邊調邊改,當然不想改直接copy也沒問題啦。
css:
.cnblogs-markdown code, .cnblogs-post-body code {
font-family: "Source Code Pro",Consolas,Menlo,Monaco,"Courier New",monospace! important;
}
.cnblogs-markdown code, .cnblogs-post-body code{
border: none! important;
}
為了避免css樣式被覆蓋,所以加上!important
以強行提高優先級
html:
這部分的自定義空間還是很大的,可以嘗試其他的@keyframes補間動畫。
最后,如果大家覺得有可以改進的地方,歡迎交流!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1476.html
摘要:容器主要的作用就是生產各種零件,就是提供各個服務。的原理我們以為例,來講解一下門面的原理與實現。當運行時,發現門面沒有靜態函數,就會調用這個魔術函數。我們看到這個魔術函數做了兩件事獲得對象實例,利用對象調用函數。 前言 在開始之前,歡迎關注我自己的博客:www.leoyang90.cn這篇文章我們開始講 laravel 框架中的門面 Facade,什么是門面呢?官方文檔: Facade...
摘要:注解方式優點使用注解方式可以極大的減少使用模版方法模式帶來的擴展時需要繼承模版類的弊端,工廠注解的方式可以無需關心其他業務類的實現,而且減少了類膨脹的風險。 在上一篇文章Java設計模式綜合運用(門面+模版方法+責任鏈+策略)中,筆者寫了一篇門面模式、模版方法、責任鏈跟策略模式的綜合運用的事例文章,但是后來筆者發現,在實現策略模式的實現上,發現了一個弊端:那就是如果在后續業務發展中,需...
摘要:本文要來分享給大家程序員最常用的日志框架組件。沒有基礎的同學也不要著急,這套教程覆蓋了目前所有的日志框架,只要你學,就一定用得到,先收藏,以備不時之需。 作為一名Java程序員,我們開發了很多Java應用程序,包括桌面應用、WEB應用以及移動應用。然而日志系統是一個成熟Java應用所必不可少的。在開發和調試階段,日志可以幫...
摘要:一個表單由一或多個部件組成,這些部件可以是文本框單行或多行選擇框按鈕復選框或單選按鈕。在我們的示例里,一個文本框中用了該屬性的默認值,該值表示一個基本的單行文本框,用于接收無控制或驗證的任何文本。 前言 這個系列譯自mdn上的一份表單指南,原文詳盡闡述了表單相關的基礎知識。而表單作為一個經典的頁面交互方式,是每個前端工程師繞不開的話題,通過翻譯這個系列的文章既是有助于掃清自己的知識盲區...
閱讀 1605·2021-09-23 11:31
閱讀 920·2021-09-23 11:22
閱讀 1337·2021-09-22 15:41
閱讀 4062·2021-09-03 10:28
閱讀 2907·2019-08-30 15:55
閱讀 3536·2019-08-30 15:55
閱讀 1942·2019-08-30 15:44
閱讀 2712·2019-08-30 13:50