. KLOOK、KKDAY優惠整理

【設計書籤】各平台的CSS架構表和CSS教學

http://hit1205.blogdns.org/teach/?unit=css&main=else
網頁教學設計網站

http://tracyxcat.pixnet.net/blog/category/list/491645
含苞待放
CSS相關教學

讓每篇文章自動加入 Google AdSense (適用於 Pixnet / 無名付費會員 / 天空 / 樂多 / 新浪 / Xuite)
http://nelson.pixnet.net/blog/post/3967606

讓每篇文章都自動加入黑米跟推推王的收推文按鈕
http://nelson.pixnet.net/blog/post/11215429

Pixnet專用推推王的收推文按鈕+圖的語法
<div id="divAdSenseContentScript" style="display:none;"><br />
<img src="圖片網址" width="寬" height="高" />
<script language="JavaScript" src="http://funp.com/tools/button.php?&s=7" type="text/javascript"></script>
<script>
var pattern = new RegExp("^http://[0-z]+.pixnet.net/blog/post/[0-9]+", "i");
var myUrl = document.URL.match(pattern);
if (myUrl != null)
funp_genButton(myUrl[0], 11);
</script>
<br /></div>
<script src="http://nelson.csie.us/Pixnet/addGoogleAd_pixnet.js"></script>


PIXNET CSS架構表
http://hit1205.blogdns.org/teach/css/pixnetCSS/index.php

http://lovejie2005.pixnet.net/blog/post/9095842

http://p4.p.pixnet.net/albums/userpics/4/5/420045/1187010393.gif

無名CSS架構表
原文來自:http://hit1205.blogdns.org/teach/css/wretchCSS/index.php

  • #blog_main|整個網誌(本身也是body)
    • #container1|從頂端橫幅到#extraDiv4
      • #container2|從頂端橫幅到#footer之前
        • #banner|頂端橫幅
          • #pageheader|頂端橫幅
            • h1|網誌名稱、網誌描述、目前動態
              • h1 a|網誌名稱
              • h1 .description|目前動態(進入文章時出現在頂端的文章標題)
            • #description2|網誌描述
              • #description2 .description|網誌描述
              • #description2 img或#description2 a|表示「正在舉辦投票」的標誌(VIP才有)
        • #main2|文章區、連結區
          • #content|文章區(顯示文章的那一大塊)
            • .blog|文章區
              • .date|單篇文章日期
                • .datediv|單篇文章日期
              • .blogbody|單篇文章(包括引用和回應)
                • #bigmap|地圖方式預覽時出現的地圖(不包括上下灰色區域)
                • .blogbody2|單篇文章
                  • .articletext|單篇文章(不包括引用和回應)
                    • 進入各種列表時
                      • .list-linkcontrol|翻頁導覽列
                        • .list-linkcontrol a| 翻頁連結
                    • 其他情況
                      • .title|文章標題區塊(本身也是h3)
                        • .title a或#content .title a|文章標題連結(要改顏色請改這裡;如之前設定過#content a的色彩則此處需用#content .title a)
                      • .innertext|文章內文
                        • #article_counter|單篇文章人氣
                      • .extended|「分類」、「繼續閱讀」、上下篇選項
                  • .posted|文章作者資訊、「回應」「引用」字樣
                  • .total-comments-div|整個回應、引用(按下繼續閱讀才出現)
                    • .trackback-url|本篇文章引用網址區塊
                      • #trackback_url|本篇文章引用網址欄位(本身也是input)
                    • .comments-head|「給個回應」、「回應」、「引用」字樣
                    • .comments-bottom|「給個回應」字樣
                      • .comments-bottom .comments-head|「給個回應」字樣
                    • .comments-body|回應以及引用內文、填回應的欄位
                      • #name_id|填姓名或ID的欄位(本身也是input)
                      • #email|填e-mail的欄位(本身也是input)
                      • #url|填網址的欄位(本身也是input)
                      • #rem|選擇是否用cookie記得自己資料的欄位(本身也是input)
                      • #magic|填通關密語的欄位(本身也是input)
                      • .comments-user|回應以及引用內文、回應以及引用作者資訊(本身也是ul)
                        • .comments-user .comments-post|回應以及引用作者資訊(本身也是li)
                          • .postuser|有登入的回應發表人ID(本身也是a)
                          • .postisAuth|有登入的回者帳號旁的圖案(即藍色打勾圓圈/幸運草/皇冠,本身也是img)
                            • .postisAuth[src="http://pic.wretch.cc/photos/icon/blog/isAuth.gif"]|藍色打勾圓圈(IE不支援)
                            • .postisAuth[src="http://pic.wretch.cc/photos/icon/blog/isAuth_gold.gif"]|幸運草圖案(IE不支援)
                            • .postisAuth[src="http://pic.wretch.cc/photos/icon/blog/isAuth_platinum.gif"]|皇冠圖案(IE不支援)
                          • .postemail|郵件圖案(本身也是img)
                          • .postweb|小房屋(本身也是img)
                      • .comments-reply|板主回覆
                        • .comments-author|板主回覆內文、板主回覆時間資訊(本身也是ul)
                          • .comments-reply .comments-post|板主回覆時間資訊(本身也是li)
                    • .trackbacks-head|「引用」字樣
                      • .trackbacks-head .comments-head|「引用」字樣
                    • #HiddenTrackback|包住所有引用
                      • .trackback-linkcontrol|(作用不詳)
                      • .trackbacks-body|引用內文
                        • .trackbacks-body .comments-body|引用內文
                          • .trackbacks-body .comments-user|引用內文、引用作者資訊(本身也是ul)
                            • .trackbacks-post|引用作者資訊(本身也是li)
                              • .trackbacks-body .comments-post|引用作者資訊
                                • .trackbacks-body .comments-post a|引用文章標題
          • #links|連結區(行事曆、地盤、資料夾、連結那一大塊)
            • #links2|連結區
              • .calendar|行事曆(網誌管理中可開/關該功能)
                • div.calendar|行事曆
                  • div.calendar a|「行事曆」三個字、目前年月、上下月切換連結
                    • div.calendar a:first-child|「行事曆」三個字(IE不支援)
                  • .calendar table|行事曆表格
                    • .calendarhead|目前年月、上下月切換(本身也是caption)
                      • .calendarhead a|目前年月、上下月切換連結
                        • .calendarhead a:nth-child(1)|切換到上月的連結(尚無瀏覽器支援)
                        • .calendarhead a:nth-child(2)|目前年月(尚無瀏覽器支援)
                        • .calendarhead a:nth-child(3)|切換到下月的連結(尚無瀏覽器支援)
                    • span.calendar|日期、星期
                      • th .calendar|星期
                      • td .calendar|日期
                        • span.calendar a或td .calendar a|有文章的日期

              • .sidetitle|「○○的地盤」等標題(包括自訂的資料夾)
              • .side|「○○的地盤」等每個標題下的內容
              • #boxMySpace|○○的地盤
                • .boxMySpace0|「○○的地盤」字樣(包在.sidetitle 外面)
                • .boxMySpace1|○○的地盤內容(包在.side 外面)
                  • .boxMySpaceImg|包著地盤裡的照片
                    • .boxMySpaceImg img|地盤裡的照片
                  • #blogCategory|網誌分類
                    • #blogCategory span|「網誌分類」字樣
                    • #blogCategory a|網誌分類連結
                  • #service|包住服務列表與互動服務
                    • #serviceList|無名服務列表( 本身也是ul)
                      • #serviceList li|列表各個項目
                        • .mySpaceLink|列表中的連結
                        • #linkMypage|首頁(本身也是.mySpaceLink)
                        • #linkBlog|網誌(本身也是.mySpaceLink)
                        • #linkAlbum|相簿(本身也是.mySpaceLink)
                        • #linkGbook|留言(本身也是.mySpaceLink)
                        • #linkUser|名片(本身也是.mySpaceLink)
                        • #linkFriend|好友(本身也是.mySpaceLink)
                    • #interactionList|互動服務列表( 本身也是ul)
                      • #interactionList li|列表各個項目
                      • .boxAddFriendLink|「加為好友」區塊(本身也是#interactionList li)
                        • .boxAddFriendLink a|「加為好友」連結(本身也是.mySpaceLink,要改顏色請改這裡)
                      • .boxGiftLink|「送禮物給○○」區塊(本身也是#interactionList li)
                        • .boxGiftLink a|「送禮物給○○」連結(本身也是.mySpaceLink,要改顏色請改這裡)
                  • #boxMySpace select|好友的網誌
              • #boxSlideShow|播放相簿區塊(網誌管理中可開/關該功能)
                • .boxSlideShow0|「播放中相簿」字樣(包在.sidetitle 外面)
                • .boxSlideShow1|播放相簿內容(包在.side 外面)
                  • #SlidePicLink|相片連結(本身也是a)
                    • #SlidePicLink img|正在播放的相片
                  • #SlidePicTitle|相片說明文字(本身也是textarea)
                  • #buttonPlayPause|暫停按鈕(本身也是input)
                  • #buttonPrev|上一張按鈕(本身也是input)
                  • #buttonNext|下一張按鈕(本身也是input)
              • #boxMusic|音樂播放區塊
                • .boxMusic0|「音樂播放」字樣(包在.sidetitle 外面)
                • .boxMusic1|音樂播放內容(包在.side 外面)
                  • #automusic|包住「音樂播放」的播放器
                    • #automusic object|「音樂播放」的播放器
                      • #automusic embed|「音樂播放」給Firefox的播放器
              • #boxNewArticle|最新文章區塊(網誌管理中可開/關該功能)
                • .boxNewArticle0|「最新的文章」字樣(包在.sidetitle 外面)
                • .boxNewArticle1|最新的文章內容(包在.side 外面)
              • #boxCategory|文章分類區塊(網誌管理中可開/關該功能)
                • .boxCategory0|「文章分類」字樣(包在.sidetitle 外面)
                • .boxCategory1|文章分類內容(包在.side 外面)
                  • #CategoryFolder_一些數字|分類目錄標題旁的加減號(每個分類目錄數字不同,只能從原始檔看出;此外,本身也是img)
                  • #HiddenCategoryFolder_一些數字|分類目錄內容,包住分類
                    • #HiddenCategoryFolder_一些數字 a|分類目錄裡的分類連結
              • #boxDate|文章彙集區塊
                • .boxDate0|「文章彙集」字樣(包在.sidetitle 外面)
                • .boxDate1|文章彙集內容(包在.side 外面)
                  • .boxDate1 select|文章彙集裡的每月文章下拉選單
              • #boxSearch|文章搜尋區塊
                • .boxSearch0|「搜尋這個網誌的文章」字樣(包在.sidetitle 外面)
                • .boxSearch1|文章搜尋欄位(包在.side 外面)
              • #scupioSearch|酷比文章搜尋區塊
                • .scupioSearch0|酷比文章「搜尋」字樣(包在.sidetitle 外面)
                • .scupioSearch1|酷比文章搜尋欄位(包在.side 外面)
              • #divThird|從最新回應包到登入區(所以把這搬到旁邊就是三欄式
                • #divThird2|從最新回應到登入區
                  • #boxNewComment|最新回應區塊
                    • .boxNewComment0|「最新回應」字樣(包在.sidetitle 外面)
                    • .boxNewComment1|最新回應內容(包在.side 外面)
                  • #boxVote|投票區塊(VIP才有的功能)
                    • #boxVote #boxFolder|每一個投票
                      • #boxVote .boxFolder0|投票標題(此外包在.sidetitle 外面)
                      • #boxVote .boxFolder1|投票的宗旨、說明、內容區塊(此外包在.side 外面)
                        • #boxVote .boxFolder1 a:nth-child(1)|「投票宗旨」字樣(尚無瀏覽器支援)
                          • #VoteTitle_12345678|「投票宗旨」字樣旁的加減號(本身也是img)
                        • #HiddenVoteTitle_12345678|投票宗旨內容
                        • #boxVote .boxFolder1 a:nth-child(2)|「投票說明、規則」字樣(尚無瀏覽器支援)
                          • #VoteDesc_12345678|「投票說明、規則」字樣旁的加減號(本身也是img)
                          • #view_result_link|「投票結果」連結
                          • #vote_link|「去投票」連結
                        • #HiddenVoteDesc_12345678|投票說明內容
                        • #vote_pane|投票內容區塊
                          • #vote_pane a|「投票內容」字樣
                            • #VoteCont_87654321|「投票內容」字樣旁的加減號(本身也是img)
                          • #HiddenVoteCont_87654321|投票內容之內容
                            • #HiddenVoteCont_87654321 td|投票選項
                              • #boxVoteBody|投票選項的選擇框
                  • #boxRssList|我的訂閱區塊
                    • .boxRssList0|「我的訂閱」字樣(包在.sidetitle 外面)
                    • .boxRssList1|我的訂閱內容(包在.side 外面)
                      • #boxRssEntryTitle|來源網誌名稱
                      • #boxRssEntryBody|包住文章標題
                        • #boxRssEntryBody a|文章標題之連結
                  • #boxNewTrackback|最新引用區塊
                    • .boxNewTrackback0|「最新引用」字樣(包在.sidetitle 外面)
                    • .boxNewTrackback1|最新引用內容(包在.side 外面)
                  • #boxFolder|自定的每一個資料夾、每一個投票
                    • .boxFolder0|自定的每一個資料夾標題、投票標題(包在.sidetitle 外面)
                    • .boxFolder1|自定的每一個資料夾內容,也就是連結;以及投票的宗旨、說明、內容區塊(包在.side 外面)
                      • iframe或.iframe或#iframe一些數字|內含JavaScript的自定資料夾內容(每個資料夾數字不同,只能從原始檔看出)
                  • #boxCounter|參觀人氣區塊
                    • .boxCounter0|「參觀人氣統計」字樣(包在.sidetitle 外面)
                    • .boxCounter1|參觀人氣內容(包在.side 外面)
                  • .syndicate|有RSS圖案的那一塊(網誌管理中可開/關該功能)
                  • .powered|無名logo、登入區
                    • .powerlogo|無名logo(也在img裡面)
                    • .powerjoin|登入區的「註冊」字樣(登入前才出現,也在a裡面)
                    • .powerforgot|登入區的「忘記密碼」字樣(登入前才出現,也在a裡面)
                    • .powerin|登入區的「進入自己的網誌」、「登出」字樣(登入後才出現,也在a裡面)

        • #extraDiv1|位於底端的空區塊
        • #extraDiv2|位於底端的空區塊
      • #footer|位於底端的空區塊
      • #extraDiv3|位於底端的空區塊
      • #extraDiv4|位於底端的空區塊
    • #extraDiv5|位於底端的空區塊
    • #extraDiv6|位於底端的空區塊

 



訂閱我們的YouTubeIGFB粉絲團
|回首頁 | 文章分類 |

在〈【設計書籤】各平台的CSS架構表和CSS教學〉中有 12 則留言

  1. 我…潛水很久,又悄悄浮上來打招呼的人啦…:P
    你這一篇整理得真得很讚ㄟ!
    可以借我引用一下嗎?
    感謝~~^^"

    回覆
  2. 加油……..
    其實….你每次改都變化不大耶~~板面啦~色系啦!都差不多
    希望你這次改比較有爆點的

    回覆

發佈留言