這一篇是要教大家如何跳脫制式的部落格首頁文章
圖一：一般部落格首頁文章都是這樣一篇一篇的........
缺點：若您的部落格時常放置大圖片與文字，會讓瀏覽者覺得一進到部落格有很亂的錯覺。
圖二：取自奇摩房地產的部落格首頁
特色：圖文式並列，簡潔明瞭，每一篇文章皆有各自圖片，讓瀏覽者自行選擇有興趣的文章，進入文章後則以原貌呈現。
範例：
CSS範例（此本部落格為例）：
/*----------------article--------------------------*/
.article{position:relative;margin:0px 0px 10px 0px;background:url(http://mail.8868.com.tw/~8868/blog/content-body-x.png) 0px 0px repeat-x;height:206px;overflow:hidden;}
.article-head{width:640px;_width:630px;background:url() 0px 20px no-repeat;position:relative;}
#article-main .article-head{_width:640px !important}
.publish{font:10px arial; color:#666; text-transform:uppercase; margin-bottom:0px;text-align:right;padding-top:1px;}
.title{display:block;position:absolute;top:30px;width:390px;_width:375px;padding:3px 5px 5px 20px;background:#D3F4F1 url(http://mail.8868.com.tw/~8868/blog/title-n.jpg) 5px 7px no-repeat;margin-left:240px;height:17px;overflow:hidden}
.title img{display:none}
.title a{font:15px arial bold; color:#653008;line-height:21px;}
.title a:hover{color:#333}
.article-body{position:absolute;top:30px;margin:0px 0px 10px 0px;padding:0px 5px;height:140px;width:630px;overflow:hidden;
background:url(http://mail.8868.com.tw/~8868/blog/content-body-pic01.jpg) 0% 0% no-repeat;line-height:160%; border-right:0px #ccc dotted;color:#3d959e; text-align:right}
.article-body a{color:#3d959e}
.article-body a:hover{color:#366}
.bookmark{margin:5px 5px}
.article-content{margin:31px 0px 20px 255px;height:63px;overflow:hidden;text-align:left; letter-spacing:0.05em; color:#444;border:0px #000 solid; font-size:12px; line-height:171%}
.more{position:absolute;top:100px;}
.article-content img{border:0px #ccc solid;margin-right:0px;width:240px;height:140px;overflow:hidden;position:absolute;top:0px;left:0px;}
#article-main #content{overflow:visible;}
#article-main .article-content img{border:0px #000 solid;float:none;width:auto;margin-right:0px;position:static;z-index:9}
.author{text-align:right;position:absolute;right:0px;_right:0px;padding-top:5px}/*XXX PIXNET 人氣 回響*/
.article-footer{margin:10px 0; line-height:160%; background:url(http://mail.8868.com.tw/~8868/blog/dot.if) repeat-x 0% 100%;color:#555}
.article-footer a{color:#888}
.article-footer a:hover{color:#333}
.refer{position:absolute;bottom:0px;}/*個人分類*/
.back-to-top{text-align:right;display:none}
.back-to-top a{text-transform:uppercase; font:11px CEntury Gothic; padding:2px 3px; color:#ccc}
/*---------------------#article-main-------------------------*/
#article-main .article{position:relative;margin:0px 0px 10px 0px;background:url() 0px 0px repeat-x;height:auto;overflow:visible}
#article-main .article-head{width:640px;_width:620px;background:url(http://mail.8868.com.tw/~8868/blog/title.jpg) 0px 20px no-repeat;position:relative;}
#article-main .publish{font:12px arial; color:#666; text-transform:uppercase; margin-bottom:0px;text-align:right;padding-top:12px;}
#article-main .title{display:block;position:static;width:auto;padding:10px 0px 0px 5px;min-height:27px;_height:27px;background:none;margin-left:0px;height:auto;overflow:visible}
#article-main .title a{font:15px arial bold; color:#653008;;line-height:21px}
#article-main .article-body{position:static;margin:0px 0px 0px 0px;padding:0pxpx;height:auto;width:auto;overflow:visible;background:none}
#article-main .bookmark{margin:5px 5px}
#article-main .article-content{margin:0px 0px;height:auto;overflow:visible;}
#article-main .article-content img{border:0px #000 solid;float:none;width:auto;height:auto;overflow:visible;margin-right:0px;position:static;z-index:9}
#article-main .author{position:static;padding-top:0px}/*XXX PIXNET 人氣 回響*/
#article-main .refer{position:static}/*個人分類*/
/*---------------------end----#article-main----------------*/
說明：
首先，CSS可先分為兩部份，一是首頁文章的呈現，二是進入文章的完整呈現。
其中，#article-main為進入文章後的選擇器，所以在我們設定完首頁文章的排版，必須再使文章單篇的設定回復到初始值。
舉例來說，假如我們想要在首頁時讓每一篇文章為黑底背景，強制設定高度為200px
.article{background:#000;height:200px}
但我們欲在進入文章後，背景更改為白底，並且高度自動化，則必須再加一行：
#article-main .article{background:#fff;height:auto}
如此才能區分首頁文章（包含分類首頁）與進入文章後的css設定。
進階修改：
.article{}/*每一篇文章的整個框*/
這邊小編設定了寬度、高度與背景圖片，還有先設定了相對定位
這可以讓整篇文章內的絕對位置以他為基準，這樣就能自由調整文章標題或是文章日期等細部設定的位置。
.publish{}/*文章日期*/
.title{}/*文章標題*/
.article-body{}/*文章內容主框*/
.article-content{}/*純文章文字*/
.article-content img{}/*文章圖片，使用絕對定位在左上角，如article有放預設顯示圖片，則可遮蓋住預設圖。*/
直接套用：
複製以上的CSS，更改藍字部份圖片大小，及預設圖片網址。
有任何問題可以提出來唷！
留言列表
最新消息 (2)
