建站之社交網站——開心網

社交網站又稱SNS網站，主要是以認識朋友為基礎，擴展自己人脈的網站類型。網站用戶可以以該網站為平臺進行交流，所以一般都有用于交流的構件：博客、留言板和一些即時聊天工具等。該類網站一般還會提供一些便民服務：二手物品轉讓、拼車信息、團購信息等，使網站的用戶可以從中受益，進而保證網絡的可持續(xù)發(fā)展。

25.1 網站配置分析

本節(jié)視頻教學錄像：4分鐘開心網是中國著名的社交網站之一，由北京開心人信息技術有限公司于2008年3月創(chuàng)立，其核心用戶為中國社會財富和主流文化的締造人群——北京、上海、廣州等大中城市的白領群體，主要提供照片分享服務、在線聊天服務、音樂分享服務、網絡存儲服務、博客托管服務、互動游戲服務等。據統(tǒng)計，開心網已發(fā)展成為中國最具影響力的白領社交網站（SNS），注冊用戶突破1.4億，訪問量已經進入中國網站前10名，網站Alexa排名進入前200名。本章以開心網為例，分別從服務器配置、頁面設計和程序開發(fā)三個方面分析社交網站。

25.1.1 服務器配置分析

開心網前端的服務器一共有17個IP：220.181.66.138、

123.103.12.24、123.103.12.25、123.103.12.26、123.103.12.27、

123.103.12.28、123.103.12.36、123.103.12.37、123.103.12.38、

123.103.12.39、123.103.101.98、123.103.101.107、123.103.101.116、

123.103.102.130、220.181.66.131、220.181.66.135、220.181.66.136。

其圖片服務器用了ChinaCache，開心網的前端用了DNS輪詢CDN。

前端服務器使用的是Apache，max-age=1，等于設置緩存，并且開啟了gzip壓縮。

令人意外的是開心網的Web沒有用squid或者lvs，而是只使用

DNS輪詢。因為DNS輪詢分配的壓力非常不平均，所以僅僅依賴DNS輪詢是非常不安全的。

25.1.2 頁面設計分析

本小節(jié)將介紹開心網的頁面設計架構。用戶可以通過在IE瀏覽器輸入http://www.kaixin001.com/來訪問開心網。開心網的主頁如下圖所示。

首次打開開心網客戶端，需要用戶輸入用戶名及密碼進行登錄操作。開心網手機客戶端沒有提供新用戶注冊功能，所以如果還沒有注冊開心網的用戶只能打開網頁頁面進行注冊。

開心網首頁結構較為簡單，從而也體現了其網站特征：需要注冊，然后才能享用其提供的大部分的功能；包含內容不多，但是每一項內容都有其很重要的作用，比如，其logo設計，為開心笑臉，非?？蓯?，且顏色醒目，讓人能一眼看到，確實起到了網站的標識作用。logo下方為登錄部分，且明確給出可以采用其他賬號，諸如QQ賬號等登錄。而正中間則為新用戶注冊部分，極大地方便了新用戶的注冊。右方給出的注冊用戶數量，是為自己打廣告的極大數據佐證，其下方的關系圖，則以一種簡單易懂的方式給出了該網站的類型。

開心網首頁框架如下圖所示。

框架使用網頁布局方式中的DIV布局方式，下面給出開心網首頁各個模塊所包含的子<div>塊。

用戶快捷導航設計的主要代碼如下：

01　</div>02　<div　id="head2_kxt3" class="hasSub"><a class="headLink"
href="/t/help.html"><b>幫助</b></a></div>03　<div　id="head2_kxt2" class="hasSub"><a class="headLink"
href="http://login.kaixin001.com"><b>登錄</b></a></div>04　<div　id="head2_kxt1" class="hasSub"><a class="headLink"
href="http://reg.kaixin001.com"><b>注冊</b></a></div>05　</div>06　<script type="text/javascript">07　bindSearchEvents（0）;
08　（　function（$ ）{09　//onmouseout="$j（　this?。?
removeClass（　'hasSub_show'?。?
h（'more_sub'）;"onmouseover="$j（　

this ）.addClass（　'hasSub_show' ）; s（'more_sub'）;"

10　var container = $（　'#head2_kxt4' ）,11　headLink = container.find（　'.headLink' ）,12　subUl = container.find（　'#more_sub' ）;
13　container.hover（　function（）{14　var　iframe = container.find（　'.headSubIframe' ）;
15　$（　this ）.toggleClass（　'hasSub_show' ）;
16　headLink.toggleClass（　'hover' ）;
17　subUl.toggle（）;
18　iframe.css（ {　'right'　: 0　,　'left'　:　'auto' }）.toggle（）;
19　} ）

20　} ）（ $j ）;
21　</script>22　<!--div class="headFindPerson rt_nav" style="clear:none;">23　<div class="rt_menu　l"><a href="http://reg.kaixin001.com"
class="ce"id=head_reg>注冊</a></div>24　<div class="l rt_menu_bar"></div>

25　<div class="rt_menu　l"><a href="http://login.kaixin001.com"
class="ce">登錄</a></div>26　<div class="l rt_menu_bar"></div>27　<div class="rt_menu　l"><a href="/t/help.html" class="ce">

幫助 </a></div>28　<div class="l rt_menu_bar"></div>29　<div class="rt_menu" >30　<a href="/daohang.html" class="ce2">導航</a>31　</div>32　</div-->33　<div class="c"></div>34　</div>35　</div>36　<iframe id="headIframe"　frameborder="0"
src="about:blank"></iframe>37　</div>

注冊完成或者登錄之后進入開心網個人首頁，如下圖所示。個人

首頁采用白色為底色，大致布局和主頁相似。

主導航的作用是提供用戶一個快捷方式，方便用戶的點擊查找，而且頂部橫幅鮮明、突出，不影響總體布局。

作為一個SNS網站，開心網主要提供相冊、圈子、日記、禮物等功能。相冊提供一般的相冊服務，上傳照片與人分享，并對其盡行管理。圈子可以輕松找到許久不曾聯(lián)系的昔日好友，可以根據自己的偏好主動去搭訕自己想認識的朋友，從某種程度上打破了地域上的限制，從而促進了不同院校、不同工作地的大學生和社會白領等人群的相互交流，為大學生和白領的社交提供了一個全新的渠道。

主導航的代碼如下：

01　<div　id="app_friend_tip" style="z-
index:100101;position:abso lute;background:#fff;border:2px solid

#F7F7F7;width:160px;he ight:250px;display:none;"></div>02　<div　id="head_applist" style="padding-top:3px;"></div>03　< div　id = " appMenu "　class = " appMenuhomeMeLeft "style="display:none;"><uldata-sigil="basic" data-visibleItem="5">< li ><aclass="app_l_spapp_photo" onfocus="this.blur（）;"title="照片 "
href="/photo/albumlist.php" > 照片 </a><a class="rtfunc"
onfocus="this.blur（）;" href="/photo/up load_photo.php"> 上傳 </a></
li>< li ><a class="app_ l_spapp_repaste"
onfocus="this.blur（）;"title="轉帖 " href="/repaste/hotrp.html" >轉帖</
a><a class="rtfunc" onfocus="this.blur（）;" href="/!repaste/
repaste.php"> 發(fā)表 </a></li><li ><a class="app_l_spapp_diary"
onfocus="this.blur（）;"title="日記 " href="/diary/fdiarylist.php" >日記 </
a><a class="rtfunc" onfocus="this.blur（）;" href="/d iary/write.php?
f=h"> 發(fā)表 </a></l i>< li ><a class="app_ l_sp app_records"
onfocus="this.blur（）;"title=" 記錄　" href="/records/friend.php" > 記錄 </a></l i>< li ><a class="app_ l_sp app_g ift"
onfocus="this.blur（）;"title=" 禮物　" href="/～g ift/index.php?src=kx
left" > 禮物 </a></l i>< listy le="display:none"><a class="app_
l_spapp_kxcp" onfocus="this.blur（）;"
onclick="Kx.Utils.writeLog2（'left_nav_click_stat_1282'）;"title=" 開心集品　" href="http://jipin.kaixin001.com/?_sfrom=platform&blank=1"　

target="_blank"> 開心集品 <img class="extrai" src="http://
img.kaixin001.com.cn/images/newpage .gif "　/></a></l i>< listyle=

"display :none "><a class= "app_ l_spapp_100013368 " on focus= "
this.blur（）;" onc lick= "Kx .Utils.writeLog2（ '
left_nav_click_stat_100013368'）;"title=" 名品打折　" href="/interface/
statLog2.php?ur l=http%3A%2F%2Fbuy.kaixin001 .
com&key=KaiXinMingPin_click_fromLeft "　target= "_blank " style= "background :url（ 'http ://pic1 .kaixin001 .com.cn/p ic/
app/93/49/1162_156934919_platform-16x16.gif '）no-repeat 1px0;">

名品打折 </a></li><li style="display:none"><a
class="app_l_spapp_star" onfocus="this.blur（）;"title=" 公共主頁　"
href="/interface/statLog2.php?ur l=%2Fpage%2Fnews.php&key=
left_nav_click_stat_1230" > 公共主頁 </a></l i>< listyle= "display :none "><a class= "app_ l_spapp_rgroup "onfocus="this.blur（）;"title=" 圈子　" href="
javascript:appRgroupExpand（0）;" ><span class="ntc"
style="display:none;"><b>0</b></span> 圈子 </a><a　

id="app_rgroup_create" class="rtfunc" onfocus="this.blur（）;" href="
javascript:appRgroupCreate（0）;"> 創(chuàng)建 </a></li><span　

id="rgroup_expand"style="display:none;" data-expand="0"></span>< li
class="show_moreapp"data-sigil="more_basic_menu">04　<a href="javascript:void（0）" class="hmore hmoreBasic">更多</a>05　</li></ul><ul><li ><a class="app_l_spapp_webgame"
onfocus="this.blur（）;"title="網頁游戲 " href="http://

game.kaixin001.com"　target="_blank">網頁游戲 <img class="extrai"
src="http://img.kaixin001.com.cn/images/arrow_blur.gif"/></a></l i>< li ><a
class="app_ l_spapp_kxmbapp" onfocus="this.blur（）;"title="無線應用推薦 " href="/mobileapp/index.php"　target="_blank">無線應用推薦 </
a></li><li ><a class="app_l_spapp_sims"
onfocus="this.blur（）;"title="開心人生 " href="/app/?
aid=1270&clickfrom=homeLeftDefaultRcmd" > 開心人生 </a></li><li ><a class="app_l_spapp_city" onfocus="this.blur（）;" title="開心城市"
href="/app/?aid=1226&clickfrom=homeLeftDefaultRcmd" > 開心城市 </
a></li><li ><a class="app_l_spapp_farm" onfocus="this.blur（）;"
title="開心莊園 " href="/app/?
aid=1160&clickfrom=homeLeftDefaultRcmd" > 開心莊園 </a></li><li ><a class="app_l_spapp_flashgame" onfocus="this.blur（）;" title=" 小游戲中心 " href="http://xyx.kaixin001.com/?from=platform&blank=1"
target="_blank"> 小游戲中心<img class="extrai" src="http://
img.kaixin001.com.cn/images/newpage.gif"/></a></li></ul><ul><li ><a
class="app_l_sp app_group" onfocus="this.blur（）;" title=" 群組 "
href="/group/" > 群組 </a></li><li ><a class="app_l_sp app_weibo"
onfocus="this.blur（）;" title=" 微博 " href="/weibo/" > 微博 </a></li><li ><a class="app_l_sp app_dongta" onfocus="this.blur（）;" title=" 動他一下 " href="/～dongta/index.php?src=kxleft" > 動他一下 </a></li><li ><a class="app_l_spapp_file" onfocus="this.blur（）;" title=" 網絡硬盤 " href="/～file/index.php" > 網絡硬盤 </a></li><li ><a
class="app_l_spapp_yuan" onfocus="this.blur（）;" title=" 姓名緣分 "
href="/～yuan/index.php" > 姓名緣分 </a></li><li ><a

class="app_l_spapp_film" onfocus="this.blur（）;" title="電影 " href="/
app/?aid=1020&clickfrom=homeLeftDefaultRcmd" > 電影 </a></li></
ul><div class="appfuc"><a href="/app/list.html?
from=platform_addapp" class="magBtn"> 添加 </a><a href="/set/
appman2.php" class="magBtn"> 管理</a></div></div>

25.1.3 網站程序開發(fā)分析

社交類網站一般面向白領、學生等人群，且多為休閑性質，故大多數人不會花費太長時間等待頁面的下載，所以頁面中模塊下載速度不能太慢，下載時可以采用分塊下載的方法，其代碼入下：

01　<script type="text/javascript">02　//設置當前頁面加載方式：分塊快速加載

03　window.fastloadMode =　false;
04　varobjRecordsVars = {05　'preferred_privacy'　: 0,06　'preferred_album': 1,07　'privacy_tip'　: 0,08　'preferred_sign'　:　'0'　　//checked ? 0/109　};

10　function f_afterseluid（f_seluid）{11　if（parseInt（f_seluid））{12　window.location =　"/home/" +　f_seluid+".html";
13　}14　}15　var v_home_index_showlogo = 0;
16　var g_apppop_id = 0;
17　var g_reginto = parseInt（"0"）;
18　var g_apppop_filter = 0;
19　var g_profile_navtipnum =　"0";
20　function updateHashHistory（hash）{21　if（!hash）{22　hash = getPageHash（）;
23　}24　if（hash）{25　varstrtype = hash;

26　goToNews（strtype, 157821162, 157821162）;
27　}28　}29　function recoverMouseOver（event）

30　{31　event = event　|| window.event;
32　vartarget = $j（ event.target　|| event.srcElement ）;
33　target.parents（'.f_repaste:first'）.hide（）;
34　varel = $j（ preCloseBtn ）.parents（'.gw1:first'）.find（'div.
newscnt div'）;
35　el.css（　'background',　'#fff' ）;
36　el.find（'img:first'）.hide（）;
37　el[0].onmouseout =　function（）{38　el.find（'img:first'）.hide（）;
39　this.style.background='#fff';
40　}

41　}42　g_viewmode =　"";
43　varstateData = [];
44　varg_ouinfo =　'{"ou_type":1,"ou_id":157821162,"uid":
157821162}';
45　c4_g_commentouid =　"157821162";
46　c4_g_commentvuid =　"157821162";
47　g_home_ta =　"她 ";
48　g_home_ouid =　"157821162";
49　g_home_vuid =　"157821162";
50　g_home_commentright =　"1";
51　g_curr_news_type = 0;
52　g_app_photo_id =　"1";
53　g_app_diary_id =　"2";
54　g_app_record_id =　"1018";
55　g_app_repaste_id =　"1088";

56　g_app_state_id =　"3";
57　g_app_focus_id =　"1204";
58　g_app_vote_id =　"1016";
59　g_election_cnt =　"0";
60　</script>

在瀏覽器的右下角經常能夠看到浮動的彈出式文字、視頻，為用戶展示產品廣告或熱點新聞。實現該功能的代碼如下：

01　$j（function（）{02　/**03 熱門推薦相關交互定義

04　*/05　K.App（）.define（function（require）{06　var $ = require（'jQuery'）,07　CommandHandler;
08　CommandHandler = {09　'container':　'#freshmanCmd',

10　'events': {11　//換一換

12　'click a.j-fmc-change':　'onChangeClick',13　//關閉

14　'click a.j-fmc-close':　'onCloseClick',15　//點擊切換當前項

16　'click div.j-fmc-box':　'onItemClick',17　'click a.j-fmc-box':　'onItemClick',18　//鼠標懸浮，文字內容 slideup19　'mouseenter div.j-fmc-box':　'onItemMouseEnter',20　'mouseleave div.j-fmc-box':　'onItemMouseLeave'
21　},22　'main':　function（）{23　this._init（）;
24　},25　'_init':　function（）{

26　var container =　this.getContainer（）,27 me =　this;
28　this.selector = {29　'wrap':　'.j-fmc-wrap',30　'list':　'.j-fmc-list',31　'item':　'.j-fmc-item',32　'box':　'.j-fmc-box',33　'info':　'.j-fmc-info',34　'mask':　'.j-fmc-mask',35　'cnt':　'.j-fmc-cnt'
36　};
37　this.wrap = container.find（this.selector.wrap）;
38　this.list = container.find（this.selector.list）;
39　this.items = container.find（this.selector.item）;
40　this.slideTime = 400;　//文字 slideup時間

41　this.changeLock =　false;　//　"換一換 "鎖定

42　this.typeNumber = 4;　//種類，也可以理解為顯示的個數

43　this.itemWidth = 142;　//每個元素的寬度

44　//分類 items，存儲每類 items 和當前位置標記

45　//　itemCache = [{46　//　　　　items: [item1,　item2],47　//　curIndex: 048　//　}]49　this.itemCache = [];
50　$.each（this.items,　function（index, val）{51　vart =　index % me.typeNumber,52　type = me.itemCache[t]　|| {},53　arr =　type.items　|| [];
54　val = me.items.eq（index）;
55　val.attr（'data-fmcIndex',　index）;　//存儲每個元素的初始位置

56　arr.push（val）;

57　type.items = arr;
58 me.itemCache[t] =　type;
59　}）;
60　$.each（this.itemCache,　function（index, val）{61　val.curIndex = 0;
62　}）;
63　//　list中只保留當前組

64　this.list.children（':gt（' +（this.typeNumber - 1）+　'）'）.remove（）;
65　},66　/**67 準備換一換的下一組要顯示的數據

68　*/69　'prepareNextItems':　function（）{70　varitems;
71　$.each（this.itemCache,　function（index, val）{

72　var nextIndex =（val.curIndex + 1）% val.items.length,73　nextItem = val.items[nextIndex];
74　if（items）{75　items =　items.add（nextItem）;
76　}77　else {78　items = nextItem;
79　}80　}）;
81　this.list.append（items）;
82　},83　/**84 換一換事件響應

85　*/86　'onChangeClick':　function（evt）{87　evt.preventDefault（）;

88　$.post（

89　'/home/aj_myHomeEvent.php',90　{91　'actflag':　'lifeTimeShowChanged',92　'r':　Math.random（）

93　}94?。?
95　if（this.changeLock）{96　return;
97　}98　varme =　this;
99　this.changeLock =　true;
100　//準備新的下一頁數據

101　this.prepareNextItems（）;
102　//執(zhí)行下一頁動畫過程

103　this.list.animate（

104　{'left': -（this.itemWidth *　this.typeNumber）},105 500,106　function（）{107　//　itemCache中指針變?yōu)楫斍?/p>

108 $.each（me.itemCache,　function（index, val）{109 val.curIndex =（val.curIndex + 1）% val.items.length;
110　}）;
111　//刪除第一組數據，并使 list回歸

112 me.list.children（':lt（' + me.typeNumber +　'）'）.remove（）;
113 me.list.css（'left', 0）;
114　//解鎖

115 me.changeLock =　false;
116　}117　）;
118　},

119　/**120 關閉

121 */122　'onCloseClick':　function（evt）{123 evt.preventDefault（）;
124　this.getContainer（）.hide（）;
125 $.post（

126　'/home/aj_myHomeEvent.php',127　{128　'actflag':　'lifeTimeShowRecommend',129　'r':　Math.random（）

130　}131?。?
132　},133　/**134 點擊元素，切換同類的另一個數據

135 */136　'onItemClick':　function（evt）{137　//evt.preventDefault（）;
138 vartarget = $（evt.currentTarget）.parents（this.selector.
item）,139　idx = parseInt（target.attr（'data-fmcIndex'）, 10）,140　type =　idx %　this.typeNumber,141 cache =　this.itemCache[type],142 next;
143　//刪除現有項

144 cache.items.splice（cache.curIndex, 1）;
145　if（cache.items.length）{146 cache.curIndex = cache.curIndex % cache.items.length;
147 next = cache.items[cache.curIndex];
148　target.animate（{'opacity': 0}, 100,　function（）{149　target.after（next）.remove（）;

150　}）;
151　}152　//已經沒有該類數據

153 else {154　this.getContainer（）.hide（）;
155　}156　},157　/**158 mouseover時，文字描述 slideUp159 */160　'onItemMouseEnter':　function（evt）{161 vartarget = $（evt.currentTarget）,162　info =　target.find（this.selector.info）,163 mask =　target.find（this.selector.mask）,164 cnt =　target.find（this.selector.cnt）;
165　info.stop（）.animate（{'height':　'118px'},　

this.slideTime）;
166 cnt.stop（）.animate（{'padding-top':　'8px'},　

this.slideTime）;
167 mask.css（{'height':　'118px'}）;
168　},169　/**170 mouseout時，文字描述 slideDown171 */172　'onItemMouseLeave':　function（evt）{173 vartarget = $（evt.currentTarget）,174　info =　target.find（this.selector.info）,175 mask =　target.find（this.selector.mask）,176 cnt =　target.find（this.selector.cnt）;
177　info.stop（）.animate（{'height':　'22px'},　this.slideTime）;
178 cnt.stop（）.animate（{'padding-top':　'2px'},　

this.slideTime）;
179　}

180　};
181　return CommandHandler;
182　}）;
183　}）;
184 </script>

25.2 建站之制作自己的社交網站

開心網的效仿對象是Facebook的模式：廣告收入+增值服務收費。

在中國，網民已經形成了網絡就是免費午餐的思維定勢，一旦向用戶收費，用戶數量無疑會受到很大限制。因此，在中國直接向用戶收費是不明智的。而利用廣告呢？現在開心網的用戶是因為其沒有廣告，是一片輕松休閑的網絡凈土，所以才留下的。當某一天，打開開心網頁面卻被大量廣告包圍，用戶是否會依然光顧，將是個問題。

如何才能打破僵局呢？有如下兩點可以考慮。

⑴ 網站內容方面，使自己的網站內容獨具一格，使人欲罷不能。

⑵ 廣告方式方面，可以采用巧妙的方式植入廣告，創(chuàng)造多贏局面。

25.2.1 需求分析

網站建設之前，一定要進行全面、理性的市場分析，指導網站建設的定位。對于社交類網站，首先要確定的就是用戶群，根據不同的用戶群確定網頁是否進行視覺界面定制。

比如，專業(yè)人群用戶。專業(yè)用戶主要指具有高素質、專業(yè)化的中青年白領，具體是年輕化、高學歷化、具有資深互聯(lián)網經驗的用戶群。

這類人群熱衷與大眾分享自我，愛好原創(chuàng)內容，在設計方面有一技之長，而且作為互聯(lián)網的從業(yè)人員也較多。網頁的視覺界面定制就是一種很好的方式，可以充分展現自己的個性、身份和價值觀。

普通非專業(yè)人群用戶。中國互聯(lián)網數據研究咨詢中心發(fā)布的調查數據顯示，國內超過75%的網民為普通非專業(yè)用戶，這類人群不具備互聯(lián)網專業(yè)技能，他們需要通過設計網站提供的模板平臺來局部性地更換視覺元素，以網站提供的可更換視覺要素來滿足自己的個性需求?？紤]到普通非專業(yè)用戶人群更喜歡快捷、易懂、易操作的方式，設計師應該提供豐富多彩的視覺界面，采用推薦的方式為用戶推出不同風格的個性化模板，根據不同的用戶群確定頁面風格。

此類網站設計的技術和內容還有很多，需要設計師根據面向人群、開發(fā)技術、開發(fā)周期及資金投入等方面進行綜合權衡，從而進行網站的制作。

25.2.2 配置分析

本小節(jié)制作的社交網站采用 JSP 和 SQL Server 開發(fā)。用戶數設

計不低于 500 萬，而其他的用戶相關的記錄，如“我看過的電影”之類的，則更多。如此大量的數據放在一張表里面，肯定會出問題，所以必須采用分表存儲，這樣就涉及用哪種規(guī)則來分表。一般情況下有兩種方式，即用ID和日期來分。對于用戶，大多還是會用用戶ID作為規(guī)則。在此，仿照開心網的布局，將數據庫設計成用戶中心為一個庫，其他每個模塊為獨立的庫。其中，每個庫都可以做成Master/
Slave的模式，實現讀寫分離和備份?？紤]到若讀操作很大量，則可以在 slave 前放置一個 LVS 實現負載均衡（MySQL Proxy 可以實現類似的功能），以保證數據庫的穩(wěn)定性。雖然是獨立的庫，但是服務器有可能是同一臺。

25.2.3 網站制作步驟

采用JDBC-ODBC橋接的方法來實現數據庫的連接，完成數據庫的創(chuàng)建后，須在控制面板中創(chuàng)建ODBC數據源。其代碼如下：

01　package dreamtime.dreamnews;
02　import　java.sql.*;
03　import　java.util.*;
04　import　java.io.*;
05　public class DBConnection {06　private Connection conn;

22　return conn;　}}

系統(tǒng)前臺主頁主要代碼如下：

01　<!--header -->02　<div　id="header">03　<h1　id="logo-text"><a href="index.
html"title="">FACEBOOK</a></h1>04　<!--　<p　id="slogan">關于我的社區(qū)那些事兒</p>05　-->06　<div　id="header-links">07　<p>08　<a href="a/index.html">登錄</a>　|09　<a href="a/index.html">注冊</a>10　</p>11　</div>12　<!--header ends-->13　</div>

• 建站
• 社交網站