January 30,2008
(分享)格子心版css
使用前請先隨便選樂多內用的三欄樣式做定型。 ● 請按下去另存原圖,不然會造成圖片連結過慢。
請按照編號把你另存圖的位置填進去。
背景➊:
上板➋:
標題圖➌:
左背景➍:
回覆欄➎:
左標題圖➏:
左標題圖➐:
底板➑:
CSS: BODY { Font-Family: Arial, Helvetica, sans-serif; MARGIN: 0px; WIDTH: 100%; COLOR: #999999; HEIGHT: 100%; TEXT-ALIGN: left; font-size: 12px; line-height: 150%; background-image: url(背景➊); background-repeat: repeat; background-color: #000000; } A {COLOR: #FFF8A5; TEXT-DECORATION: underline} A:link {COLOR: #FFF8A5; TEXT-DECORATION: underline} A:visited {COLOR: #FFF8A5; TEXT-DECORATION: underline} A:active {} A:hover {COLOR: #FFFFFF; TEXT-DECORATION: none} A.acalendar {COLOR: #FFFFFF; TEXT-DECORATION: underline} A.acalendar:link {COLOR: #FFFFFF; TEXT-DECORATION: underline} A.acalendar:visited {TEXT-DECORATION: underline;color: #FFFFFF;} A.acalendar:active {} A.acalendar:hover {COLOR: #FFFFCC; TEXT-DECORATION: none} A.acontinues {COLOR: #FFF8A5; TEXT-DECORATION: underline} A.acontinues:link {COLOR: #FFF8A5; TEXT-DECORATION: underline} A.acontinues:visited {COLOR: #FFF8A5;TEXT-DECORATION: underline} A.acontinues:active {} A.acontinues:hover {COLOR: #FFFFFF; TEXT-DECORATION: none} A.amenu {COLOR: #FFF8A5; TEXT-DECORATION: underline} A.amenu:link {COLOR: #FFF8A5; TEXT-DECORATION: underline} A.amenu:visited { TEXT-DECORATION: underline; color: #FFF8A5; } A.amenu:active {} A.amenu:hover {COLOR: #FFFFFF; TEXT-DECORATION: none} #container { WIDTH: 880px; TEXT-ALIGN: left; margin-right: auto; margin-left: auto; padding: 0px; } #banner { HEIGHT: 280px; background-image: url(上板➋); background-repeat: no-repeat; background-position: 50% 0px; } #subbanner {} #banner A {COLOR: #FFFF00; TEXT-DECORATION: none} #banner A:link { COLOR: #FFFF00; TEXT-DECORATION: none; } #banner A:visited { TEXT-DECORATION: none; color: #FFFF00; } #banner A:active { } #banner A:hover { COLOR: #FFFFFF; TEXT-DECORATION: underline; margin: auto auto auto auto; } #subbanner A {COLOR: #cccccc; TEXT-DECORATION: none} #subbanner A:link {COLOR: #cccccc; TEXT-DECORATION: none} #subbanner A:visited {TEXT-DECORATION: none} #subbanner A:active {} #subbanner A:hover {COLOR: #cccccc; TEXT-DECORATION: underline} H1 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px} H2 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; font-size: 12px; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif; } H3 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px} .blogtitle { FONT-SIZE: 15px; TEXT-ALIGN: center; font-weight: bold; padding-top: 200px; } .description { FONT-SIZE: 12px; COLOR: #ffffff; TEXT-ALIGN: center; font-weight: normal; } #content { width: 520px; float: right; padding-right: 160px; } .blog { MARGIN: 0px 10px 0px 10px; height: 100%; } .date { FONT-SIZE: 12px; COLOR: #FFFFFF; height: 20px; font-weight: normal; padding-left: 5px; background-color: #ff9999; } .blogbody { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; height: 100%; } .title { PADDING-LEFT: 50px; FONT-SIZE: 12px; COLOR: #ffcccc; padding-right: 5px; height: 40px; font-weight: bold; background-image: url(標題圖➌); background-repeat: no-repeat; padding-top: 10px; border-top: #FFFFFF 1px solid; text-align: left; border-right: #FFFFFF 1px solid; border-left: #FFFFFF 1px solid; } .main { FONT-SIZE: 13px; COLOR: #808080; font-family: Arial, Helvetica, sans-serif; line-height: 150%; text-align: left; padding-top: 10px; border-left: #FFFFFF 1px solid; border-right: #FFFFFF 1px solid; padding-right: 10px; padding-left: 10px; } .main-continues {FONT-SIZE: 13px} .posted { font-size: 11px; COLOR: #FFFFFF; TEXT-ALIGN: right; padding-right: 2px; border-right: #FFFFFF 1px solid; padding-left: 2px; border-left: #FFFFFF 1px solid; border-bottom: #FFFFFF 1px solid; margin-bottom: 5px; } A.aposted {COLOR: #FFF8A5; TEXT-DECORATION: underline} A.aposted:link {COLOR: #FFF8A5; TEXT-DECORATION: underline} A.aposted:visited {COLOR: #FFF8A5; TEXT-DECORATION: underline} A.aposted:active {} A.aposted:hover { COLOR: #FFFFFF; TEXT-DECORATION: none; } .menu {FONT-SIZE: 12px; COLOR: #666666; TEXT-ALIGN: right} .comments-head { PADDING-LEFT: 50px; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; COLOR: #FFCC00; PADDING-TOP: 10px; HEIGHT: 40px; border-top: #FFFFFF 1px solid; background-image: url(標題圖➌); background-repeat: no-repeat; text-align: left; font-weight: bold; border-right: #FFFFFF 1px solid; border-left: #FFFFFF 1px solid; margin-top: 5px; border-bottom: #FFFFFF 1px solid; } .comments-body { FONT-SIZE: 13px; MARGIN: 10px 0px 0px 70px; LINE-HEIGHT: 150%; color: #FFFFFF; padding: 10px; text-align: left; background-color: #ff9999; } .comments-post { FONT-SIZE: 12px; MARGIN: 0px 10px 25px; COLOR: #FFFFFF; TEXT-ALIGN: right; background-image: url(回覆欄➎); background-repeat: no-repeat; } .trackback-url { FONT-SIZE: 13px; COLOR: #307375; text-align: left; padding-right: 5px; padding-left: 5px; border-right: #FFFFFF 1px solid; border-bottom: #FFFFFF 1px solid; border-left: #FFFFFF 1px solid; } .trackback-body { FONT-SIZE: 12px; LINE-HEIGHT: 150%; color: #307375; text-align: left; padding-right: 5px; padding-left: 5px; border-right: #FFFFFF 1px solid; border-left: #FFFFFF 1px solid; } .trackback-post { FONT-SIZE: 12px; COLOR: #FFFFFF; TEXT-ALIGN: right; border-bottom-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 1px; padding-right: 5px; padding-left: 5px; border-right: #FFFFFF 1px solid; border-left: #FFFFFF 1px solid; } A.atrackback-post {COLOR: #FFFFCC; TEXT-DECORATION: underline} A.atrackback-post:link {COLOR: #FFFFCC; TEXT-DECORATION: underline} A.atrackback-post:visited {COLOR: #FFFFCC; TEXT-DECORATION: underline} A.atrackback-post:active {} A.atrackback-post:hover {COLOR: #FFFFFF; TEXT-DECORATION: none} TABLE.form {MARGIN: 25px 0px 0px 20px} LABEL { FONT-SIZE: 13px; color: #FFFFFF; } #author { WIDTH: 200px; border: #1FA741 1px solid; color: #000000; } #email { WIDTH: 200px; border: #1FA741 1px solid; color: #000000; } #url { WIDTH: 200px; border: #1FA741 1px solid; color: #000000; } #text { WIDTH: 350px; HEIGHT: 150px; border: #1FA741 1px solid; color: #000000; } .pagetop { FONT-SIZE: 12px; MARGIN: 5px 0px; TEXT-ALIGN: center; } #links { FLOAT: right; OVERFLOW: hidden; WIDTH: 175px; color: #FFFFCC; position: absolute; margin-left: 15px; top: 200px; } #links-more { FLOAT: right; OVERFLOW: hidden; WIDTH: 175px; margin-left: 740px; position: absolute; top: 200px; } .calendarhead { FONT-SIZE: 11px; PADDING-BOTTOM: 10px; COLOR: #FFFFFF; TEXT-ALIGN: center; font-family: Arial, Helvetica, sans-serif; width: 100%; background-image: url(左標題圖➏); background-repeat: no-repeat; padding-top: 5px; } .calendartable { WIDTH: 100%; TEXT-ALIGN: center; float: none; margin-bottom: 10px; height: 100px; } .calendarweek {FONT-SIZE: 10px; COLOR: #FFCC00;TEXT-ALIGN: center} .calendarwd { } .calendard { empty-cells: show; border-top: #CC0000 1px solid; } .calendardbg { border-top: #CC0000 1px solid; background-color: #CC0000; } .calendar { FONT-SIZE: 11px; color: #FFFFCC; font-family: Arial, Helvetica, sans-serif; } .sidetitle { FONT-SIZE: 12px; PADDING-BOTTOM: 1px; COLOR: #FFFFCC; TEXT-ALIGN: center; width: 160px; font-family: Geneva, Arial, Helvetica, sans-serif; line-height: 150%; background-image: url(左標題圖➐); background-repeat: no-repeat; padding-top: 5px; border-bottom-color: #ff9999; border-bottom-style: solid; border-bottom-width: 1px; } .side { FONT-SIZE: 12px; PADDING-BOTTOM: 5px; LINE-HEIGHT: 150%; PADDING-TOP: 10px; TEXT-ALIGN: left; background-repeat: repeat; width: 100%; color: #FFFFFF; background-image: url(左背景➍); } A.aside {COLOR: #FFFFFF; TEXT-DECORATION: underline} A.aside:link {COLOR: #FFFFFF; TEXT-DECORATION: underline} A.aside:visited { TEXT-DECORATION: underline; color: #FFFFFF; } A.aside:hover {COLOR: #FFCC00; TEXT-DECORATION: none} A.arss {COLOR: #dddddd; TEXT-DECORATION: underline} A.arss:link {COLOR: #2d8d5f; TEXT-DECORATION: underline} A.arss:visited {COLOR: #80b59c; TEXT-DECORATION: underline} A.arss:active {} A.arss:hover {COLOR: #bababa; TEXT-DECORATION: none} .pict {MARGIN: 5px 5px 5px 5px;} .photo {TEXT-ALIGN: center} .nickname { FONT-SIZE: 12px; MARGIN: 10px 0px; COLOR: #FFF8A5; text-align: center; } .message { FONT-SIZE: 12px; COLOR: #FFFFFF; text-align: left; line-height: 150%; } .quotetable {} .quote {PADDING-RIGHT: 1px; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; COLOR: #FFFFCC; PADDING-TOP: 1px} .blogtimes {MARGIN: 0px 0px 15px; TEXT-ALIGN: center} .powered { MARGIN: 0px 0px 10px; TEXT-ALIGN: center; color: #CCFFFF; } .syndicate {margin:5px 0px 5px 0px; TEXT-ALIGN: center} .checkers {MARGIN-TOP: 10px; FONT-SIZE: 11px} #footer { WIDTH: 780px; background-image: url(底板➑); background-repeat: no-repeat; height: 105px; margin-bottom: -20px; } //css by Mint chocolat* http://blog.roodo.com/dollyzi13
[完 使用愉快]
引用URL
http://cgi.blog.roodo.com/trackback/5419813
回應文章 

.............
Posted by 恩恩
at March 9,2008 16:36
為什麼好像不行取得??是妳css有錯誤嗎??
Posted by 芝~**
at July 4,2008 12:53
拿走囉!!
謝謝
謝謝
Posted by 瑜
at July 4,2008 23:20
TO:芝~**
應該是沒問題!請照著上面的步驟
1)請先隨便選樂多內用的三欄樣式做定型
然後圖片要自己另存
再把存好的圖片網址一一填入
就沒問題了!
-------------------------------
TO:瑜
you are welcome!
Posted by master-response芝&瑜
at July 5,2008 00:11
無名可以用嗎?
Posted by rene
at July 13,2008 21:04
TO: rene
抱歉! 無名的CSS無法通用。
Posted by master-response*rene
at July 14,2008 21:50

拿走囉!!
你的網頁真棒
Posted by 糖糖
at July 7,2009 20:40
糖糖))
請; 謝謝。
Posted by 花枝
at July 8,2009 14:40
謝謝你!拿囉!
Posted by 小花
at July 17,2009 14:32
Ok.
Posted by 花枝
at July 18,2009 00:00

謝~~
Posted by 小琪
at September 11,2009 03:31
Posted by 呆呆瑩
at November 21,2009 21:23
預覽:
。 
