天天看點
傳回

很炫的個人首頁 做一個略調皮的個人首頁--菜單篇

做一個略調皮的個人首頁--菜單篇

  • 很炫的個人首頁 做一個略調皮的個人首頁--菜單篇
    #原創
  • 很炫的個人首頁 做一個略調皮的個人首頁--菜單篇
    CSS3
  • 很炫的個人首頁 做一個略調皮的個人首頁--菜單篇
    單頁面網站模闆
很炫的個人首頁 做一個略調皮的個人首頁--菜單篇

申請達人，去除贊助商連結

由于要重新找工作，是以做了一個自己的個人首頁，覺得還好，是以分享出來，也算是自己的一些記錄。

具體示範可以檢視我的個人首頁。

大體都是一些css3的應用，幹貨實在很少，做來玩樂罷了。

第一次寫這方面的文章，行散神也散，望海涵。

首先，先列出less檔案的公共部分以及常量。

公共類：

     
  1.  /*居中*/       
    2.       
  2.  .getCenter (@x, @y) {left:50%; right:50%; top:50%; bottom:50%; margin-left:- @x/2; margin-top: - @y/2;}       
    3.       
  3.  /*圓角*/       
    4.       
  4.  .getBorderRadius (@m) {       
    5.       
  5.  border-radius:@m;       
    6.       
  6.  -webkit-border-radius:@m;       
    7.       
  7.  -moz-border-radius:@m;       
    8.       
  8.  -ms-border-radius:@m;       
    9.       
  9.  }       
    10.       
  10.  /*過渡*/       
    11.       
  11.  .geTtransition  (@transition) {       
    12.       
  12.  -webkit-transition:@transition;       
    13.       
  13.  -moz-transition:@transition;       
    14.       
  14.  -o-transition:@transition;       
    15.       
  15.  -ms-transition:@transition;       
    16.       
  16.  transition:@transition;       
    17.       
  17.  }       
    18.           
  18.  /*形變*/       
    19.       
  19.  .getTransform (@transform) {       
    20.       
  20.  -webkit-transform:@transform;       
    21.       
  21.  -moz-transform:@transform;       
    22.       
  22.  -o-transform:@transform;       
    23.       
  23.  -ms-transform:@transform;       
    24.       
  24.  transform:@transform;       
    25.       
  25.  }       
    26.       
  26.  /* 陰影 */       
    27.       
  27.  .getBoxShdow (@boxshdow){       
    28.       
  28.  -webkit-box-shadow:@boxshdow;       
    29.       
  29.  -moz-box-shadow:@boxshdow;       
    30.       
  30.  -o-box-shadow:@boxshdow;       
    31.       
  31.  -ms-box-shadow:@boxshdow;       
    32.       
  32.  box-shadow:@boxshdow;       
    33.       
  33.  }       
    34.       
  34.  /*動畫*/       
    35.       
  35.  .getAnimate (@animate) {       
    36.       
  36.  animation: @animate;       
    37.       
  37.  -moz-animation: @animate;       
    38.       
  38.  -webkit-animation: @animate;       
    39.       
  39.  -ms-animation: @animate;       
    40.       
  40.  -o-animation: @animate;       
    41.       
  41.  }       
    42.       
  42.  .getTransform (@transform) {       
    43.       
  43.  -webkit-transform:@transform;       
    44.       
  44.  -moz-transform:@transform;       
    45.       
  45.  -o-transform:@transform;       
    46.       
  46.  -ms-transform:@transform;       
    47.       
  47.  transform:@transform;       
    48.       
  48.  }       
    49.           
  49.  /*形變*/       
    50.       
  50.  .getTransformOrgin (@transform) {       
    51.       
  51.  -webkit-transform-origin:@transform;       
    52.       
  52.  -moz-transform-origin:@transform;       
    53.       
  53.  -o-transform-origin:@transform;       
    54.       
  54.  -ms-transform-origin:@transform;       
    55.       
  55.  transform-origin:@transform;       
    56.       
  56.  }       
    57.       
  57.  /* 梯度漸變 */       
    58.       
  58.  .getGradient(@type, @color1, @color2) {       
    59.       
  59.  background:-moz-linear-gradient(@type, @color1, @color2);/*Mozilla*/       
    60.       
  60.  background:-webkit-linear-gradient(@type, @color1, @color2);/*new gradient for Webkit*/       
    61.       
  61.  background:-o-linear-gradient(@type, @color1, @color2); /*Opera11*/       
    62.       
  62.  background:-ms-linear-gradient(@type, @color1, @color2); /*Ie 11+*/       
    63.       
  63.  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr= @color1,endcolorstr= @color2,gradientType=0); /*Ie 10-*/       
    64.       
  64.  }       
    65.

常量：

     
  1.  @color1:#E8B118; //菜單顔色       
    2.       
  2.  @color2:#DC7913; //菜單顔色       
    3.       
  3.  @color3:#CE1131; //菜單顔色       
    4.       
  4.  @color4:#A71955; //菜單顔色       
    5.       
  5.  @color5:#33619F; //菜單顔色       
    6.       
  6.  @color6:#149B70; //菜單顔色       
    7.       
  7.  @color7:#79B053; //菜單顔色       
    8.       
  8.  @animateTime : 300ms; //動畫時間       
    9.       
  9.  @delay : 50ms; //延時時間       
    10.

 然後先把html的代碼寫出來，總共是7個菜單的标簽，以及5個區域的标簽。

整個頁面的展現形式最終會有五種，分别為 normal left right left right。

     
  1.  <ul class="indexMenu">       
    2.       
  2.  <li data-type="normal"><span class="glyphicon glyphicon-home" ></span><em class=" rel">我的首頁</em></li>       
    3.       
  3.  <li data-type="left"><span class="glyphicon glyphicon-user " ></span><em class=" rel">我的資訊</em></li>       
    4.       
  4.  <li data-type="top"><span class="glyphicon glyphicon-picture "></span><em class=" rel">我的相冊</em></li>       
    5.       
  5.  <li data-type="right"><span class="glyphicon glyphicon-pencil "></span><em class=" rel">我的随筆</em></li>       
    6.       
  6.  <li data-type="bottom"><span class="glyphicon glyphicon-film "></span><em class=" rel">我的臨摹網站</em></li>       
    7.       
  7.  <li data-type="left"><span class="glyphicon glyphicon-folder-open "></span><em class=" rel">我的工作經曆</em></li>       
    8.       
  8.  <li data-type="right"><span class="glyphicon glyphicon-send "></span><em class=" rel">我的遊戲</em></li>       
    9.       
  9.  </ul>       
    10.       
  10.  <section class="area_main abs ovh"></section>       
    11.       
  11.  <section class="area_right abs"></section>       
    12.       
  12.  <section class="area_left abs"></section>       
    13.       
  13.  <section class="area_top abs"></section>       
    14.       
  14.  <section class="area_bottom abs"></section>       
    15.

 用到了一些boot的glyphicon标簽。大體的結構差不多就是這些代碼就夠了，下面我們來建構第一個頁面。

很炫的個人首頁 做一個略調皮的個人首頁--菜單篇

首先是7個标簽的css樣式：

     
  1.  .indexMenu{       
    2.       
  2.  display:block; width:100%;height:100%; z-index:5;position:absolute;top:0px;left:0px;       
    3.       
  3.  .geTtransition(all @animateTime ease);       
    4.       
  4.  li {       
    5.       
  5.  width:100%;height:14.285%;color:#FFF; cursor:pointer;position:relative;left:0px;top:0px;       
    6.       
  6.  em{       
    7.       
  7.  line-height:36px;font-size:18px;top:50%;margin-top:-18px;float:right;       
    8.       
  8.  .geTtransition(all @animateTime ease );       
    9.       
  9.  }       
    10.       
  10.  span {       
    11.       
  11.  font-size:36px;top:50%;margin-top:-18px;display:block;width:90px !important;text-align:center; float:right;       
    12.       
  12.  .geTtransition(all @animateTime ease );       
    13.       
  13.  }       
    14.       
  14.  }       
    15.       
  15.  li:hover{padding-right:40px;}       
    16.       
  16.  li:nth-child(1){background:@color1; }       
    17.       
  17.  li:nth-child(1):hover{background:lighten(@color1,10%)}       
    18.       
  18.  li:nth-child(2){background:@color2;}       
    19.       
  19.  li:nth-child(2):hover{background:lighten(@color2,10%);}       
    20.       
  20.  li:nth-child(3){background:@color3;}       
    21.       
  21.  li:nth-child(3):hover{background:lighten(@color3,10%);}       
    22.       
  22.  li:nth-child(4){background:@color4;}       
    23.       
  23.  li:nth-child(4):hover{background:lighten(@color4,10%);}       
    24.       
  24.  li:nth-child(5){background:@color5;}       
    25.       
  25.  li:nth-child(5):hover{background:lighten(@color5,10%);}       
    26.       
  26.  li:nth-child(6){background:@color6;}       
    27.       
  27.  li:nth-child(6):hover{background:lighten(@color6,10%);}       
    28.       
  28.  li:nth-child(7){background:@color7;}       
    29.       
  29.  li:nth-child(7):hover{background:lighten(@color7,10%);}       
    30.       
  30.  }       
    31.

然後是所有詳細區域的樣式：

     
  1.  section{       
    2.       
  2.  width:100%;height:100%; background:#FFF; overflow:hidden;.geTtransition(all @animateTime ease);       
    3.       
  3.  }       
    4.

 area_main的樣式：

     
  1.  .	top:0px;left:-100%;padding-left:400px;z-index:6;       
    2.       
  2.  .getBorderRadius(350px);       
    3.       
  3.  .geTtransition(all @animateTime ease @animateTime);       
    4.       
  4.  }           area_main           {       
    5.

 注意現在的main_area 區域是隐藏在左側的，由于是有五種形态，但是操作的都是這些标簽，是以我把形态的辨別放在了body上，比如normal就是 <body class="type_normal"></body>

是以css的樣式還有這麼一句：

     
  1.  .type_normal{       
    2.       
  2.  .main_area{left:-400px;}       
    3.       
  3.  }       
    4.

 這樣整個第一種形态就差不多了。之後我們需要做的就是切換形态。我把形态的資訊用data-type的形式寫在了li标簽裡，這樣如果想改的話也很友善。每次切換形态簡單說來就是改變body的class。這樣就會改變css樣式，我們加了過渡和形變的樣式就會呈現動畫效果。這裡我們應用js控制：

     
  1.  /* 首頁菜單點選後跳轉效果 */       
    2.       
  2.  var menuClickType = {       
    3.      
    
     
  1.  'normal' : function () {}       
    2.      
    
     
  1.  ,           'left' : function () {}       
    2.      
    
     
  1.  ,           'top' : function () {}       
    2.      
    
     
  1.  ,           'right' : function () {}       
    2.      
    
     
  1.  ,           'bottom' : function () {}       
    2.      
    
     
  1.  }       
    2.      
    
     
  1.  var $menus = $('.indexMenu li');       
    2.      
    
     
  1.  $menus       
    2.       
  2.  /* 首頁菜單點選動作 */       
    3.       
  3.  .click(function () {       
    4.       
  4.  var $this = $(this), type = $this.data('type');//擷取type 展現形态辨別       
    5.       
  5.  menuClickType[type](); //調取相應的方法       
    6.       
  6.  });       
    7.

這樣基本的架構就搭好啦，開始做left的方法，首先我們先看一下left形态的效果：

很炫的個人首頁 做一個略調皮的個人首頁--菜單篇

然後是left形态的跳轉效果方法：

css樣式：

     
  1.  .type_left{       
    2.       
  2.  .indexMenu{       
    3.       
  3.  li:hover{       
    4.       
  4.  padding-right:0px;       
    5.       
  5.  margin-left:150px;       
    6.       
  6.  }       
    7.       
  7.  }       
    8.       
  8.  .area_main{       
    9.       
  9.  .geTtransition(all @animateTime ease);       
    10.       
  10.  }       
    11.       
  11.  .area_left{opacity:1;z-index:auto;}       
    12.       
  12.  }       
    13.

 js代碼：

     
  1.  $body.removeClass().addClass('type_left');       
    2.       
  2.  $menus.css({       
    3.       
  3.  'left':'-'+ (bodyWidth - 90) +'px'       
    4.       
  4.  ,'top' : '0px'       
    5.       
  5.  ,'height' : bodyHeight/7 + 'px'       
    6.       
  6.  });       
    7.

 這裡解釋一下，由于有很多東西不能單憑css去控制，也需要js輔助區控制。控制的主要屬性為top，left 以及 height，top的控制是以後要用，這裡的從normal 轉換到left 形态，隻是改變了left的值，至于height屬性，是由于以後展現的要求，我把菜單的ul的高設成了0。這樣它才不會阻擋住螢幕，而其中li的高度自然就需要手動的去加上去。

然後在type_left的css中，加入菜單的hover效果（和normal下是不一樣的）。以及main和left區域的效果，這裡我們需要把area_left區域展現出來，并且把.area_main區域收起，由于已經去掉了body上 type_normal 的樣式，是以area_main區域就自動的縮回左邊去了。

最後在加上菜單有順序的向左移動，好像波浪一樣的效果，主要是css3的過渡代碼：

     
  1.  li:nth-child(1){background:@color1; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 1)}       
    2.       
  2.  li:nth-child(1):hover{background:lighten(@color1,10%)}       
    3.       
  3.  li:nth-child(2){background:@color2; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 2)}       
    4.       
  4.  li:nth-child(2):hover{background:lighten(@color2,10%);}       
    5.       
  5.  li:nth-child(3){background:@color3; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 3)}       
    6.       
  6.  li:nth-child(3):hover{background:lighten(@color3,10%);}       
    7.       
  7.  li:nth-child(4){background:@color4; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 4)}       
    8.       
  8.  li:nth-child(4):hover{background:lighten(@color4,10%);}       
    9.       
  9.  li:nth-child(5){background:@color5; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 5)}       
    10.       
  10.  li:nth-child(5):hover{background:lighten(@color5,10%);}       
    11.       
  11.  li:nth-child(6){background:@color6; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 6)}       
    12.       
  12.  li:nth-child(6):hover{background:lighten(@color6,10%);}       
    13.       
  13.  li:nth-child(7){background:@color7; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 7)}       
    14.       
  14.  li:nth-child(7):hover{background:lighten(@color7,10%);}       
    15.

 把之前的li标簽的css樣式增加一些東西，這裡就是增加了過渡，給left屬性的過渡增加延時，标簽index越大，延時就越多，這樣就可以做出首頁中的動畫效果啦。

animateTime 和 delay 都是上面設定的常量。

當然我們還要從left能回到 normal 形态上。是以 normal的js代碼是：

     
  1.  $body.removeClass().addClass('type_normal');       
    2.       
  2.  $menus.css({       
    3.       
  3.  'left':'0px'       
    4.       
  4.  ,'top' : '0px'       
    5.       
  5.  ,'height' : bodyHeight/7 + 'px'       
    6.       
  6.  });       
    7.

這樣，從normal 形态 到left 形态的效果就做好了。就是示範中第一個按鈕我的首頁以及第二個按鈕我的資訊的點選效果。

 之後來看第三個形态——right形态的效果：

很炫的個人首頁 做一個略調皮的個人首頁--菜單篇

這個菜單是沒有動的，隻是相對應的區域（section）從左側滑了出來，是以這個是很好做的。

css樣式：

     
  1.  .area_right{       
    2.       
  2.  z-index:6;overflow:hidden;top:0px;left:-100%;padding-left:90px;       
    3.       
  3.  }       
    4.       
  4.  .type_right{       
    5.       
  5.  .indexMenu{       
    6.       
  6.  li{left:0px;}       
    7.       
  7.  }       
    8.       
  8.  .area_main{       
    9.       
  9.  .geTtransition(all @animateTime ease);       
    10.       
  10.  }       
    11.       
  11.  .area_right{       
    12.       
  12.  left:-90px;       
    13.       
  13.  .geTtransition(all @animateTime ease @animateTime);       
    14.       
  14.  }       
    15.       
  15.  .indexMenu{       
    16.       
  16.  li:hover{       
    17.       
  17.  padding-right:0px;       
    18.       
  18.  span{       
    19.       
  19.  .getAnimate(animate_menu @animateTime ease);       
    20.       
  20.  }       
    21.       
  21.  }       
    22.       
  22.  }       
    23.       
  23.  }       
    24.

 js代碼：

     
  1.  $body.removeClass().addClass('type_right' );       
    2.       
  2.  $menus.css({       
    3.       
  3.  'left':'0px'       
    4.       
  4.  ,'top' : '0px'       
    5.       
  5.  ,'height' : bodyHeight/7 + 'px'       
    6.       
  6.  });       
    7.

 值得注意的一點事，這三種形态的css代碼中，都有area_main的樣式，但是隻有一句過渡的，不同的地方時有的有延時，有的沒有，這個是考慮normal形态和right形态切換的時候，其實就area_main向左收回，area_right向右展開，如果同時進行，很不友好，是以呢，就加了這個延時。具體的邏輯大家試一下就知道啦。

 然後是top和bottom。這兩個其實是一回事，隻不過一個在上一個在下，隻挑一個top說一下即可。

top形态：

很炫的個人首頁 做一個略調皮的個人首頁--菜單篇

bottom形态：

很炫的個人首頁 做一個略調皮的個人首頁--菜單篇

這個是把整個菜單标簽的結構都給換了，以前是 width:100%; height:100%/7。 現在是 反過來了，是以每次做變化之前，都需要把标簽全部移動到上方（或者下方）的螢幕外，然後做變化，再顯示出來。具體動畫效果請參考示範。

具體的cssy樣式：

     
  1.  .type_top_end{       
    2.       
  2.  .indexMenu{       
    3.       
  3.  height:100%;       
    4.       
  4.  top:-100%;       
    5.       
  5.  }       
    6.       
  6.  .main_area{       
    7.       
  7.  .geTtransition(all @animateTime ease);       
    8.       
  8.  }       
    9.       
  9.  }       
    10.       
  10.  .type_top{       
    11.       
  11.  .indexMenu{       
    12.       
  12.  height:100%;       
    13.       
  13.  top:-100%;       
    14.       
  14.  li {       
    15.       
  15.  height:100% !important;width:14.285%;float:left;left:0px;overflow:hidden;       
    16.       
  16.  .geTtransition3(all 0s ease, top @animateTime ease, background @animateTime ease);       
    17.       
  17.  em{       
    18.       
  18.  position:absolute;bottom:5px;top:auto;width:100%;text-align:center;opacity:0;       
    19.       
  19.  .getTransform(scale(2));       
    20.       
  20.  }       
    21.       
  21.  span {       
    22.       
  22.  top:100%;margin-top:-40px;float:none;left:50%;margin-left:-45px;.getTransform(scale(1));       
    23.       
  23.  }       
    24.       
  24.  }       
    25.       
  25.  li:hover{       
    26.       
  26.  padding-right:0px;       
    27.       
  27.  span{       
    28.       
  28.  opacity:0;       
    29.       
  29.  .getTransform(scale(2));       
    30.       
  30.  }       
    31.       
  31.  em{       
    32.       
  32.  opacity:1;       
    33.       
  33.  .getTransform(scale(1));       
    34.       
  34.  }       
    35.       
  35.  }       
    36.       
  36.  }       
    37.       
  37.  .area_top{opacity:1;z-index:auto;}       
    38.       
  38.  }       
    39.

 這裡有兩個css樣式，type_top_end是最終的顯示結果，type_top可以當做是變形的過程，這個設計有一些蹩腳，當時沒有設計好。

js代碼：

     
  1.  $body.removeClass().addClass('type_top_end' );       
    2.       
  2.  $menus.css({       
    3.       
  3.  'left':'0px'       
    4.       
  4.  ,'top' : '0px'       
    5.       
  5.  });       
    6.       
  6.  setTimeout(function () {       
    7.       
  7.  $body.addClass('type_top' );       
    8.       
  8.  $menus.css({       
    9.       
  9.  'left':'0px'       
    10.       
  10.  ,'top' : '43px'       
    11.       
  11.  });       
    12.       
  12.  } , animateTime);       
    13.

 先收到最上面去，然後setTImeout中 改變top的值，讓其在下來一部分。組成所見的标簽。

這樣，基本的效果就出現了，不過還是有一點的欠缺，具體說來：

第一，從top或者bottom效果便到别的效果時，動畫顯的很混亂；

第二，從top效果換到bottom效果時，也很亂；

第三，由于隻有五種展現形式，不過内容卻有七個，是以left和right是重複的兩個，那麼當從一個left跳轉到另一個left（如示範中第二個标簽——我的資訊跳轉到第六個标簽——我的工作經曆）時，也需要重新設定動畫。

為了解決這三個問題，我們先做一個限定，再次點選同一個标簽，是要屏蔽掉的。代碼如下：

     
  1.  $menus       
    2.       
  2.  /* 首頁菜單點選動作 */       
    3.       
  3.  .click(function () {       
    4.       
  4.  var $this = $(this), type = $this.data('type'), target = $this.data('target')       
    5.       
  5.  , $area = $('.area_'+ type),flag = $area.data('flag') ? $area.data('flag') : '';       
    6.      
    
     
  1.  if($body.hasClass('type_'+ type) && flag == target) return;       
    2.       
  2.  menuClickType[type](); //調取相應的方法       
    3.       
  3.  });       
    4.

這個屏蔽有兩個判斷，第二個判斷是加内容時候需要的，我們現在隻看第一個即可。

其次是解決第一個問題，即對top以及bottom形态的修正。我們寫一個方法：

     
  1.  /* type_top type_bottom 修正 */       
    2.       
  2.  function amend_top_bottom () {       
    3.       
  3.  if($body.hasClass('type_top') ||            $body.hasClass('type_bottom')           ){       
    4.      
    
     
  1.  $menus.css({       
    2.       
  2.  'left':'0px'       
    3.       
  3.  ,'top' : '0px'       
    4.       
  4.  });       
    5.       
  5.  return animateTime;       
    6.       
  6.  }       
    7.       
  7.  return 0;       
    8.       
  8.  }       
    9.

 然後在别的click點選事件中，調用這個方法，擷取一個數值，即延時，然後把之後的執行放到一個setTimeOut裡，延時即這個數值。當點選時目前的形态不是top或bottom時，傳回0，即馬上運作，當是這兩種形态時，即先把露出的菜單縮會，然後給一個animateTime的延時，這段延時後在走點選事件的方法，即可。

第二個問題。隻要在top 和bottom 的點選事件中 加一下是否目前形态為彼此的另一個即可，代碼為：

     
  1.  if($body.hasClass('type_bottom')){       
    2.       
  2.  $body.addClass('type_top' ).addClass('type_top_end').removeClass('type_bottom').removeClass('type_bottom_end');       
    3.       
  3.  $menus.css({       
    4.       
  4.  'left':'0px'       
    5.       
  5.  ,'top' : '43px'       
    6.       
  6.  });       
    7.       
  7.  else {       
    8.      
    
     
  1.  /*之前點選事件的代碼*/       
    2.       
  2.  }       
    3.

 效果可參考從第三個菜單——我的相冊點選到第五個菜單——我的臨摹網站的效果。

最後一個問題。就需要在left和right的方法中加入本身的判斷啦。具體代碼為：

     
  1.  var time = amend_top_bottom();       
    2.       
  2.  if($body.hasClass('type_right')){       
    3.       
  3.  time = animateTime;       
    4.       
  4.  $body.removeClass();       
    5.       
  5.  }       
    6.       
  6.  setTimeout (function () {       
    7.       
  7.  $body.removeClass().addClass('type_right' );       
    8.       
  8.  $menus.css({       
    9.       
  9.  'left':'0px'       
    10.       
  10.  ,'top' : '0px'       
    11.       
  11.  ,'height' : bodyHeight/7 + 'px'       
    12.       
  12.  });       
    13.       
  13.  }, time);       
    14.

 簡單說，就是在removeClass 和addClass之間加一個延時，即可。

這樣就達到了大體的效果。不過由于我的特定需求，讓代碼寫的有些随意，不是很好。如果規範一點，每次點選事件都需要判斷這樣幾件事，即：

1：是否是重複點選。

2：如果是重複點選，内容是否變動（5個形态，7個内容）,如果改變，則需要添加從本身變本身的動畫。

3：特殊前提（如是否是從top或bottom下變換過來等）。

html/css 創意 應用 個人首頁 #原創 css3 單頁面網站模闆
上一篇: 漂亮的個人首頁
下一篇: 表格做的個人首頁

繼續閱讀