close
在PIXNET上一段時日了，
一直覺得這兒版面CSS的教學資料，
官方所提供的實在是少得可憐。
最近又想要改東改西，
官方網站遍尋不著之下，
利用GOOGLE大神找到了下面二篇。
寫得相當的用心。
本文引用自 repeat - pixnet blog css 解析 (grey2)
這位大大圖文並茂的說明了這個模板，
(因為圖多，就請自行前往觀看)
而位大大也十足用心的整理了所有的class &ID 的parent element
摘錄如下(以下由http://blog.pixnet.net/give/post/11440765 引用)：
* #Container {}
*
* #Container #Top {}
* #Container #Top #BlogHeader {}
* #Container #Top #BlogDescr {}
*
* #Container #Main {}
* #Container #Main #Sidebar {}
* #Container #Main #Sidebar .SidebarHeader {}
* #Container #Main #Sidebar .Sideblock {}
* #Container #Main #Sidebar .Sideblock .Sidetitle {}
* #Container #Main #Sidebar .Sideblock .Sidetitle h4 {}
* #Container #Main #Sidebar .Sideblock .Sidebody {}
* #Container #Main #Sidebar .Sideblock .Sidebody .isLock {}
* #Container #Main #Sidebar .Sideblock .Sidebody .isLock img {}
* #Container #Main #Sidebar .Sideblock .Sidebody .userImg {}
* #Container #Main #Sidebar .Sideblock .Sidebody .userLink {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userBlog {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userAlbum {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userGuestBook {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userProfile {}
* #Container #Main #Sidebar .Sideblock .Sidebody #adminConsole {}
* #Container #Main #Sidebar .Sideblock .Sidebody #CategoryPlugin a {}
* #Container #Main #Sidebar .Sideblock .Sidebody .nodecoration {}
* #Container #Main #Sidebar .Sideblock .SideBottom {}
* #Container #Main #Sidebar #CalendarPlugin {}
* #Container #Main #Sidebar #LatestArt {}
* #Container #Main #Sidebar #LatestComments {}
* #Container #Main #Sidebar #LatestTrackbacks {}
* #Container #Main #Sidebar #userBlock {}
* #Container #Main #Sidebar #ArchivePlugin {}
* #Container #Main #Sidebar #CategoryPlugin {}
* #Container #Main #Sidebar #LinksPlugin {}
* #Container #Main #Sidebar #FavoritePlugin {}
* #Container #Main #Sidebar #PageviewPlugin {}
* #Container #Main #Sidebar #RSSPlugin {}
* #Container #Main #Sidebar .SidebarFooter {}
*
* #Container #Main #Content {}
* #Container #Main #Content .mainEntry {}
* #Container #Main #Content .mainEntry .mainEntryTitle {}
* #Container #Main #Content .mainEntry .mainEntryTitle h3 {}
* #Container #Main #Content .mainEntry .mainEntryTitle h3 a {}
* #Container #Main #Content .mainEntry .mainEntryBody {}
* #Container #Main #Content .mainEntry .mainEntryBody a {}
* #Container #Main #Content .mainEntry .mainEntryBody .date {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryBase {}
* #Container #Main #Content .mainEntry .mainEntryBody .extended {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot a {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot a:hover {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot p {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot .trackback_url {}
* #Container #Main #Content .mainEntry .mainEntryBottom {}
* #Container #Main #Content .mainEntry .mainEntryBottom .ptop {
* #Container #Main #Content #Comments {}
* #Container #Main #Content #Comments .commentTitle {}
* #Container #Main #Content #Comments .commentTitle a {}
* #Container #Main #Content #Comments .commentBody {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentheader {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox replyContent {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox replyInfo {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo br {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo img {}
* #Container #Main #Content .listall_msg {}
* #Container #Main #Content .listall_pagelist {}
* #Container #Main #Content .listall_date {}
* #Container #Main #Content .listall_title {}
*
* #Container #pagefooter {}
* #Container #pagefooter #Bottom {}
* #Container #pagefooter #Bottom .style1 {}
* #Container #pagefooter #Bottommenu {}
而我就依上面畫了個階層的圖。
這樣就比清楚了些。...
全站熱搜
留言列表
