這是Xuiter:Grace問的問題,我把它回答成一篇教學,Grace問道『那個親友團的版面根本放不下.多那一條BAR很討厭.沒法一目了然.有辦法改成在文章區上面.用跑馬燈的方式撥放嗎??就像GOOGLE的部落格那樣?http://twgrace.blogspot.com/像這樣.看起來簡潔多了.』。我是沒辦法改成跑馬燈來秀啦!不過狗貓我可以教大家將它放到文章區上方(我稱呼為Banner檔頭區),因為要改為跑馬燈的顯示方式要Xuite開發的工程師去改程式,不是我這種跟大家一樣權限的人有辦法去改的。

透過CSS語法可以定義我們要顯示內容的顯示格式,於是我們可以透過自定樣式(CSS)去改一下"我的親友團"的CSS顯示定義,可以參考我之前寫的↓
http://blog.xuite.net/jeanson61/xuite/13926635

所以將它改一下位置變成顯示於Banner檔頭區的結果如下↓

要怎麼做??我先將語法貼出來,然後再解說一下↓
就是改以絕對位置(absolute),距離左側450個pixels(left:450px;),距離上面為負200個pixels(top:-200px;),這裡面的值需要你自己Try看看,不一定跟我的一樣,

之前教學篇的CSS這一篇教學的CSS
.myChannelTitle li {
 list-style-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_102/txt/13094185/12.gif);
}
#xuite_blog_feedControl{
 backgroundr:;
 font-size:13px;
 font-weight:normal;
 line-height:140%;
 text-align: left;
 text-indent: -3ex;
 padding-left: 3ex;
}
#xuite_blog_feedControl li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon18.gif);
}
#feed_summary, #feed_blog_name {
 font-size:13px;
 font-weight:normal;
 line-height:140%;
 text-align: left;
 text-indent: 0ex;
}
.myChannelTitle {
display:none;
}

.myChannelTitle li {
 display :none;
}
#xuite_blog_feedControl{
position:absolute;
left:450px;
top:-200px;
width:500px;
height:150px;
 background-color:#FFFFFF;

 font-size:13px;
 font-weight:normal;
 line-height:140%;
 text-align: left;
 text-indent: -3ex;
 padding-left: 3ex;
}
#xuite_blog_feedControl li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon18.gif);
}
#feed_summary, #feed_blog_name {
 font-size:13px;
 font-weight:normal;
 line-height:140%;
 text-align: left;
 text-indent: 0ex;
}


基本上就是上表的前後差異,主要是紅色與藍色字的部份!
首先是紅字部份,我是將原本欄位的標題欄不要(因為我找不到它定義的CSS,它應該沒辦法獨立搬移位置),只有標題文字的CSS是在.myChannelTitle去定義,所以將標題文字透過display :none;去除,但是版面上還是有一塊空白的標題區塊↓


這部份我倒是沒辦法透過CSS弄不見(其實是可以透過Java語法去弄不見啦,不過懶得弄啦),你把它這個區塊透過面版管理的版面編排,拉到版面左側或是右側最下面的區塊就不會礙眼啦!

接著講一下那親友團裡面的文章顯示內文的顯示位置,我透過增加↓

position:absolute;
left:
450
px;
top:
-200px;

去將顯示位置變更。

這些數據是Try出來的,首先說一下,我將"我的親友團"欄位托放放在左側欄位(Left Sidebar)時↓

如圖片上顯示,其Left, Top的原點(0,0)的位置是在左側SideBar的左上角!所以我的親友團的位置(left:450px; top:-200px;),就會如圖上的位置。

如果我改將"我的親友團"拉到右側的欄位(Right Sidebar)時↓

這時的Left, Top的原點(0,0)的位置是在右側SideBar的左上角(如上圖藍色箭頭所示)!所以我的親友團的位置(left:450px; top:-200px;),就會如圖上的位置,跑出去到非常右側去了。這時,CSS語法中的(left:450px; top:-200px;),就應該改一下,可能改為(left:-495px; top:-200px;),因為位置要在原點的左側,所以要改為負數才可以(這部份是座標的概念),就剛剛好!

所以說,位置的部份是由你自己去嘗試,找出最適當的顯示位置。至於你要的"我的親友團"內文顯示區塊大小,可以透過width:500px;height:150px;來定義,這部分也是看你的版面上的Banner寬度與高度來調整,因為我的Banner檔頭區塊並不高,再加上我已經有放一排選單式menu按鈕,所以所剩空間有限,高度我只設計150px,於是它的Scroll Bar就跑出來了,如果你要將Banner放大一些來放親友團的資訊,那麼就請將CSS語法中,Banner區塊的高度設高(大)一些,像我的CSS語法裡面的高度定義為250px↓
/*檔頭*/
#banner{
 margin: 18px 0px 0px 25px;
 height: 250px; 
 background-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_102/txt/13094185/9.jpg);
 background-repeat:repeat-x;
}
,所以如果要弄高一點,那就改一下height,例如改為height: 500px;就有500pixels高,你就自己玩看看吧。

另外我有改background-color:#FFFFFF;,是為了讓文字內容比較明顯,因為原本CSS設定的底色是透明的,文字跟底圖如果顏色太接近會看不清楚,所以我就將底色改為白色background-color:#FFFFFF;。要改其實顏色請自己改一下色碼#。



隨機文章


調整文字大小

使用最舒適的文字尺寸瀏覽文章內容

我知道了 繼續 
  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。