Je t'aime

今天無聊拿回這個樣式修改一下，才發現痞客改了很多地方
因為以前做的樣式都是無名版本的，現在都被我淘汰了（爛的東西不用也罷）
所以我將要把之前分享的樣式來個大回收，收完之後就來個大放送

第一彈先來個黑白豬（痞客版）
因為我是豬be寶貝咩（哞太太是醬稱呼我）
原來這個樣式是2007年做的，日子過得真快，老娘又老了/口\
這次回來重新把樣式分享並沒有啥要求啦，只要大家喜歡就行了
**反正都防止不到那些手殘腦殘的小人，倒不如毫無條件的分享吧

套用樣只有幾個步驟，非常簡單，有不懂的地方可以在這篇文章留言問我
但是記得留下你的家的網址，好等我可以到你家看一下有啥問題出錯
使用悄悄話功能的先請登入痞客帳號才留言，否則我回覆了你也看不到喔

首先模版選擇這一欄記住要（痞客模版）不然套用後就會跑框的啦

進入管理後台 >> 部落格 >> 樣式設計精靈 >> CSS原始碼編輯 >>

把以下CSS語法放入 >> 儲存（CTRL+S）

厭麻煩的話可以直接去後台找（插畫 / 卡通）黑白豬（痞客版）套用喔！

樣式預覽圖

/*----------------------------------------------------------- 黑白豬痞客模版 2007 / 09 / 28 *作者: Hebie *網址: http://hebie.pixnet.net/blog/ *IE FF 1024x768，二欄式痞客模板 -----------------------------------------------------------*/ /*reset-star*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } pre{ font-size: 1em ; } .article-content{ _height: 1% ; overflow: hidden ; _overflow: none; } .article-content p { margin-bottom: 1em; } /*reset-over*/ html { overflow-x:hidden; } body { font-size: 12px; font-family: "verdana"; letter-spacing: 1px; color: #333; line-height: 180%; background: #edefe6; } br { letter-spacing: 0px } a { color: #000; text-decoration: none; } a:hover { color: #fff; } /*body-div*/ #body-div { width: 760px; margin: 10px auto; } /*authority*/ #authority { position: relative; } a#newpost, a#backstage { display: block; width: 125px; height: 35px; font-size: 0px; text-indent: -5000px; } a#newpost { position: absolute; top: 100px; left: 506px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838623.png) no-repeat 0px 0px; } a#backstage { position: absolute; top: 100px; left: 631px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838623.png) no-repeat -125px 0px; } a#newpost:hover { background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838622.png) no-repeat -501px 0px; } a#backstage:hover { background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838622.png) no-repeat -626px 0px; } /*container*/ #container { margin: 0px auto; width: 760px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190839939.png) repeat-y; } /*header*/ #login-bar { height: 15px; line-height: 15px; text-align: right; color: #aaa; background: #edefe6; padding: 0px 10px; } #login-bar a { color: #555; } #banner { position: relative; height: 70px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838618.png) no-repeat; padding: 15px 0px 0px 230px; } #banner h1 a { font-size: 16px; line-height: 20px; color: #000; font-weight: bold; padding-left: 70px; } #banner h1 a:hover { color: #fff; } #banner .skiplink { position: absolute; top: -15px; left: 10px; width: 100px; height: 15px; line-height: 15px; } #banner .skiplink a { color: #666; } #banner h2 { position: relative; top: 30px; left: 25px; width: 380px; height: 30px; overflow: hidden; line-height: 20px; color: #fff; } #banner #blog-category { position: absolute; right: 10px; bottom: 0px; height: 20px; line-height: 20px; color: #333; } #banner #blog-category a { color: #fff; } #banner #blog-category a:hover { color: #333; } #navigation { width: 750px; height: 35px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838621.png) no-repeat; margin: 0px auto; } #navigation li { float: left; } #navigation li a { display: block; width: 125px; height: 35px; font-size: 0px; text-indent: -5000px; } #link-album a:hover { background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838622.png) no-repeat 0px 0px; } #link-blog a:hover { background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838622.png) no-repeat -125px 0px; } #link-guestbook a:hover { background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838622.png) no-repeat -250px 0px; } #link-profile a:hover { background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838622.png) no-repeat -375px 0px; } /*main*/ #main { background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838616.png) no-repeat top; padding: 160px 5px 10px 5px; _height: 1%; overflow: hidden; _overflow: none; } /*content*/ #content { float: right; width: 500px; margin: 65px 10px 0px 0px; _margin: 65px 5px 0px 0px; } #spotlight { margin: 0px 0px 15px 0px; } #spotlight h5 { display: none; } #spotlight-text { line-height: 20px; border-bottom: 1px dashed #fff; margin: 20px 10px; } .article { background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838753.png) repeat-y; margin: 15px auto; } .article-head { height: 60px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838752.png) no-repeat; padding: 0px 0px 0px 50px; } .publish { font-family: "verdana"; font-size: 18px; font-weight: bold; letter-spacing: 0px; line-height: 24px; color: #fff; } .article-head h2 a { font-size: 13px; } .article-body { width: 470px; overflow: hidden; color: #333; margin: 0px auto; } .more { height: 25px; } .more a { float: right; display: block; width: 77px; height: 22px; font-size: 0px; text-indent: -5000px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838755.png) no-repeat; } .bookmark { text-align: right; padding: 5px 0px; } .bookmark span { display: none; } .author { text-align: right; color: #000; border-top: 1px dashed #fff; padding: 5px 0px 0px 0px; margin: 5px 0px 0px 0px; } .author a { color: #999; } .author a:hover { color: #fff; } .forward { text-align: right; color: #000; padding: 0px 0px 0px 0px; } .forward a { color: #999; } .forward a:hover { color: #fff; } .refer { width: 470px; text-align: left; line-height: 20px; color: #fff; border-top: 1px dashed #fff; padding: 5px 0px 0px 0px; margin: 5px auto 0px auto; } .refer a { color: #555; } .refer a:hover { color: #fff; } .history { width: 470px; text-align: left; line-height: 20px; color: #fff; padding: 0px 0px 5px 0px; margin: 0px auto 0px auto; } .history a { color: #fff; } .history a:hover { color: #000; } .back-to-top { height: 25px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838754.png) no-repeat bottom; padding-top: 10px; } .back-to-top a { float: right; display: block; height: 24px; width: 70px; font-size: 0px; text-indent: -5000px; } /*list*/ .main-list table { width: 95%; margin: 20px auto; } .main-list table th, .main-list table td.list-num { font-size: 0px; color: #c8c8c8; } .main-list table td { color: #fff; border-bottom: 1px dashed #fff; padding: 3px 0px; } .main-list table td a { color: #444; } .main-list table td a:hover { color: #fff; } /*post*/ #trackback-url input { height: 20px; font-size: 12px; font-family: "verdana"; letter-spacing: 1px; vertical-align: middle; color: #000; border: 1px solid #eee; background: #fff; padding: 0px 3px; } input#trackback-input { height: 18px; } h3#trackback-title { height: 25px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190840224.png) no-repeat 0px 0px; } h3#comment-title { height: 25px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190840224.png) no-repeat 0px -25px; } h3.user-post-title img, h3.user-post-title span { display: none; } .post-comment { _height: 1%; overflow: hidden; _overflow: none; } .post-comment a { display: block; width: 70px; height: 70px; font-size: 0px; text-indent: -5000px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838756.png); margin: 0px auto; } .single-post { width: 410px; background: #fff url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838758.png) no-repeat bottom; color: #000; padding: 0px 0px 30px 0px; margin: 20px 20px; _height: 1%; overflow: hidden; _overflow: none; } .single-post li {} li.post-info { height: 40px; line-height: 20px; font-size: 10px; text-align: left; color: #000; background: #c8c8c8 url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838757.png) no-repeat bottom; padding: 10px 20px 0px 0px; } li.post-info a { font-size: 12px; font-family: "verdana"; color: #000; background: #555; } li.post-info a:hover { color: #999; background: none; } li.post-info a img { width: 8px; height: 8px; visibility: hidden; } li.post-info a.user-name, li.post-info a.reply-message {background: none; } #comment-title img, .post-info span.post-time, .post-info img.pixnet-user, .post-info .user-ip, .post-info img.hidden-message, #comment-box .single-post.secret{ display: none; } li.post-photo { float: left; width: 100px; text-align: center; padding: 5px 0px 10px 0px; } li.post-photo img { border: 1px solid #fff; } li.post-text { width: 290px; float: right; color: #666; padding: 5px 5px 0px 0px; } li.post-text p {display: none; } li.post-text p img { display: none; } li.reply-text { clear: both; color: #000; border-top: 1px dashed #999; padding: 10px 0px 0px 0px; margin: 0px 10px; } li.reply-text p {display: none; } li.reply-text p a { display: none; } #comment-form p { color: #000; text-align: right; margin: 0px 0px 0px; } #comment-form table { width: 100%; border: none; } #comment-form table tr.comment-form-title { display: none; } #comment-form table td { vertical-align: top; border: none; padding: 3px 5px; } #comment-form table th { color: #999; vertical-align: top; width: 80px; border: none; padding: 3px 5px; } #comment-form table th font { display: none; } #comment-form input.radio { width: 15px; border: none; } #comment-form input#send-comment { width: 50px; height: 21px; color: #999; border: 1px solid #ccc; background: #eee; } #comment-form input#blogcommenttext_name { width: 90%; } #comment-form input { width: 97.5%; height: 18px; font-size: 11px; border: none; border-bottom: 1px solid #bbb; background: none; } #comment-form textarea { width: 97%; height: 100px; font-family: "verdana"; font-size: 11px; color: #333; line-height: 18px; border: 1px solid #ccc; background: #fff; padding: 1%; } /*links*/ #links { position: relative; float: left; width: 240px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190840894.png) repeat-y; margin: 55px 0px 0px 0px; word-break: break-all; } #links-row-2 { min-height: 20px; _height: 20px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190841139.png) no-repeat bottom; padding: 0px 0px 15px 0px; } .box { width: 210px; padding: 0px 5px; margin: 0px auto; } .box-title { height: 40px; line-height: 40px; text-align: left; font-weight:bold; color: #000; border-bottom: 1px solid #fff; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1185462235.gif) no-repeat left; padding: 0px 0px 0px 50px; margin: 0px 0px 10px 0px; } .box-text { color: #999; line-height: 18px; margin: 0px 0px 10px 0px; } .box-text a { } .box-more { clear: both; text-align: right; } .box-more a { color: #999; background: none; padding: 2px 3px; } .box-more a:hover { color: #000; background: none; } #murmur { position: absolute; top: -207px; left: 90px; width: 225px; height: 120px; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190838620.png) no-repeat; padding: 0px; } #murmur .box-title { display: none; } #murmur .box-text { width: 155px; color: #000; margin: 7px 0px 0px 60px; } #murmur .box-text ul { height: 80px; overflow: hidden; line-height: 16px; } #murmur .box-text ul li.murmur-time { font-size: 10px; color: #fff; } #murmur .box-more { text-align: right; margin: 3px 3px 0px 0px; } #murmur .box-more a { color: #555; background: #eee; padding: 2px 3px; } #murmur .box-more a:hover { background: none; } #calendar table { width: 85%; margin: 0px auto; } #calendar table th, #calendar table td { color: #888; text-align: center; line-height: 18px; background: none; padding: 2px; } #calendar table td a { display: block; color: #000; background: #eee; padding: 2px; } #calendar table td a:hover { color: #000; background: #eee; } #broadcast ul { clear: both; border-bottom: 1px solid #fff; background: none; padding: 5px; } .broadcast-photo { float: left; } .broadcast-time { float: right; width: 155px; } .broadcast-time a { color: #000; display: block; } .broadcast-text { clear: both; } .broadcast-text a { display: block; width: 99%; } #headshot .box-text { _height: 1%; overflow: hidden; _overflow: none; } #headshot-img { float: left; width: 130px; height: 90px; text-align: center; } #friend-apply, #send-message { float: right; width: 80px; text-align: left; } #friend-apply { margin-top: 15px; } #latest-comment {} #latest-comment .box-text a , #subscription .box-text a , #latest-trackback .box-text a { display: block; width: 99%; } #visitor {} #visitor .box-text ul { _height: 1%; overflow: hidden; _overflow: none; } #visitor .box-text ul li { float: left; margin: 0px 4px 0px 0px; } #visitor .box-text ul li img { width: 35px; height: 35px; border: 1px solid #fff; } #favorite .box-text { height: 30px; } #favorite .box-text select { position: absolute; font-size: 12px; font-family: "Arial"; width: 350px; clip: rect(2px 208px 18px 2px); } /*footer*/ #footer { clear: both; height: 43px; line-height: 18px; text-align: left; color: #666; background: url(http://p3.p.pixnet.net/albums/userpics/3/1/232931/1190861351.png) no-repeat; padding: 7px 0px 0px 20px; } #footer a { color: #000; } #footer a:hover { color: #fff; }