搜尋
搜尋
  • 2

MacBook? 我把無名blog變成apple blog第二彈！(CSS碼公開)

前往頁尾
科技狗
科技狗
科技狗
  • 科技狗
  • 個人積分：10889分
    文章編號：1560256
10889分
樓主
2006-08-18 3:25
承繼上次很多大大給我意見

這次一口氣連做了兩個板型:)

連續四天～觀看查詢請教詢問地做了很多功課

感謝大大的批評指教T_T 我感覺到功力大增了

因此為了回饋～只限o1的朋友 開放mac板形下載:D

（有在用無名又喜歡的就拿去吧:)）


先看看第一板型：

以Leopard為底 KUSO了一下 不建議行事曆 相本播放 使用safari firefox Opera 都沒有走位嚴重

預覽

之前有朋友看過了:)


再來看第二板型：

很簡單的訴求 那就是在Macbook上觀看無名XD

（沒有不建議的事項～請隨意）

預覽



--CSS碼修改法--

先進入自己的無名blog 選擇修改板型 ->修改CSS樣式表

將裡面的內容全選～然後取代為下列的任一種～即可更換完畢





板型1:


/*
MAC大惡搞

由khpr製作

gabbly.com/www.wretch.cc/blog/khpr */

/* General Set
-----------------------------------------*/
html, #text {
scrollbar-face-color:#eee;
scrollbar-track-color:#eee;
scrollbar-3dlight-color:#eee;
scrollbar-darkshadow-Color:#eee;
scrollbar-arrow-color:#444;
scrollbar-shadow-color:#444;
scrollbar-highlight-color:#444;
}

body {
font-size: 12px; /* 字體大小 */
font-family: "Arial"; /* 字體樣式 */
color: black; /* 字體顏色 */
background: black; /* 背景顏色 */
margin: 0px;
}

a {
color: blue;
}
a:hover {
color: blue;
text-decoration: underline;
}

/* container
-----------------------------------------*/
#container1 {
width: 790px;
position: relative; /* fix IE6 bug */
margin: 0px auto;

}
#container2 {}

/* banner and pageheader
-----------------------------------------*/
#banner {
background: url('http://pic1.pic.wretch.cc/photos/8/k/khpr/1/o1450984201.jpg') no-repeat 50% 100%;
height: 254px;
}
#pageheader {

} /* banner第二層，實質上只設定#banner即可 */
#pageheader {
color:black
font-size: .7em;
padding-top:185px;
padding-left:40px;
} /* 主標題(網誌名稱) */
#pageheader .description {

} /* 網誌目前動態描述 */
.description {
float:right;
padding-right:40px;
color:white;
/* 網誌個人描述列 */

}
/* main
-----------------------------------------*/
#main2 {} /* 包含content、links */

/* content
-----------------------------------------*/
#content {
margin-left: 20px;
width: 490px;
float: left;
margin-top: 28px;
}
.date {
height: 32px;

border: 1px solid #bfbfbf;
border-bottom: 0px;
padding-right: 5px;
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966657.jpg') repeat-x 0% 100%
}

.datediv {
padding-top:6px;
text-align: center;
font-size: 10px;
color: white;
} /* 第二層date */

.blogbody { /* 包含 .articletext .posted .total-comments-div */
border: 1px solid #bfbfbf;
padding: 10px;
margin-bottom: 30px;
background: white;
font-size: 12px;
}
.blogbody2 {} /*第二層blogbody*/
.articletext {} /*包含 .title .extended .innertext .extended */
.articletext .title {
font-size:18px;
color: blue;
}
.articletext .innertext {}
.articletext .extended {}
.posted {
font-size: 8px;
text-align: right;
}


/* comments
-----------------------------------------*/
.total-comments-div {
border-top: 1px dotted #999;
padding-top: 10px;
margin-top: 10px;
}
.total-comments-div .trackbacks-head {}
.total-comments-div .trackbacks-head .comments-head { /* 引用列的title */
border: 1px solid #aaa; padding: 7px;
margin-bottom: 10px;
}
.total-comments-div .comments-head { /* 回應列的title */
border: 1px solid #aaa; padding: 7px;
}
.total-comments-div .comments-bottom .comments-head { /* 編寫回應列的title */
border: 1px solid #aaa; padding: 7px;
margin-top: 10px;
}
.total-comments-div .comments-body { /* 回應區的留言區塊 */
border-bottom: 1px dotted #888;
}
.total-comments-div .comments-body .comments-post { /* 回應者資訊 */
text-align: right;
color: #aaa;
}
.total-comments-div .comments-body form { /* 編寫回應欄 */
}
.postuser {}
.postemail {}
.postweb {}

#nameid {}
#email {}
#url {}
#text {width: 300px;}

/* divThird 第三欄式設定，若兩欄式則不需設定 #divThird 的 position
-----------------------------------------*/
#divThird {}
#divThird2 {} /* 第二層divThird */
/* links 選單
-----------------------------------------*/
#links {
width: 152px;
background: #ddd;
margin-top: 28px;
margin-right: 45px;
float: right;
}
#links2 {} /* 第二層links */
.sidetitle { /* 每個blog的標題列 */
padding-left: 5px;
padding-right:2px;
height: 36px;
text-align: right;

}
.side { /* 每個block的內容 */
padding: 10px;
}

/* links 選單進階設定
-----------------------------------------*/
.calendar {} /* 行事曆 */

#boxProfile {} /* xxxxxx的地盤 */
#boxProfile .boxProfile0 {
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966667.jpg') no-repeat 50% 100%;
height: 33px;
border: 2px solid #404040;
}
#boxProfile .boxProfile0 .sidetitle {
display: none;

}
#boxProfile .boxProfile1 {}
#boxProfile .boxProfile1 .side {}
#boxProfile .boxProfile1 .side .boxProfileImg {}/* 個人封面照片縮圖 */
#boxProfile .boxProfile1 .side .boxProfileLink {} /* 四個連結：xxx的個人資料、xxx的網誌首頁、xxx的相簿、xxx的留言版 */
#boxProfile .boxProfile1 .side select {} /* 好友名單 */

#boxSlideShow {} /* 播放中的相簿 */
#boxSlideShow .boxSlideShow0 {}
#boxSlideShow .boxSlideShow0 .sidetitle {}
#boxSlideShow .boxSlideShow1 {}
#boxSlideShow .boxSlideShow1 .side {}

#boxNewArticle {} /* 最新的文章 */
#boxNewArticle .boxNewArticle0 {
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966663.jpg') no-repeat 50% 100%;
border: 2px solid #404040;
}
#boxNewArticle .boxNewArticle0 .sidetitle {

}
#boxNewArticle .boxNewArticle1 {}
#boxNewArticle .boxNewArticle1 .side {}

#boxNewTrackback .boxNewTrackback0{

background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966665.jpg') no-repeat 50% 100%;
border: 2px solid #404040;
}

#boxCategory {} /* 文章分類 */
#boxCategory .boxCategory0 {
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966662.jpg') no-repeat 50% 100%;
border: 2px solid #404040;
}
#boxCategory .boxCategory0 .sidetitle {

}
#boxCategory .boxCategory1 {}
#boxCategory .boxCategory1 .side {}

#boxDate {} /* 文章彙集 */
#boxDate .boxDate0 {
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966666.jpg') no-repeat 50% 100%;
border: 2px solid #404040;
}
#boxDate .boxDate0 .sidetitle {

}
#boxDate .boxDate1 {}
#boxDate .boxDate1 .side {}

#boxRssList .boxRssList0{
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966661.jpg') no-repeat 50% 100%;
border: 2px solid #404040;
}


#boxSearch {} /* 搜尋這個網誌的文章 */
#boxSearch .boxSearch0 {
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966660.jpg') no-repeat 50% 100%;
border: 2px solid #404040;
}
#boxSearch .sidetitle {
text-indent:-5000px;
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966660.jpg') no-repeat 50% 100%;
}
#boxSearch .boxSearch1 {}
#boxSearch .boxSearch1 .side {}

#scupioSearch {} /* 搜尋 */
#scupioSearch .scupioSearch0 {
display: none;

}
#scupioSearch .scupioSearch0 .sidetitle ( display: none;}
#scupioSearch .scupioSearch1 { display: none;}
#scupioSearch .scupioSearch1 .side { display: none;}

#boxNewComment {} /* 最新的回應 */
#boxNewComment .boxNewComment0 {
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966659.jpg') no-repeat 50% 100%;
border: 2px solid #404040;
}
#boxNewComment .boxNewComment0 .sidetitle {

}
#boxNewComment .boxNewComment1 {}
#boxNewComment .boxNewComment1 .side {}

#boxFolder {} /* 自訂資料夾 */
#boxFolder .boxFolder0 {
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966664.jpg') no-repeat 50% 100%;
border: 2px solid #404040;
}
#boxFolder .boxFolder0 .sidetitle {

}
#boxFolder .boxFolder1 {padding:0}
#boxFolder .boxFolder1 .side {}

#boxCounter {} /* 參觀人氣統計 */
#boxCounter .boxCounter0 {}
#boxCounter .boxCounter0 .sidetitle {}
#boxCounter .boxCounter1 {}
#boxCounter .boxCounter1 .side {}

.syndicate {padding: 10px;} /*RSS*/

/*
-----------------------------------------*/
.powerlogo img{
display: none;
}
.powered {color: #ddd;}
.total-comments-div .powered {} /* 若文章僅開放給會員留言時未登入的區塊顯示 */

/* footer
-----------------------------------------*/
#footer {}

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><



板型2:

/*
Macbook大惡搞

by khpr
www.wretch.cc/blog/khpr*/


html {
overflow: auto;
}
#text {
scrollbar-face-color:#eee;
scrollbar-track-color:#eee;
scrollbar-3dlight-color:#eee;
scrollbar-darkshadow-Color:#eee;
scrollbar-arrow-color:#444;
scrollbar-shadow-color:#444;
scrollbar-highlight-color:#444;
}

body {

font-size: .8em; /* 字體大小 */
color: #444; /* 字體顏色 */
background: url('http://pic1.pic.wretch.cc/photos/8/k/khpr/1/o1450984203.jpg') no-repeat 50% 0%; /* 背景顏色 */
margin: 0px;
}

a {
color: #123456;
}
a:hover {
color: blue;
text-decoration: none;
}



/* container
-----------------------------------------*/
#container1 {
width: 800px;
position: relative; /* fix IE6 bug */
margin: 0px auto;

}
#container2 {}

/* banner and pageheader
-----------------------------------------*/
#banner {
height: 73px;
margin-top: 29px;

}
#pageheader {} /* banner第二層，實質上只設定#banner即可 */
#pageheader h1 a {} /* 主標題(網誌名稱) */
#pageheader .description {} /* 網誌目前動態描述 */
#pageheader #description2 .description { /* 網誌個人描述列 */
text-align: right;
color: white;
margin-top: -29px;
float: right;

}
/* main
-----------------------------------------*/
#main2 {} /* 包含content、links */

/* content
-----------------------------------------*/
#content {
margin-right: 103px;
width: 454px;
float: right;
height: 351px;
margin-top:-40px;
overflow: auto;
padding:5px;
}
.date {
text-align: right;
background: #4f919e;
border-bottom: 2px solid #ddd;
border-top: 2px solid #ddd;
padding-right: 5px;
color: white;
}
.datediv {} /* 第二層date */
.blogbody { /* 包含 .articletext .posted .total-comments-div */
padding: 10px;
margin-bottom: 15px;
}
.blogbody2 {} /*第二層blogbody*/
.articletext {} /*包含 .title .extended .innertext .extended */
.articletext .title { color: blue;}
.articletext .innertext {
color:black;
}
.articletext .extended {}
.posted {
font-size: 10px;

}


/* comments
-----------------------------------------*/
.total-comments-div {
border-top: 1px dotted #999;
padding-top: 10px;
margin-top: 10px;
}
.total-comments-div .trackbacks-head {}
.total-comments-div .trackbacks-head .comments-head { /* 引用列的title */
border: 1px solid #aaa; padding: 7px;
margin-bottom: 10px;
}
.total-comments-div .comments-head { /* 回應列的title */
border: 1px solid #aaa; padding: 7px;
}
.total-comments-div .comments-bottom .comments-head { /* 編寫回應列的title */
border: 1px solid #aaa; padding: 7px;
margin-top: 10px;
}
.total-comments-div .comments-body { /* 回應區的留言區塊 */
border-bottom: 1px dotted #888;
}
.total-comments-div .comments-body .comments-post { /* 回應者資訊 */
text-align: right;
color: #aaa;
}
.total-comments-div .comments-body form { /* 編寫回應欄 */
}

.postuser {}
.postemail {}
.postweb {}

#nameid {}
#email {}
#url {}
#text {width: 300px;}

/* divThird 第三欄式設定，若兩欄式則不需設定 #divThird 的 position
-----------------------------------------*/
#divThird {}
#divThird2 {} /* 第二層divThird */
/* links 選單
-----------------------------------------*/
#links {

}
#links2 {
width: 193px;
height: 321px;
paddingt: 10px;
overflow: auto;
margin-left: 40px;
margin-top: 66px;
} /* 第二層links */
.sidetitle { /* 每個blog的標題列 */
padding: 5px;
margin-top: 5px;
}
.side { /* 每個block的內容 */
padding: 10px;
}

/* links 選單進階設定
-----------------------------------------*/
.calendar {} /* 行事曆 */

#boxProfile {
border-bottom: 2px solid #ddd;
padding:4px;
} /* xxxxxx的地盤 */
#boxProfile .boxProfile0 {}
#boxProfile .boxProfile0 .sidetitle {}
#boxProfile .boxProfile1 {}
#boxProfile .boxProfile1 .side {}
#boxProfile .boxProfile1 .side .boxProfileImg {}/* 個人封面照片縮圖 */
#boxProfile .boxProfile1 .side .boxProfileLink {} /* 四個連結：xxx的個人資料、xxx的網誌首頁、xxx的相簿、xxx的留言版 */
#boxProfile .boxProfile1 .side select {} /* 好友名單 */

#boxSlideShow {
border-bottom: 2px solid #ddd;
} /* 播放中的相簿 */
#boxSlideShow .boxSlideShow0 {}
#boxSlideShow .boxSlideShow0 .sidetitle {}
#boxSlideShow .boxSlideShow1 {
width:90px;
height:90px;
overflow: hidden;}
#boxSlideShow .boxSlideShow1 .side {}

#boxNewArticle {
border-bottom: 2px solid #ddd;
} /* 最新的文章 */
#boxNewArticle .boxNewArticle0 {}
#boxNewArticle .boxNewArticle0 .sidetitle {}
#boxNewArticle .boxNewArticle1 {}
#boxNewArticle .boxNewArticle1 .side {}

#boxCategory {
border-bottom: 2px solid #ddd;
} /* 文章分類 */
#boxCategory .boxCategory0 {}
#boxCategory .boxCategory0 .sidetitle {}
#boxCategory .boxCategory1 {}
#boxCategory .boxCategory1 .side {}

#boxDate {
border-bottom: 2px solid #ddd;
} /* 文章彙集 */
#boxDate .boxDate0 {}
#boxDate .boxDate0 .sidetitle {}
#boxDate .boxDate1 {}
#boxDate .boxDate1 .side {}

#boxSearch {
border-bottom: 2px solid #ddd;
} /* 搜尋這個網誌的文章 */
#boxSearch .boxSearch0 {}
#boxSearch .boxSearch0 .sidetitle {}
#boxSearch .boxSearch1 {}
#boxSearch .boxSearch1 .side {}

#scupioSearch {
border-bottom: 2px solid #ddd;
} /* 搜尋 */
#scupioSearch .scupioSearch0 {}
#scupioSearch .scupioSearch0 .sidetitle {}
#scupioSearch .scupioSearch1 {}
#scupioSearch .scupioSearch1 .side {}

#boxNewComment {
border-bottom: 2px solid #ddd;
} /* 最新的回應 */
#boxNewComment .boxNewComment0 {}
#boxNewComment .boxNewComment0 .sidetitle {}
#boxNewComment .boxNewComment1 {}
#boxNewComment .boxNewComment1 .side {}

#boxFolder {
border-bottom: 2px solid #ddd;
} /* 自訂資料夾 */
#boxFolder .boxFolder0 {}
#boxFolder .boxFolder0 .sidetitle {}
#boxFolder .boxFolder1 {}
#boxFolder .boxFolder1 .side {}

#boxCounter {
border-bottom: 2px solid #ddd;
} /* 參觀人氣統計 */
#boxCounter .boxCounter0 {}
#boxCounter .boxCounter0 .sidetitle {}
#boxCounter .boxCounter1 {}
#boxCounter .boxCounter1 .side {}

.syndicate {padding: 10px;} /*RSS*/

/* powered 無論如何請不要隱藏無名小站的logo
-----------------------------------------*/
.powered {padding: 10px;
border-bottom: 2px solid #ddd;

}
.powered .powerlogo img{
display:none;
}
.powered .powerlogo{
background: url('http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966667.jpg') no-repeat 0% 100%;
display: block;
width: 155px;
height: 50px;
}
.total-comments-div .powered {} /* 若文章僅開放給會員留言時未登入的區塊顯示 */

/* footer
-----------------------------------------*/
#footer {}
2006-08-18 3:25 發佈
文章關鍵字 MacBook BLOG Apple Blog css
ufo7
ufo7
ufo7
  • ufo7
  • 個人積分：0分
    文章編號：1560259
0分
2樓
2006-08-18 3:29
剛好最近在學php
發現現在網頁都改用css設計
就不客氣收下了
科技狗
科技狗
科技狗
  • 科技狗
  • 個人積分：10889分
    文章編號：1560265
10889分
樓主
2006-08-18 3:32
之前被雷劈大大教小弟不少:)

有很多網站都可以搜尋到類似的資料

以無名為例～其實可以修改幾個板型 看看人家主要怎麼寫的～


然後想要自己改的話～就先去弄個基本教學板型 然後再一一逐步修改

^^加油加油


姚子2006.8.18
用數據說話的科技自媒體 https://3cdogs.com/
被雷劈
被雷劈
被雷劈
  • 被雷劈
  • 個人積分：43分
    文章編號：1562020
43分
4樓
2006-08-18 15:16
我被MacBook那個版型騙到了...
一直想去點finder的視窗XDXD

不錯唷
http://www.flickr.com/photos/santinaki/
Gosiya
Gosiya
Gosiya
  • Gosiya
  • 個人積分：26分
    文章編號：1562738
26分
5樓
2006-08-18 18:12
好像有點錯耶！
版型一跟版型二的圖有點錯亂～～～
我好想用版型二噢！！
大師可以修改一下嗎？
我愛吃蘋果！！ 所以我變成水果專賣店的店員～～～
Gosiya
Gosiya
Gosiya
  • Gosiya
  • 個人積分：26分
    文章編號：1562900
26分
6樓
2006-08-18 19:19
哈哈！我自己改成功了

把http://pic1.pic.wretch.cc/photos/14/w/walkstation/1/1883966657.jpg改到版型二最後的那個圖片連結就成功了
我愛吃蘋果！！ 所以我變成水果專賣店的店員～～～
tyf000
tyf000
tyf000
  • tyf000
  • 個人積分：1974分
    文章編號：1562912
1974分
7樓
2006-08-18 19:24
Firefox OK..
Safari 的 flash 會有殘影.
用 IE 看，整個走樣...
科技狗
科技狗
科技狗
  • 科技狗
  • 個人積分：10889分
    文章編號：1564133
10889分
樓主
2006-08-19 1:18
剛才我也用IE看了～= =

真的有些問題哪

我會再修改看看的^^"

哎... 果然還是IE使用者最大XD


姚子2006.8.18
用數據說話的科技自媒體 https://3cdogs.com/
科技狗
科技狗
科技狗
  • 科技狗
  • 個人積分：10889分
    文章編號：1564144
10889分
樓主
2006-08-19 1:20
Gosiya wrote:
哈哈！我自己改成功了...(恕刪)


哈哈～我不曉得是什麼問題^^"

不過很高興你的問題解決了:D

有用我板型的朋友可以順便留個網址啊

交流一下XD

謝謝

姚子2006.8.18
用數據說話的科技自媒體 https://3cdogs.com/
阿舒特隆
阿舒特隆
阿舒特隆
4分
10樓
2006-08-19 13:20
不好意思呀，版型二的CSS碼真的有出了點問題，可以麻煩樓主看一下嗎？

我照上一位版友說的話把圖片的網址改過了，不過顯示出來還是有問題

問題就是使用版二的CSS碼但是卻出現版一的圖案
  • 2
內文搜尋
搜尋
從 APP 打開從 APP 打開
X
X
加入好友名單
取消 確定
評分
取消 確定
評分
取消 確定
複製連結
複製
留言回報
取消 確定
Mobile01提醒您
您目前瀏覽的是行動版網頁
是否切換到電腦版網頁呢?
否 是