之前做了一款以大BANNER為主的樣式 - Change Photo
因為期間痞客邦有更新一些新的功能,
再加上之前的樣式有一些我想更新的地方,
所以重新做了同樣可以更改大BANNER的樣式,
應該也是今年我發表的第一個樣式哦
名子叫WIND,因為想不到用什麼名子好XD
剛好拍下這張照片的時候有微微涼風~~
真的很舒服,連帶著心情也好起來>///<
所以就叫做WIND了!
另外與前版一樣,
這是可以輕易修改大圖片以及文章寬度、側欄寬度的樣式
還有很細微的地方也可以更改,更改位置我都標注在CSS裡囉!
與前版不一樣的地方大概是這次多加了圓角,
還有把配色改為稍微舒服一點的淡色系,
不過如果覺得字太淡,也可以在CSS內做修改(常用的位置我都有做中文注解)
雖然CSS內已經有注解,
不過下面還是稍微介紹一下幾個常用的CSS修改
(這裡介紹的方法僅限於這個樣式哦!)
修改大圖片:
修改大圖片的CSS是以下這段,
修改圖片網址還有圖片寬高就可以喔!
#banner{
background:url(http://pic.pimg.tw/paula3844/f376415c7087a50fb9b8eb5c9e67fca0.png) no-repeat left top; /*若要修改大圖片,修改此段內的網址即可*/
width:880px; /*大圖片的寬度*/
height:415px; /*大圖片的高度*/
border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
}
修改文章與側欄寬度:
如果覺得文章與側欄寬度不夠你使用,
可以照以下兩個步驟做修改
1.先修改想要的文章與側欄寬度
文章寬度請先找到#content
之後找到#content{}之內的width,如以下
修改數值即可
width:680px;/*文章區塊的寬,側欄與文章區塊相加不能超過整個部落格大小*/
側欄寬度請先找到#link
之後找到#link{}之內的width,如以下
修改數值即可
width:180px;/*側欄區塊的寬,側欄與文章區塊相加不能超過整個部落格大小*/
2.文章與側欄寬度修改完後,修改整個部落格的寬度
先找到#container
之後修改#container{}內的width,如以下
width:880px; /*整個部落格大小*/
*整個部落格大小的寬度=文章寬度+側欄寬度+20
最後希望大家會喜歡這個樣式啦^^~
照著CSS內的注解更改應該可以改蠻多地方,可以再摸索~
最近天氣好冷,大家要注意保暖哦~~
點我前往下載樣式
*最近我分享樣式的空間好像有點怪怪,如果點不進去,多重新整理幾次應該可以^^
留言列表
Sim3 (9)