關於 PIXNET 痞客邦 Blog 部落格面板 CSS 寬螢幕教學

目前我用的面板，出自於 myjourney911 實作：痞客邦管理後台 > 部落格 > 樣式選擇 > 電影 > [電影樣式] 帶我去遠方

我喜歡他的配色，但由於喜歡單調，就擅自把他的圖片去掉，在加上我的 Blog 字比較多，甚至帶有程式碼，所以我就又調整它，讓他支援寬螢幕，希望喜歡的人還是用用原版的風格！因為有網友在問我，所以就順手筆記一下，以免我自己也忘光。

首先很多面板的文章內容沒有調列式( ul 或 ol )，這主要是因為部落格旁邊的選單及項目也是用 ul 或 ol ，為了美觀就把它取消，但其實是可以個別設定的，基於需求，所以我有設定它，關於這部分也可以參考以前的筆記

• [CSS] 修改痞客幫樣版，讓文章內支援預設 ul, ol 清單樣式


• [CSS] 偷偷調整修改 Pixnet Blog 樣式風格

以下列出對這次面板修改的部分：

/*dl,dt,dd,ul,ol,li*/ { margin:0; padding:0; }

/*
ol,ul { list-style:none; }
*/

#container2 {
/*    width: 900px; */
    width: 96%;
}

#header {
    height: 50px;
/*
    height: 378px;
    background: url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/4a950ae67bc00.jpg) no-repeat;
*/
}

        #banner h2 {
/*
            width: 260px;
*/
            width: 400px;
        }

    #navigation {
        top: 55px; left: 0;
/*
        top: 383px; left: 0;
*/
    }

    .box {
/*        width: 263px; */
        width: 100%;
    }

#content {
/*    width: 620px; */
    width: 78%;
}

.article-head , .inner-box ul , .inner-box ol , .box-text ul , .box-text ol { list-style:none; margin:0; padding:0; } 

剩下的就只剩調調字型大小，只是每個面板設計不一樣，或許每一次都要客製化了？此例為：

.article-content {
/* font-size: 13px; */
font-size: 16px;
margin: 0px 0px 0px;
}
#banner h1 {
position: absolute;
bottom: 10px;
right: 0px;
z-index: 500;
width: 550px;
height: 30px;
line-height: 30px;
overflow: hidden;
font-family: "simhei";
/* font-size: 18px; */
font-size: 26px;
text-align: right;
}


.title {
font-family: "simhei";
/* font-size: 18px;  */
font-size: 22px;
line-height: 20px;
margin: 0px 0px 0px;
}