部落格于今日開通,在這網絡資源日益豐富的年代,曾經在這裡得到了許多寶貴的資料以及衆多經驗。想想也該到了分享心得的階段了,順便記錄下成長的經曆,共勉。
以下為2017/06/26更新内容:
我的部落格園界面打造流程
- 選擇皮膚CodeingLife
- 修改樣式(背景設定樣式代碼如下)
頁面定制CSS代碼
/*****調整原有部落格頁面元素高度位置等等*****/
#blogTitle {
height: 0px;
}
#blogTitle h1 {
font-size: 0px;
}
#blogTitle h2 {
font-size: 0px;
}
#navigator {
height: 50px;
width:100%;/*用于适應各種大小的裝置*/
}
#navList {
min-height: 50px;
margin: 10px 0 0 20px;
width:100%;/*用于适應各種大小的裝置*/
}
#navList li {
float: left;
line-height: 27px;
}
#navList a {
padding: 0 10px;
font-size: 23px;
}
body {
background: #D2E8F8
}
/*****導航菜單滑鼠懸停透明*****/
#navList a:hover {
background-color: #00000000;/*背景透明*/
color: #FF5E52;/*字型顔色*/
}
#mainContent {
width: 74%;
margin: 0 0 0 2%;
}
#sideBar {
margin: 0 0 0 15px;
width: 22%;
}
/*****自定義日期欄*****/
#blog-calendar .Cal, #calendar .Cal {
line-height: 1.5em;
border-top: 8px solid #f33324;
background: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/*****邊側欄整體寬度*****/
.sidebar-block {
}
/*****自定義公告欄的CSS*****/
#profile_block_my:hover {
border: 1px solid #ff5e52;
}
#profile_block_my {
background: #fff;
padding: 20px;
color: #7e8c8d;
font-size: 13px;
line-height: 1.8;
margin-top: 0 !important;
border: 1px solid #dedede;
}
#profile_block_my {
margin-top: 5px;
line-height: 1.5;
text-align: left;
}
.sidebar-block h3 {
padding: 2px 12px;
}
/*****“找找看”文本鍵入框寬度*****/
#widget_my_zzk {
padding: 1px 0 1px 1px;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
margin: 0 !important;
}
#sidebar_search_box input[type="text"] {
width: 61.3%;
}
/*****“藍色底标簽的高度調整*****/
.catListTitle {
padding: 1px 20px;
}
/*****“使随筆檔案等邊框欄目内容更為緊湊*****/
.sidebar-block ul li {
padding: 0px 12px 0px 12px;
}
/*****廣告的背景設定為與底色背景一緻*****/
#under_post_news {
background-color: #D2E8F8;
}
#under_post_kb {
background-color: #D2E8F8;
}
/*****一鍵傳回頂部*****/
#back-to-top {
background-color: #FF5E52;
bottom: 0;
box-shadow: 0 0 6px #FF5E52;
color: #fff;
padding: 10px 7px;
position: fixed;
right: 0px;
cursor: pointer;
}
a:hover {
color: #fff;
}
View Code
側邊欄公告(支援HTML代碼)(支援JS代碼)
<!-- 删除原有的profile_block -->
<script>
var parent=document.getElementById("blog-news");
var child=document.getElementById("profile_block");
parent.removeChild(child);
</script>
<!-- 添加自己的的profile_block_my -->
<div id="profile_block_my">
昵 稱 : <a href="http://home.cnblogs.com/u/xiaoxi666/">xiaoxi666</a><a href="javascript:void(0);"  
onclick="follow('b811d974-8da2-e311-8d02-90b11c0b17d6')"><font size="2" color="skyblue">+關注</font></a><br>
<!-- 添加自己的GitHub連結 -->
<div >GitHub : <a href="https://github.com/xiaoxi666"><span class="s3">github.com/xiaoxi666</span></a>
<!-- 添加郵箱 -->
<br />E-mail : <a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
<!-- 删除原有的google搜尋 -->
<script>
var parent=document.getElementById("sidebar_search_box");
var child=document.getElementById("widget_my_google");
parent.removeChild(child);
</script>
<!-- 删除“标簽” -->
<script>
var parent=document.getElementById("blog-sidecolumn");
var child=document.getElementById("sidebar_toptags");
parent.removeChild(child);
</script>
<!-- 删除"最近評論" -->
<script>
var parent=document.getElementById("blog-sidecolumn");
var child=document.getElementById("sidebar_recentcomments");
parent.removeChild(child);
</script>
頁腳Html代碼
<span id="back-to-top"><a href="#top"><strong>TOP</strong></a></span>
特此記錄。
我的筆名是“小溪”,寓意為“如果有什麼東西擋住了你的去路……繞開它!”,這是Jeff Atwood部落格中Curtis Armstrong影視節目《再見人生》中的一句台詞。避開那些難纏的羁絆,快速前進吧!
小溪 xiaoxi666
如果有什麼東西擋住了你的去路……繞開它!
Master programmers think of systems as stories to be told rather than programs to be written. ——《clean code》
『注:本文來自部落格園“小溪的部落格”,若非聲明均為原創内容,請勿用于商業用途,轉載請注明出處http://www.cnblogs.com/xiaoxi666/』