查看完整版本: Xuite CSS教學|Xuite CSS樣式分享

Xuite CSS教學|Xuite CSS樣式分享

Xuite主要有七個區塊來做定位，即#container、標題(#banner)、頁尾(#footer)、中欄(#mid)、左欄(#linksLeft)、右欄(#linksRight)和內容(#content)。<BR>中欄(#mid)佔據了整個頁寬，以padding屬性來決定左右欄最大寬度，由於左欄和右欄都是固定寬度，因此content的寬度會隨著瀏覽器改變。<BR><BR>
<P align=center><IMG border=0 alt="" src="http://0.blog.xuite.net/0e/77/11731848/blog_1042/txt/4334465/22.gif"></P><BR><B><FONT size=4>一、各區塊名稱：</FONT></B><BR><BR>
<P align=center><IMG border=0 alt="" src="http://0.blog.xuite.net/0e/77/11731848/blog_1042/txt/4334465/6.gif" width=500 height=709></P><B><FONT size=4>#banner</FONT></B><BR>
<P align=center><IMG border=0 alt="" src="http://0.blog.xuite.net/0e/77/11731848/blog_1042/txt/4334465/23.gif" width=500 height=153></P><BR><B><FONT size=4>#content</FONT></B><BR>
<P align=center><IMG border=0 alt="" src="http://0.blog.xuite.net/0e/77/11731848/blog_1042/txt/4334465/24.gif" width=500 height=366></P><B><FONT size=4>#linksleft</FONT></B><BR>
<P align=center><IMG border=0 alt="" src="http://0.blog.xuite.net/0e/77/11731848/blog_1042/txt/4334465/9.gif" width=500 height=920></P><B><FONT size=4>#linksright</FONT></B><BR>
<P align=center><IMG border=0 alt="" src="http://0.blog.xuite.net/0e/77/11731848/blog_1042/txt/4334465/10.gif" width=500 height=636></P><FONT size=4><FONT color=darkgreen>新版新增樣式：</FONT></FONT><BR><B>
<TABLE class=t_table width=291>
<TBODY>
<TR>
<TD width=145>#container</TD>
<TD width=133>定位框</TD></TR>
<TR>
<TD width=145>#linksLeft</TD>
<TD width=133>左欄</TD></TR>
<TR>
<TD width=145>#inksRight</TD>
<TD width=133>右欄</TD></TR>
<TR>
<TD width=145>#mid</TD>
<TD width=133>中間欄</TD></TR>
<TR>
<TD width=145>#footer</TD>
<TD width=133>檔尾</TD></TR>
<TR>
<TD width=145>.sidetitle</TD>
<TD width=133>欄位名稱</TD></TR>
<TR>
<TD width=145>.side</TD>
<TD width=133>欄位內容</TD></TR>
<TR>
<TD width=145>.blogemotion</TD>
<TD width=133>今日心情</TD></TR>
<TR>
<TD width=145>.menulist</TD>
<TD width=133>選單列</TD></TR>
<TR>
<TD width=145>.menu</TD>
<TD width=133>選單</TD></TR>
<TR>
<TD width=145>.logo</TD>
<TD width=133>logo</TD></TR></TBODY></TABLE><BR>
<TABLE class=t_table width=290>
<TBODY>
<TR>
<TD width=144>.title</TD>
<TD width=133>文章標題列</TD></TR>
<TR>
<TD width=144>span.titlename<BR></TD>
<TD width=133>文章標題名稱</TD></TR>
<TR>
<TD width=144>span.titledate</TD>
<TD width=133>文章日期</TD></TR>
<TR>
<TD width=144>.blogrank</TD>
<TD width=133>文章評價例</TD></TR>
<TR>
<TD width=144>span.counter</TD>
<TD width=133>文章瀏覽數</TD></TR>
<TR>
<TD width=144>span.counter li</TD>
<TD width=133>文章瀏覽數項目符號</TD></TR>
<TR>
<TD width=144>span.category</TD>
<TD width=133>文章分類</TD></TR>
<TR>
<TD width=144>span.category li</TD>
<TD width=133>文章分類項目符號</TD></TR>
<TR>
<TD width=144>.blogbody</TD>
<TD width=133>文章主體</TD></TR>
<TR>
<TD width=144>.posted</TD>
<TD width=133>作者列</TD></TR>
<TR>
<TD width=144>.selectbar</TD>
<TD width=133>上下文章</TD></TR>
<TR>
<TD width=144>.trackbacktitle</TD>
<TD width=133>引用列</TD></TR>
<TR>
<TD width=144>.trackbacktitle li</TD>
<TD width=133>引用列項目符號</TD></TR>
<TR>
<TD width=144>trackbackurl</TD>
<TD width=133>引用網址</TD></TR>
<TR>
<TD width=144>.trackbackdate</TD>
<TD width=133>引用日期</TD></TR>
<TR>
<TD width=144>.trackbackcontent</TD>
<TD width=133>引用內容</TD></TR>
<TR>
<TD width=144>.comment</TD>
<TD width=133>留言列</TD></TR>
<TR>
<TD width=144>span.commenttitle</TD>
<TD width=133>留言名稱</TD></TR>
<TR>
<TD width=144>span.commenttitle li</TD>
<TD width=133>留言名稱項目符號</TD></TR>
<TR>
<TD width=144>span.commentbutton</TD>
<TD width=133>留言按鈕</TD></TR>
<TR>
<TD width=144>.author</TD>
<TD width=133>留言作者列</TD></TR>
<TR>
<TD width=144>span.authorname</TD>
<TD width=133>留言作者名稱</TD></TR>
<TR>
<TD width=144>span.commentdate</TD>
<TD width=133>留言日期</TD></TR>
<TR>
<TD width=144>commenttext</TD>
<TD width=133>留言內容</TD></TR>
<TR>
<TD width=144>.commentedit</TD>
<TD width=133>留言編輯按鈕</TD></TR>
<TR>
<TD width=144>span.email</TD>
<TD width=133>留言者信箱</TD></TR></TBODY></TABLE><BR><FONT size=4></FONT><BR><FONT size=4></FONT><BR><FONT size=4><FONT color=sienna>左欄class</FONT></FONT><BR>
<TABLE class=t_table width=290>
<TBODY>
<TR>
<TD width=282><FONT size=2>關於我</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=150><FONT size=2>.avatarPhoto</FONT></TD>
<TD width=150><FONT size=2>照片</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.avatarDesciption</FONT></TD>
<TD width=150><FONT size=2>描述</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.avatarbutton</FONT></TD>
<TD width=150><FONT size=2>關於我按鈕</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=281><FONT size=2>文章分類</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=150><FONT size=2>.categoryTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.categorySide li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.categoryTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.castgorySide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=281><FONT size=2>日曆</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=150><FONT size=2>.calenderTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calenderTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calenderSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calMonth</FONT></TD>
<TD width=150><FONT size=2>日曆table</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calMonthNay</FONT></TD>
<TD width=150><FONT size=2>日曆首列</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calMonthBackward</FONT></TD>
<TD width=150><FONT size=2>日曆上個月</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calMonthCurrent</FONT></TD>
<TD width=150><FONT size=2>日曆目前顯示年月</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calMonthForward</FONT></TD>
<TD width=150><FONT size=2>日曆下個月</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calMonthHeader</FONT></TD>
<TD width=150><FONT size=2>日曆星期列</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calMonthDay</FONT></TD>
<TD width=150><FONT size=2>日曆日欄</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calMonthToday</FONT></TD>
<TD width=150><FONT size=2>日曆今日日期</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calholiday</FONT></TD>
<TD width=150><FONT size=2>日曆假日日期</FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.calenderbutton</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=281><FONT size=2>搜尋文章</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=150><FONT size=2>.searchTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.searchTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.searchSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.searchbutton</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=281><FONT size=2>我的哈拉室</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=150><FONT size=2>.chatTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.chatTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.chatSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=281><FONT size=2>已建立的日誌</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=150><FONT size=2>.bloglistTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.bloglistTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.bloglistSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=289>
<TBODY>
<TR>
<TD width=281><FONT size=2>訂閱電子報</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=288>
<TBODY>
<TR>
<TD width=150><FONT size=2>.epaperTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.epaperTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.epaperSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.epaperbutton</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=288>
<TBODY>
<TR>
<TD width=281><FONT size=2>自由欄位</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=288>
<TBODY>
<TR>
<TD width=150><FONT size=2>.customTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.customTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.customSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=288>
<TBODY>
<TR>
<TD width=281><FONT size=2>日誌使用資源</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=287>
<TBODY>
<TR>
<TD width=150><FONT size=2>.resourceTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.resourceTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.resourceSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=281><FONT size=2>留言塗鴉版</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=150><FONT size=2>.paintTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.paintTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.paintSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE><BR><FONT size=2></FONT><BR><FONT size=4><FONT color=sienna>右欄class</FONT></FONT><BR>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=278><FONT size=2>背景音樂</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=150><FONT size=2>.musicTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.musicTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.musicSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.musicbutton</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=287>
<TBODY>
<TR>
<TD width=278><FONT size=2>最新文章</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=150><FONT size=2>.articleTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.articleTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.articleSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=287>
<TBODY>
<TR>
<TD width=278><FONT size=2>最新留言</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=150><FONT size=2>.messageTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.messageTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.messageSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.date</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=287>
<TBODY>
<TR>
<TD width=278><FONT size=2>參觀人次統計</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=150><FONT size=2>.countTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.countTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.countSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=287>
<TBODY>
<TR>
<TD width=278><FONT size=2>我的訂閱</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=150><FONT size=2>.rssrollTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.rssrollTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.rssrollSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.backbtn</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.morebtn</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=287>
<TBODY>
<TR>
<TD width=278><FONT size=2>日誌評價</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=150><FONT size=2>.rankTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.rankTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.rankSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=287>
<TBODY>
<TR>
<TD width=278><FONT size=2>已建立的相簿</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=150><FONT size=2>.albumTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.albumTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.albumSide</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=287>
<TBODY>
<TR>
<TD width=278><FONT size=2>最愛連結</FONT></TD></TR></TBODY></TABLE>
<TABLE class=t_table width=286>
<TBODY>
<TR>
<TD width=150><FONT size=2>.linkTitle li</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.linkTitle</FONT></TD>
<TD width=150><FONT size=2></FONT></TD></TR>
<TR>
<TD width=150><FONT size=2>.linkSide</FONT></TD>
<TD width=150></TD></TR></TBODY></TABLE></B><BR><BR>如有實作上的問題...可參考...<BR><BR><FONT size=4><FONT color=red>"布拉格的羅傑"網站:</FONT></FONT><BR>

<BR><A href="http://blog.xuite.net/yeegiah/diary/11431003" target=_blank>Xuite CSS教學</A>