成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

自定義簡潔博客園布局樣式

番茄西紅柿 / 1989人閱讀

摘要：自定義主體樣式參數(shù)在皮膚里先挑一個(gè)現(xiàn)成的模板開始我們的定制之旅，這里我選了，我還是喜歡這種樸素的風(fēng)格。選擇模板上圖成品的修改源碼如下能明白上述樣式原理，那么就可以繼續(xù)定制元素和表格定制定制表格元素其他參數(shù)設(shè)置

自定義主體樣式參數(shù)

在皮膚里先挑一個(gè)現(xiàn)成的模板開始我們的定制之旅，這里我選了SimpleMemory，我還是喜歡這種樸素的風(fēng)格。

選擇SimpleMemory模板

上圖成品的修改源碼如下：

body {
    background-color: #176d4694;
}

#home {
    width: 90%;
    background-color: #fff;
}
.catListTitle {
    font-size:2.35em;
    margin-top:21px;
    margin-bottom:10.5px;
    border-left:10px solid #0275c6;
    padding:10px 0 10px 14px;
    background-color:#f7f7f7;
}
#navList {
    font-size: 18px;
}
#navList a {
    padding-top:15%;
}
#navList a:hover {
    color:#0275c6;
}

能明白上述樣式原理，那么就可以繼續(xù)定制h1,h2,h3元素和表格

定制h1,h2,h3

#cnblogs_post_body h1 {
    background: #265B8A;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-family: FZShuTi；
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 12px 0 8px 5px;
    text-shadow: 2px 2px 3px #222222;
    text-align:center;
    margin-bottom: 20px;
}
#cnblogs_post_body h2 {
background-color: #008FC6;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding-left: 15px;
    margin-bottom: 12px;
}
#cnblogs_post_body h3 {
background-color: #51C332;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:50%
}

定制表格元素

#cnblogs_post_body table {
    text-align: center;
    width: 100%;
    border: 1px solid #dedede;
    margin: 15px 0;
    border-collapse: collapse;
}
#cnblogs_post_body table thead tr {
    background: #f8f8f8;
}
#cnblogs_post_body table tbody tr:hover {
    background: #efefef;
}

其他參數(shù)設(shè)置

code {
    padding: 1px 3px;
    margin: 0 3px;
    background: #ffffd;
    border: 1px solid #ccc;
    font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
    word-wrap: break-word;
    font-size: 14px;
}

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2212.html

相關(guān)文章

  • 前端小白也能快速學(xué)會(huì)的博客園博客美化全攻略

    摘要：前端小白也能快速學(xué)會(huì)的博客園博客美化全攻略呦，博客園的自我修養(yǎng)是什么第一條，別只顧收藏和偷師呀，記得點(diǎn)推薦或關(guān)注本人喔美化方法論簡介一般而言，需要選一個(gè)默認(rèn)的，然后在該基礎(chǔ)上調(diào)整?；蛘咭部蛇M(jìn)博客園園子頁面，發(fā)狀態(tài)博客園團(tuán)隊(duì)，申請開通權(quán)限。 前端小白也能快速學(xué)會(huì)的博客園博客美化全攻略 A呦V，博客園er的自我修養(yǎng)是什么？第一條，別只顧收藏和偷師呀，記得點(diǎn)推薦或關(guān)注本人喔~ 美化方法論簡...

    StonePanda 評(píng)論0 收藏0

  • css常見的各種布局上（兩列布局）

    摘要：目錄一大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局博客園為例騰訊課堂個(gè)人中心頁慕課網(wǎng)個(gè)人中心頁個(gè)人中心頁二版的結(jié)構(gòu)三類似九宮格布局的兩列結(jié)構(gòu)四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數(shù)的文字，右側(cè)文字和左邊圖片垂直居中。目錄：一、大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局1、博客園為例2、騰訊課堂個(gè)人中心頁3、慕課網(wǎng)個(gè)人中心頁4、github個(gè)人中心頁二、mini版的nav+cont結(jié)構(gòu)三、類似九宮格...

    番茄西紅柿 評(píng)論0 收藏0

  • 博客園自定義樣式

    摘要：個(gè)人比較喜歡用來編寫博客，但是博客園自帶的編輯器真的不是很友好啊。。。。。還好，博客園比較人性化的有頁面樣式的自定制功能。 碎碎念： 已經(jīng)很長時(shí)間沒有更新過博客了，分析一下，一個(gè)是太懶了。。。所以很久沒整理一下了。 還有就是嫌棄博客園默認(rèn)的博客界面真的太丑了，作為顏控的我真的無法忍受啊。 個(gè)人比較喜歡用makedown來編寫博客，但是博客園自帶的編輯器真的不是很友好啊。。。。。 還...

    ASCH 評(píng)論0 收藏0

  • 設(shè)置博客園標(biāo)題樣式

    摘要：博客園設(shè)置博客設(shè)置，點(diǎn)擊頁面上的權(quán)限申請，然后填寫申請的理由，耐心等幾分鐘，再刷新一下，頁面就會(huì)顯示支持代碼，博客園也會(huì)在用戶郵箱給你發(fā)送是否開通權(quán)限的郵件。1.向博客園申請js權(quán)限 　我們需要進(jìn)入博客園自定義博客模板的頁面，向博客園管理團(tuán)隊(duì)申請頁面運(yùn)行js的權(quán)限?！静┛蛨@】->【設(shè)置】->【博客設(shè)置】，點(diǎn)擊頁面上的js權(quán)限申請，然后填寫申請的理由，耐心等幾分鐘，再刷新一下，頁面就會(huì)顯示支持...

    番茄西紅柿 評(píng)論0 收藏0

  • [學(xué)習(xí)交流]博客園 cnblog 添加github鏈接和自定義美化學(xué)習(xí)

    2018.12.30更新 --------------------------------------------------------------------分割線--------------------------------------------------------------------------------- 認(rèn)識(shí)博客園的組件 選擇皮膚：設(shè)置-博客設(shè)置-（該皮膚為簡潔） 下面...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<