一直以來不太喜歡部落格版面和人撞衫,也愛好創作出屬於自己的風格,找到更順暢而便利的使用版面,因此總不惜艱難與CSS纏鬥。每到不同系統建立一個新格,就要上演一次,因為那密密麻麻的文字,不是一下子就能摸得透的。只能一試再試或者上網爬文,慢慢找出調整的技巧。

然而,網路上不易找到一篇完整而詳盡的痞客邦CSS介紹,以致耗費許多寶貴的時間。正逢近日大批部落客湧向痞客邦之際,惠子彙整了多年來對CSS的了解和大家交流。也許還因此獲到高手們的指導,解決當前不解的難題呢!若有錯誤之處也請不吝指教,讓這篇文章更臻完善。

 

痞客邦 pixnet 進入CSS的方法:

理後台/樣式選擇/篩選可供修改的樣式/選好版面後/自訂樣式/CSS原始編碼/前往 

 

提醒幾個技巧:

☆ 為了避免修改失敗而不慎覆蓋了原來的程式,建議修改前先copy 當前的CSS 另存至word檔。

(copy方式:游標移至CSS任一處/編輯/全選/複製/開啟word空白頁/貼上/存檔)

可把要置換掉的圖片網址另開IE貼上,先檢查是否為正確位置。

點選要修改的位置時容易跳開,往下再拉即可看到剛選定的位置。

改變設定後先點預覽,若符合則按存檔,若不符合請點回CSS原始編碼不要儲存。

每個指令間要以區隔

圖片來源:網路搜尋網頁素材、插圖、可愛圖、背景圖...都可以

 幾個較常修改的語法:

#content{ left   文章靠左,連結列就會在右側

a:a {color:#692c14; text-decoration:none} 字體顏色 / 隱藏底線

(我常參閱無名樣式小幫手的色碼表,有時不一定

換了會比較協調,換前最好把原來的色碼抄下來。)

a:hover {color:#000;} 滑鼠點到時改變的顏色 

font-size:13px 文字的大小

line-height 文字行距的高度 width 寬度 

font-weight:bold 粗體字 

letter-spacing: 1px 字體間距

center 位置置中 ( left . right)

repeat 上下左右都重覆  no-repeat 不重覆  repeat-x 左右重覆  repeat-y 上下重覆

padding:0px 10px 20px 0px (margin:20px 0 0 8px) 上下左右的距離,並非照此順序,要觀察數字改變後版面的變化。

padding-top (bottom.left.right):10px (margin-top:10px) 直接指定某點距離

border: 8px solid #fff   加白框 如頁首圖

border-bottom: 1px solid #ddd 加分隔線 (一般用在文章末或文章區塊和連結列之間 bottom 則改為 right )

background:#ffe5df 背景的顏色

background:url( ) 背景圖,括弧內貼上網址,需為該張照片按滑鼠右鍵內容裡的網址,至今我還弄不懂若用痞客邦相簿裡的照片要用那個網址,因沒試成功過,索幸把要用的圖片原檔案都上傳到flickr 免費空間,畫質好又有大小尺寸可供選擇。通常括弧後方還接 no-repeat repeat-y

display: none 隱藏之意

隱藏廣告的方法請看這位格友的詳細介紹  

 

 

妹妹頁首圖-2.bmp   

 

套此樣式變更後如下圖,CSS 就是下方全文。

 

妹妹頁首圖-1.bmp 

別小看它看來差不多,其實位置、線條、圖案、文字... 

都頗費心思修改而成,原蛋糕圖太大, 

還用Photo仿刷塗去一些,此圖方能覆蓋。

沒有實際操作,您一定不會了解箇中的道理,

只要勇於嘗試,您一定會發現樂趣和成就感。 

祝您 改版順利, 加油!

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

以下是我在它格目前使用的版面 CSS

最大的問題是連列等諸多地方字體太小,

始終改不過來,盼得解藥中,

也特別指出您可能會修改的地方 。

/*--------------------------reset*/

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;}

/*a:focus { -moz-outline-style: none; }*/

br{letter-spacing: normal;}

/*--------------------------all setting*/ 

HTML {

      SCROLLBAR-FACE-COLOR: ;

      SCROLLBAR-HIGHLIGHT-COLOR: ;

      SCROLLBAR-SHADOW-COLOR: ;

      SCROLLBAR-3DLIGHT-COLOR: ;

      SCROLLBAR-ARROW-COLOR: ;

      SCROLLBAR-TRACK-COLOR: ;

      SCROLLBAR-DARKSHADOW-COLOR: ;

      overflow-x:; } 

整個頁面貼上背景圖:

body { background:url(); font-family:Arial, Helvetica; color:#91401e; letter-spacing:1px;}

#blog-main{}

#article-main{} 

a {color:#692c14; text-decoration:none;}

a:hover {color:#000;} 

#body-div{} 

 

發表新文章/管理後台列

/*--------------------------authority*/

#authority{text-align:center;color:#de403f; font-size:13px; line-height:30px;z-index:999;background:#fff;}

#authority a{ color:#de403f; margin-right:15px; padding:2px 10px; border:1px #de403f solid; background:#ffe5df; }

#authority a:hover{ background:#ae1515; color:#fff;}

#authority a#newpost {}

#authority a#backstage {}

 

所有內容區塊

/*--------------------------container*/

#container{}

#container2{width:980px; background:url() repeat-y; position:relative; margin: 0 auto; padding:0 10px;}

#container3{}

 

頁首圖

/*--------------------------header*/

#header{ height:347px;position:relative; background:url() no-repeat;}

 

登入等那一排

#login-bar{ font-size:13px;text-align:left; padding-top:280px; padding-left:500px;color:#de403f;}

#login-bar a {color:#de403f;} 

#banner{ position:absolute; top:50px; left:400px;}

#banner h1 { margin:0; font-family:"微軟正黑體";font-size:25px;font-weight:bold;margin-bottom:5px;}

 

部落格名稱

#banner h1 a{ color:#ae1515;}

#banner a:hover {color:#0099cc;} 點到改變顏色

 

部落格描述

#banner h2{ margin:0;font-size:13px;color:#de403f; line-height:18px; width:500px;top:70px;}

#banner .skiplink {display: none;}

 

全站分類

#banner #blog-category{ font-size:13px;clear:both; color:#de403f;padding-top:45px; }

#banner #blog-category a{ color:#de403f;} 

 

相簿/部落格/留言板/名片

/*--------------------------navigation*/

#navigation{}

#navigation li{ font-size:18px; float:left;display: inline; margin-right:3px;height:24px;}

#navigation a{width:100%; height:100%;display:block; text-indent:-9999px;} 

#navigation #link-album{width:55px; height:20px; position:absolute; left:617px; top:195px;}

#navigation #link-blog{width:75px; height:20px; position:absolute; left:690px; top:195px;}

#navigation #link-guestbook{width:75px; height:20px; position:absolute; left:790px; top:195px;}

#navigation #link-profile{width:55px; height:20px; position:absolute; left:890px; top:195px;} 

 

文章及連結列區塊背景 (如不要白底則刪掉#fff)

/*--------------------------main*/

#main{_height: 1%;
 overflow: hidden;
 _overflow: none;
 line-height: 150%;
 background:#fff  url() repeat-x top;
  border-top: none;
 padding: 40px 0px; (40表示頁首圖和文章區塊之間隔)

}

 

文章 

/*--------------------------content*/

#content{

      overflow: hidden;width:660px; float: left;margin:-20px 0 0 8px;display:inline;position:relative; z-index:9999;      }

 

公告區

#spotlight{background:url() no-repeat;center }

#spotlight h5{ font-family:"微軟正黑體"; font-size:18px; color:#b51718; background:url() top left no-repeat;height:30px; padding-left:370px; padding-top:px;}

#spotlight-text{padding-left:360px;padding-top:20px;padding-bottom:px;background:url(http://farm8.staticflickr.com/7284/9737995249_4dc18122a7_o.png) bottom no-repeat; font-size:14px;color:#0099cc}

 

文章區

#article-area{}

#article-area .article-area-title { font-size:13px;margin-top:10px;padding: 0 10px;}

#view-mode {font-size:13px;margin-bottom:10px;padding: 0 10px;}

#display{margin-bottom:10px;}

#display SPAN {}  

#article-box{}

.article{ margin-bottom:20px; padding-bottom:0px;background:url() bottom no-repeat;} 

 

文章頁首

.article-head{background:url() left bottom no-repeat; height:60px; position:relative;color:#b51718;}

.publish { font-size:0.7em; color:#fff;}

 

文章日期

.day, .time {display:none;}

.year { position:absolute; top:10px;right:30px;color:#b51718;}

.month {position:absolute; top:10px;right:68px;color:#b51718;}

.date {position:absolute; top:10px;right:105px;color:#b51718;}

 

文章標題

.title{background:url() no-repeat;font-family:"微軟正黑體"; font-size:18px; color:#b51718;padding-left:50px;padding-top:10px; margin-left:20px;}

.title a{ color:#b51718;}

 

文章內容 (10px意指文字從左邊算起10px開始,就不會貼著邊邊)

.article-body{ line-height:20px;margin:0;font-size:13px;padding: 0 10px;background:url() repeat-y;}

.article-content{line-height:25px;}  

.bookmark{font-size:13px; text-align:right;}

.author , .author a{ font-size:13px; margin-top:10px; text-align:right;}

 

繼續閱讀靠左或右也可加圖

.article-content .more a {background:url() no-repeat;text-align: right; padding right:50px;color:#b51718;}

 

文末加分隔線

.article-footer{ font-size:13px;background:url() repeat-y;padding: 0 10px;border-bottom: 1px solid #ddd;}

.history{ } 歷史上的今天,如要隱藏則顯示為 { display: none; }

 

 

 

.refer{}  文章分類

 

.google-adsense ,.forward ,.fans-club {font-size:13px;}

.back-to-top{text-align:right;}

 

文章列表

/*--------------------------list*/

.main-list{}

.main-list table{ width:100%; font-size:13px;margin:10px auto;}

.main-list h3 {}

.main-list th{ padding:5px 0; color:#b51718; font-weight:bold;}

.list-num{ width:40px; text-align:center;}

.list-date {width:120px; text-align:center;}

.list-title{}

.main-list td{ padding:5px;}

#content .main-list a{}

 

回應

/*--------------------------post-box*/

.user-post-box{font-size:13px;margin:5px; padding-bottom:20px;}

.user-post-title{padding:8px;color:#fff; font-weight:bold;font-size:1em;background:#fc8f8f;

      -khtml-border-radius:5px; -moz-border-radius:5px;

      -webkit-border-radius:5px;}

#trackback-box .user-post-title{}

#comment-box .user-post-title{} 

.post-comment{ text-align:center;margin:2px 0px;padding:10px; margin:5px 0;background:#ffb5b5;

      -khtml-border-radius:5px;

      -moz-border-radius:5px;

      -webkit-border-radius:5px;}

#content .post-comment a{ color:#fff;line-height:18px; width:100%; height:100%; display:block;} 

.single-post{padding:8px; position:relative;_height:90px;min-height:90px;background:#fff;

      -khtml-border-radius:5px;-moz-border-radius:5px;

      -webkit-border-radius:5px;margin:5px 0;}

 

迴響者資訊

.post-info{ color:#333;}

 

迴響者的大頭貼

.post-photo{ float:left; margin-right:5px; display:inline; margin-top:10px;}

.post-photo img { width:50px; height:50px; border:3px #fc8f8f solid;}

.post-text{ margin-top:10px; margin-bottom:10px;}

 

版主回覆內容

.reply-text{ clear: both; padding:10px; color:#666; background:#efefef;

      -khtml-border-radius:5px;

      -moz-border-radius:5px;

      -webkit-border-radius:5px;}

 

版主回覆資訊

.reply-text p{ color:#666; margin-top:10px;}

.single-post.secret{}

.single-post.secret .post-text{float: none;width: auto;      }

 

引用

#trackback-box {}

#trackback-box h3 {}

#trackback-box SPAN {}

#trackback-box #trackback-url{padding:10px; margin:5px 0;background:#fff;

      -khtml-border-radius:5px; -moz-border-radius:5px;

      -webkit-border-radius:5px;}

#trackback-box input#trackback-input{}

#trackback-text { }

#trackback-text .post-info {}

#trackback-box .post-text{width:auto ; float:none ;}

 

回應區

/*--------------------------comment-form */

#comment-form {margin: 10px auto;}    

#comment-form p {color: #fc8f8f;text-align: right;margin: 0px 10px 5px;}

#comment-form table {width: 100%;border: none;}

#comment-form table tr.comment-form-title { display: none; }

#comment-form table td {color: #fc8f8f;vertical-align: top;border: none;padding: 2px 5px;}

#comment-form table th {color: #fc8f8f;vertical-align: top;width: 100px;border: none;padding: 2px 5px;}

#comment-form table th font { display: none; }

#comment-form input {height: 17px;font-family: Arial;font-size: 13px;color: #fff;border: none;  background: #fc8f8f;}

#comment-form input.radio {border: none; width: auto;      background: none;margin:0; padding:0;}

#comment-form input#blogcommenttext_name{width: 85%;}

#comment-form input#send-comment{border:0;width: 80px;}

#comment-form textarea {width: 99%;height: 90px;font-family: Arial;font-size: 13px;line-height: 18px;border:none;color: #fff;background: #fc8f8f;}    

   

/*--------------------------pages*/     

.page{ font-size:13px; height:30px; text-align:right; margin-top:20px; padding-top:5px;}

.page a{padding:0px 5px; color:#666; margin-right:5px;}

.page SPAN,.page a:hover{ background:#fc8f8f; padding:2px 5px; color:#fff;}

 

連結列

/*--------------------------links*/

#links{overflow: hidden; width:280px; float:right;display:inline;padding-bottom:25px; margin-right:30px;background:url() bottom no-repeat;color:#de403f;}

.box-text a {color:#8c1516;}

#links-row-1{background:url() repeat-y;}

#links-row-2{background:url() repeat-y;}

 

.box{}

連結列標題

.box-title{height:40px; padding-top:12px;padding-left:100px;background: url() no-repeat ; }  

.box-title{margin:0px 10px 0 60px;font-size:1em; color:#b51718;font-family:"微軟正黑體";   padding-left:40px;}

 

連結列內容

.box-text {font-size:13px; line-height:18px; padding:30px; padding-top:5px; color:#de403f;}

.box-text a:hover {color:#0099cc;}

.box li{}

.box h6{}

.box-more{margin-top:5px;}

 

#headshot{}

#headshot ul{overflow: hidden;_overflow: none;_height: 1%;}

#headshot li{}

#headshot li#headshot-img{ float:left; margin-right:20px;}

#headshot li#friend-apply{ display:block; margin-top:20px;}

#headshot li#send-message{ display:block;} 

#recent-article{}

#recent-article img{}  

#latest-comment {}

#latest-comment a{}

#latest-comment span{}  

#calendar{}

#calendar table{ width:100%;}

#calendar th{color:#de403f; padding:2px;text-align:center; font-weight:bold;}

#calendar th a { color:#de403f;}

#calendar td{ color:#de403f; padding:2px;text-align:center;}

#calendar .calMonthHeader{ text-align:center; width:150px;}

#calendar td b { color:#de403f;}

#calendar td a{ color:#fff;background:url) no-repeat center; padding:2px 6px; font-size:11px;} 

#murmur{}

.murmur-time{}

.murmur-text{} 

#visitor,#crumb{}

#visitor ul,#crumb ul{overflow: hidden;_overflow: none;_height: 1%;}

#visitor li,#crumb li{float:left; display:inline; margin-right:3px; margin-bottom:5px;}

#visitor li img,#crumb li img { border:1px #888 solid; width:40px; height:40px;}

#visitor .box-more{} 

#broadcast{}

#broadcast ul{overflow: hidden;_overflow: none;_height: 1%;margin-bottom:10px;}

#broadcast li{}

#broadcast .broadcast-photo{ float:left; margin-right:5px; display:inline;}

#broadcast .broadcast-time{}

#broadcast .broadcast-time a{}

#broadcast .broadcast-time span{}

#broadcast .broadcast-text{} 

#search{}

#search .box-title{display:none;}

#search .box-text{padding:0;}

#search input#search-target{position:absolute; top:15px; left:690px; border:none; background:none;height:20px; width:195px;}

#search input#search-submit{position:absolute; top:15px; left:900px;border:none; background:none;text-indent:-9999px; cursor:pointer;width:50px;} 

#feed {}

#announce{}

 

熱門文章

#hot-article {}

 

category {}

#category h6{}

#category li{}

#category .box-more {} 

#archive{}

#archive select {}

#archive li a{}

 

最新迴響

#latest-trackback {}

#latest-trackback a{}

#latest-trackback span{}

 

#subscription{}

#subscription a{}

#subscription span{}

 

#favorite {}

#favorite select {}

 

#mylink {}

#mylink .link-box{}

#mylink .link-box h6{}

#mylink .link-box li{}

 

參觀人氣

#counter{}

#counter SPAN{}

 

自訂欄位

.folder{}

.folder .box-title{}

.folder .box-text{} 

#powered{}

 

頁尾

/*--------------------------footer*/

#footer{

      clear:both; text-align:center; padding-top:15px; margin-top:50px;}

#footer a {}

#footer p{ line-height:22px; font-size:13px;}

#bottom {clear:both; text-align:center; line-height:22px; font-size:13px; padding-bottom:15px;}

 

惠子 發表在 痞客邦 留言(19) 人氣()