☼ 歡迎光臨!麻煩把跟文章無關的留言(或問題)留在留言板,請勿用注音文,謝謝。科學相關文章或交流歡迎到臉書頁(見右欄)。
終於把「迴響列表」的部份研究了一下。

我試了兩個模板:grey 和grey2

grey 的部份,樣式是用CSSstyle 的raindrop。
grey2 的部份,樣式是noon,不過現在好像不在「樣式選擇」裡了,找不到,也不知道作者是誰。

先看grey 的好了。



完整語法如下:

/*回應*/
#Comments {
width: 600px;
margin: 20px 0px 50px 50px;
}

/* 迴響列表(標題) */
.commentTitle {
color: #400040;
font-size: 14px;
font-weight:normal;
padding-left:20px;
background:url(http://p2.p.pixnet.net/albums/userpics/2/1/225821/1164150905.gif) left top no-repeat;}

/* 發表留言(連結) */
.commentTitle a{color:#808080;font-size:14px;font-weight:normal;}

/* 回應內容區塊 */
.commentcontent {
color: #000000;
font-size: 12px;
padding-top: 50px;
}

/* 回應者資料 */
.commentposterinfo {
color: #808080;
font-size: 12px;
padding-bottom: 5px;
margin-bottom: 60px;
border-bottom: dashed 1px #ACACD7;
}

.commentposterinfo br{display:none;}


補充一下,這個樣式的commentheader 和commentheader img 隱藏了。

再來看grey2 的。



可以看出兩者的區塊分隔法不一樣。



grey2 的完整語法:

.CommentBox {
padding:10px;
}

.CommentInnerBox {
margin: 10px;
}

.CommentInnerBox p {
padding: 0px 5px 0px 5px;
font-size:12px;
}

.commentheader {
text-align: left;
background-repeat:no-repeat;
background-image:url('http://p2.p.pixnet.net/albums/userpics/2/1/225821/1164150905.gif');
background-position: 3% 50%;
padding: 2px 20px 2px 20px;
}


/*留言者資料*/
.commentposterinfo {
text-align: right;
padding: 2px;
}


我在CommentInnerBox p 的部份加入背景為粉紅色的語法,就出現如上圖所示,裡面包括了commentheader (紫色框框) 和commentposterinfo (橘色框框) 兩個區塊。我試了在CommentBox 的地方加入背景顏色,但是卻顯示不出它的區塊,無法理解。

下面,我把commentheader  和commentheader img 隱藏(圖中藍色字體為隱藏語法),然後加入commentTitle 的語法。



更改過後的語法如下:

/* 迴響列表(標題) */
.commentTitle {
color: #400040;
font-size: 14px;
font-weight:normal;
margin-left:20px;
padding-left:20px;

background:url(http://p2.p.pixnet.net/albums/userpics/2/1/225821/1164150905.gif) left top no-repeat;}


.CommentBox {
padding:20px;
}

.CommentInnerBox {
margin: 40px;
}

.CommentInnerBox p {
padding: 0px 5px 0px 10px;
font-size:12px;
}

/*留言者資料*/
.commentposterinfo {
text-align: right;
padding: 2px;
}


深藍色字體為改過的地方,把commentheader 換成commentTitle。

另外,在CommentInnerBox 的地方也把margin 加大了,從本來的 20px 改成 40px (粗體字),離邊界遠一點看起來比較好看。

之前一直不知道怎樣才能不讓「迴響列表」這四個字不要黏邊界上,現在知道了,重點就是在commentTitle 的語法裡加入:

margin-left: 20px; (紫色字體的部份)

注意,不是改padding 喔!那padding 是幹麻用的?這樣說好了,如果把padding 設為 0px 的話,那「迴響列表」這四個字就會和圖片(圖中粉紅色的花)重疊了,所以如果把圖片的位置設為靠最左(background-position: left)的話,那圖片開始的地方就是:

padding-left: 0px;

如果要避免讓字和圖片重疊,那padding-left 就要設大於圖片大小的位置,在這裡的話(如上圖) 20px 剛剛好把字往右移開圖片的部份,又不會離圖片太遠(愈大就會離圖片越遠)。








創作者介紹

min'cellanea

minc 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 悄悄話
找更多相關文章與討論