現在博客園已經有 facebook 樣式的模板了 喜歡facebook風格的用戶可以去 模板頁添加哦。。
再次感謝 楊大哥 和 dudu 的幫助 謝謝了。。。


剛剛寫了個園子的Facebook風格^^ 大家可以試一下
注意,風格要先選 LoveIsIntheAir 因為是用這個的HTML寫的CSS 推薦分辨率：1027X768 推薦瀏覽器：IE7 FF2.0 IE6 （其他瀏覽器 沒做過測試）

版本1 如上圖：
*{?margin:0;?padding:0;}
body{?font-size:12px;}
li{?list-style:none;}
a{?text-decoration:none;}
#home{padding-left:170px;}
#header{background-color:#3b5999;?height:35px;width:650px;position:absolute;?top:0;left:264px}
#blogTitle{display:none;}
#blogTitle?h1{?display:none;}
#blogTitle?h2{?display:none;}
#lnkBlogLogo{?display:none;}
#navigator{?float:left;width:620px;?height:35px;text-algin:left;}
.blogStats{color:#ccc;?text-align:right;?width:200px;?float:right;?margin-top:15px;}
#navList{?width:400px;margin-top:15px;width:400px;float:left;}
#navList?li{?float:left;?margin-left:10px;}
#navList?li?a{?padding:2px?5px;;?color:#fff;?width:50px;?text-decoration:none;}
#navList?li?a?img{?display:none;}
#navList?li?a:hover{?background-color:#6d84b4;}
.commentform?.commentButton{?width:60px;}
#sideBar{?width:150px;?position:absolute;?top:0;left:114px;?background:url("/images/cnblogs_com/bingdongli/cnblogs.jpg")?no-repeat?top?left;}
#sideBarMain{?margin-top:60px;}
#leftcontentcontainer{?background-color:#f7f7f7;?text-align:left;?padding:5px;?padding-top:10px;?border-bottom:1px?solid?#ccc;width:140px;}
#leftcontentcontainer?h3{?color:#999;?padding-left:5px;?font-size:13px;?margin-top:10px;?margin-bottom:5px;}
#leftcontentcontainer?ul{?margin-left:10px;}
.mySearch?#q{?width:130px;?margin-left:6px;}
.catListLink?ul?li{?margin-top:3px;?margin-left:5px;}
.catListLink?ul?a{?text-decoration:none;color:#3b5999;}
.catListLink?ul?a:hover{?text-decoration:underline;}

.catListNoteBook?ul?li{?margin-top:3px;?margin-left:5px;}
.catListNoteBook?ul?a{?text-decoration:none;color:#3b5999;}
.catListNoteBook?ul?a:hover{?text-decoration:underline;}

.catListTag?ul?li{?margin-top:3px;margin-left:5px;}
.catListTag?ul?a{?text-decoration:none;color:#3b5999;}
.catListTag?ul?a:hover{?text-decoration:underline;}

.catListView,.catListFeedback,.catListComment{?display:none;}


#Calendar1_entryCal{}
#topicList{position:absolute;top:35px;left:264px;width:650px;?border:1px?solid?#ccc;?float:left;?text-align:left;?padding:10px;overflow:hidden;}
.postTitle{?background-color:#d8dfea;?padding:2px?5px?1px?5px;?margin-top:10px;}
.postTitle?a{?color:#333;?font-size:13px;?font-weight:bold;?text-decoration:none;}

.postCon{?padding:10px;?color:#555;}
.postDesc{?text-align:right;?margin:5px;?color:#3b5999;}
.postDesc?a{?text-decoration:none;?color:#3b5999;}
.postDesc?a:hover{?text-decoration:underline;}

.dayTitle?a{?color:#333;?text-decoration:none;?font-size:15px;?font-weight:bold;?margin:10px;}

.topicListFooter{?background-color:#ccc;?margin-right:0;}
.topicListFooter?a{?margin-right:20px;}

.postBody{?padding:10px;}
#divRefreshComments?a{?background-color:#3b5999;}
.commentform{?background-color:#f7f7f7;?padding:10px;?border-top:solid?1px?#95a5c6;}
.commentform?tr{?margin-top:5px;}
.commentform?.commenttb{?width:300px}
.commentform?a{?color:#3b5999;}
.contact{background-color:#f7f7f7;padding:20px;}
#calendar?td,?#calendar?th?{
font-size:12px;
}
.CalDayHeader?{
background:transparent?url(/Skins/LoveIsIntheAir/images/bg_cal_day.gif)?no-repeat?scroll?50%?0pt;
color:white;
padding-bottom:5px;
}
.CalWeekendDay?{
background:#E9F7FA?none?repeat?scroll?0%;
}
#calendar?.Cal?{
line-height:1.5em;
width:100%;
}
.Cal?{
border:0px?solid?black;
color:#816D65;
}
table?{
border-collapse:collapse;
border-spacing:0pt;
}
.CalTitle?{
background:white?none?repeat?scroll?0%;
color:#82CEEB;
font-weight:bold;
height:30px;
text-align:center;
}
.CalDayHeader?{
background-color:#ccc;
color:white;
}

#AjaxHolder_PostComment_refreshList{color:#fff;padding:3px;}
.feedback_area_title{background-color:#e9e9e9;padding-left:10px;font-weight:bold;
color:#3b5999;}
.feedbackItem{padding:5px;border:solid?1px?#95a5c6;margin:5px;background-color:#f7f7f7;}
.feedbackManage{float:right;}
.feedbackManage?a{color:#555;}
.feedbackCon{padding:10px?5px;}


版本2 如本博客樣式：

*{ margin:0; padding:0;}
body{ font-size:12px;}
li{ list-style:none;}
a{ text-decoration:none;}
#home{padding-left:170px;}
#header{background-color:#3b5999; height:35px;width:650px;position:absolute; top:0;left:264px}
#blogTitle{display:none;}
#blogTitle h1{ display:none;}
#blogTitle h2{ display:none;}
#lnkBlogLogo{ display:none;}
#navigator{ float:left;width:620px; height:35px;text-algin:left;}
.blogStats{color:#ccc; text-align:right; width:200px; float:right; margin-top:15px;}
#navList{ width:400px;margin-top:15px;width:400px;float:left;}
#navList li{ float:left; margin-left:10px;}
#navList li a{ padding:2px 5px;; color:#fff; width:50px; text-decoration:none;}
#navList li a img{ display:none;}
#navList li a:hover{ background-color:#6d84b4;}
.commentform .commentButton{ width:60px;}
#sideBar{ width:150px; position:absolute; top:0;left:114px; background:url("/images/cnblogs_com/bingdongli/toplogo.jpg") no-repeat top left;}
#sideBarMain{ margin-top:60px;}
#leftcontentcontainer{ background-color:#f7f7f7; text-align:left; padding:5px; padding-top:10px; border-bottom:1px solid #ccc;width:140px;}
#leftcontentcontainer h3{ color:#999; padding-left:5px; font-size:13px; margin-top:10px; margin-bottom:5px;}
#leftcontentcontainer ul{ margin-left:10px;}
.mySearch #q{ width:130px; margin-left:6px;}
.catListLink ul li{ margin-top:3px; margin-left:5px;}
.catListLink ul a{ text-decoration:none;color:#3b5999;}
.catListLink ul a:hover{ text-decoration:underline;}

.catListNoteBook ul li{ margin-top:3px; margin-left:5px;}
.catListNoteBook ul a{ text-decoration:none;color:#3b5999;}
.catListNoteBook ul a:hover{ text-decoration:underline;}

.catListTag ul li{ margin-top:3px;margin-left:5px;}
.catListTag ul a{ text-decoration:none;color:#3b5999;}
.catListTag ul a:hover{ text-decoration:underline;}

.catListView,.catListFeedback,.catListComment{ display:none;}


#Calendar1_entryCal{}
#topicList{position:absolute;top:35px;left:264px;width:650px; border:1px solid #ccc; float:left; text-align:left; padding:10px;overflow:hidden;}
.postTitle{ background-color:#d8dfea; padding:2px 5px 1px 5px; margin-top:10px;}
.postTitle a{ color:#333; font-size:13px; font-weight:bold; text-decoration:none;}

.postCon{ padding:10px; color:#555;}
.postDesc{ text-align:right; margin:5px; color:#3b5999;}
.postDesc a{ text-decoration:none; color:#3b5999;}
.postDesc a:hover{ text-decoration:underline;}

.dayTitle a{ color:#333; text-decoration:none; font-size:15px; font-weight:bold; margin:10px;}

.topicListFooter{ background-color:#ccc; margin-right:0;}
.topicListFooter a{ margin-right:20px;}

.postBody{ padding:10px;}
#divRefreshComments a{ background-color:#3b5999;}
.commentform{ background-color:#f7f7f7; padding:10px; border-top:solid 1px #95a5c6;}
.commentform tr{ margin-top:5px;}
.commentform .commenttb{ width:300px}
.commentform a{ color:#3b5999;}
.contact{background-color:#f7f7f7;padding:20px;}
#calendar{display:none;}

.dayTitle{border-bottom:1px solid #3b5999;padding-bottom:2px; }
.feedback_area_title{background-color:#e9e9e9;padding-left:10px;font-weight:bold;
color:#3b5999;}
.feedbackItem{padding:5px;border:solid 1px #95a5c6;margin:5px;background-color:#f7f7f7;}
.feedbackManage{float:right;}
.feedbackManage a{color:#555;}
.feedbackCon{padding:10px 5px;}
#AjaxHolder_PostComment_refreshList{color:#fff;padding:3px;}

轉載于:https://www.cnblogs.com/bingdongli/archive/2008/03/09/1097207.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的博客园 Facebook风格,您不妨一试^^的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。