博客园 Facebook风格,您不妨一试^^
现在博客园已经有 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;}
*{ 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;}
