終於把「迴響列表」的部份研究了一下。

我試了兩個模板：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 剛剛好把字往右移開圖片的部份，又不會離圖片太遠(愈大就會離圖片越遠)。








arrow
arrow
    全站熱搜

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

    E-mail轉寄