部落格css樣式定製

標籤：

每次看到那麼寬的螢幕卻不鋪滿就感覺真是暴殄天物，代碼都被擠的自動換行了很難看的好吧，然後就看到後台有一個css定製的功能，然後就試了一下，發現這功能果然很強大。

技巧：

使用F12查看源碼，會發現其實人家早給設計得很方便定製了，而且還有注釋，如下：

但是想吐槽的是為什麼寬度都是固定px的啊，有點懷疑是不是用js探測然後設定的不然太耳鼻了也...

 

搞了好幾個小時，效果還算滿意，我的定製如下：

/*約定：    1. 被注釋的是原來的屬性，下方是新的屬性。    2. 如果上方為空白注釋說明下方是新增屬性。*//*------------------------------ banner頭資訊 --------------------------*//*標題*/#header {    position: relative;    top: 0;    left: auto;    /*width: 950px;*/    width: 95%;    height: 310px;    margin: auto;    border: none;    padding: 0;    background: none;}/*部落格標題*/#blogTitle {    position: relative;    top: 130px;    left: 0;    width: 740px;    height: 75px;    margin: 0;    border: none;    padding: 0;    /**/    padding-left:2%;    background: none;}/*導覽列項串連*/#navList a {    display: block;    width: 70px;    height: 31px;    float: left;    text-align: center;    padding-top: 9px;    font-size: 14px;    font-family: 微軟雅黑,微軟雅黑,微軟雅黑,微軟雅黑; /* 黑人問號？？？ */    /**/    color:#666;}/*-------------------------------- 主內容面板 ----------------------------------------*//*主面板*/#main {    position: relative;    top: 0;    left: auto;    /*width: 950px;*/    width:95%;    height: auto;    margin: auto;    border: none;    padding-right: 0;}/*內容面板*/#mainContent {    float: right;    /**/    width:80%;}/*所有項合集的面板*/#mainContent .forFlow {    background-position: right top;}/*每一項的面板*/.day {    position: relative;    /*width: 690px;*/    width: 90%;    height: auto;    margin: 0 20px 0 20px;    border: none;    padding: 0;}/*標題*/.postTitle {    position: relative;    /*width: 690px;*/    width: 100%;    margin: 0;    border: none;    padding: 0;}/*項內容*/.postCon {    position: relative;    /*width: 690px;*/    width:100%;    height: auto;    margin: 10px 0 0 0;    border: none;    padding: 0;    color: #494949;    font-family: Arial,Helvetica,sans-serif;    font-size: 14px;    font-weight: normal;    text-decoration: none;    line-height: 1.4;}/*項的描述*/.postDesc {    position: relative;    width: 690px;    height: 30px;    margin: 0;    border-bottom: #ccc 1px dashed;    padding: 0;    color: #666;    font-family: Arial,Helvetica,sans-serif;    font-size: 12px;    font-weight: normal;    text-decoration: none;    line-height: 1.4;}/*---------------------------------- 查看博文詳細頁面 --------------------------------------*//*博文主面板*/#topics {    position: relative;    /*width: 710px;*/    width: 95%;    height: auto;    margin: 0;    border: none;    padding: 0;}/*博文標題*/#topics .postTitle {    position: relative;    /*width: 690px;*/    width: 100%;    margin: 0;    border: none;    padding: 0;}/*博文內容*/.postBody {    position: relative;    /*width: 690px;*/    width: 100%;    height: auto;    margin: 0;    border: none;    padding: 0;    color: #494949;    font-family: Arial,Helvetica,sans-serif;    font-size: 14px;    font-weight: normal;    text-decoration: none;    line-height: 1.6;}/*下方的作者資訊*/#author_profile {    float: left;    /*width: 280px;*/    width: 30%;    margin-top: 0;    margin-bottom: 10px;    color: #000;    margin-left: 0;    font-size: 12px;}/*推薦表徵圖，這個東西預設是右浮動的，鬱悶又沒人給我推薦我還要處理它好想直接display:none算了...*/#div_digg {    float: right;    margin-bottom: 10px;    margin-right: 30px;    font-size: 12px;    /*width: 125px;*/    width: 33%;    text-align: center;    margin-top: 10px;}/*推薦小手表徵圖*/.diggit {    float: left;    width: 46px;    height: 52px;    background: url(‘http://static.cnblogs.com/images/upup.gif‘) no-repeat;    text-align: center;    cursor: pointer;    margin-top: 2px;    padding-top: 5px;}/*反對小手表徵圖*/.buryit {    /*float: right;*/    float:left;    margin-left: 20px;    width: 46px;    height: 52px;    background: url(‘http://static.cnblogs.com/images/downdown.gif‘) no-repeat;    text-align: center;    cursor: pointer;    margin-top: 2px;    padding-top: 5px;}/*-------------------------------- 側邊欄 ----------------------------------------*//*側邊欄*/#sideBar {    /*width: 205px;*/    width:auto; /*試了一下還是設定為auto不然網頁縮放的時候會有重疊*/    height: auto;    float: left;}

 

 

 

 

 

 

 

 

.

部落格css樣式定製