{%hackmd BJrTq20hE %}
# 簡報&心得

## 網頁內容
1. 排版
2. 頁首
3. 首頁-css動畫
4. 二選一
5. 雜誌
6. 偽專欄(帳號)

## 1.排版
### 三欄式
利用div將畫面分割，加上css來美化，來達到排版的結果

---

#### 1.範例:

  <style type="text/css">
    #sitebody{
    width:100%;
    height:100% ;
    font-size:30px;
    }
    #header{
    background-color:#FFD4D4;
    height:80px;
    text-align:center;
    line-height:80px;
    width: 100%;
    }
    #sidebar_left{
    left: 0%;
    background-color:#FFECC9;
    width:25%;
    height:400px;
    text-align:center;
    line-height:400px;
    float:left;
    }
    #sidebar_right{
    background-color:#FFECC9;
    left: 75%;
    width:25%;
    height:400px;
    text-align:center;
    line-height:400px;
    float:right;
    }
    #content{
    margin-left:25%;
    margin-right:25%;
    left: 25%;
    width: 50%;
    height:400px;
    background-color:#F2FFF2;
    text-align:center;
    line-height:400px;
    }
    #footer{
    clear:both; /*清除浮動*/
    background-color:#FFD4D4;
    height:80px;
    text-align:center;
    line-height:80px;
    width: 100%;
    }
    </style>
    <div id="sitebody">
        <div id="header">header</div>
        <div id="sidebar_left">sidebar_left</div>
        <div id="sidebar_right">sidebar_right</div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>

結果:
#### 2.常用語法

1. `class` `id` :將各個元素取名，方便css控制。
2. css選擇器: `#` 指向`id`、`.`指向`class`
3. `height` `width` : 設定我們版面的寬度高度
4. `background-color` : 設定背景顏色
5. `position`:控制版面位置，有`fixed`、`abosolute`、`relative`、`auto` 等不同模式
---
## 2.頁首
### 善用排版以及ul li
#### 1.範例:

  <style>
*{margin:0;}
*{padding:0;}
  
  a {
    display: block;
    text-decoration: none;
    color: #fff;
  }
  .idonno {
    display:inline;
  
    position: auto
  }
  .idonno ul li {
    display:inline;
  
  }
  .main-header {
    background-color: rgba(255, 255, 255, 0.0);
  
  }
  #cen{
    display: flex;          
    align-items: center;
  
  }

  
  .container {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
  }
  
  .main-header h1 {
    line-height: 60px;
    margin: 0 15px;
  }
  
  .main-menu {
    display: flex;
    position: relative;
  }
  #main-menu{
    z-index: 999;
  }
  
  .main-menu li {
    position: relative;
    transition: .5s;
  }
  
  .main-menu li a {
    padding: 0 15px;
    line-height: 60px;
  }
  
  .main-menu>li::after {
    content: '';
    position: absolute;
    height: 4px;
    left: 50%;
    right: 50%;
    bottom: 0;
    background-color: #fff;
    transition: .5s;
  }
  
  .main-menu li:hover {
    background-color: rgb(176, 41, 20);
  }
  
  .main-menu>li:hover::after {
    left: 0;
    right: 0;
  }
  
  .sub-menu {
    position: absolute;
    left: 50%;
    background-color: rgba(232, 48, 21, 0.8);
    width: 150%;
    text-align: center;
    transform: translateX(-50%);
    display: none;
  }
  
  .main-menu li:hover .sub-menu {
    display: block;
  }
  
  
  
 
  </style>

    
    
      <div id="header"  
      style="background-image:url(https://i.imgur.com/0Olk08K.jpg) ;
      width: auto;height: auto;">
      
      
      
        <div class="idonno" style="z-index: index 999;">
          <header class="main-header">
          <div class="container" style="z-index: index 999;">
          <h2 id="cen"><a href="https://my00bigbig.github.io/firstpage/">全是夢一場</a></h2>
          <nav>
            <div id="main-menu">
            <ul class="main-menu" >
            <li><h4><a href="https://my00bigbig.github.io/aboutme/">關於我們</a></h4></li>
            <li>
              <h4><a href="#">作品們</a></h4>
              <ul class="sub-menu">
              <li><a href="https://my00bigbig.github.io/lucky/"><font face="sans-serif" size="2">殘酷二選一</font></a></li>
              <li><a href="https://my00bigbig.github.io/readmore/"><font face="sans-serif" size="2">雜誌們</font></a></li>

              </ul>
            </li>
            <li>
              <h4><a href="#">聯絡我們</a></h4>
              <ul class="sub-menu">
                <li><a href="https://www.facebook.com/profile.php?id=100014031043643"><font face="sans-serif" size="2">FB</font></a></li>
                <li><a href="https://www.instagram.com/linda_x04a/"><font face="sans-serif" size="2">IG</font></a></li>
                
                </ul>
            </li>            </ul>
          </div>
          </nav>
          </div>
          </header>
        </div>
      </div>

結果:

1. 利用 `ul` `li` ，也就是表格
2. 有用到一些動畫
3. `display: flex;` 排版神器

---

## 3.首頁-css動畫
### 1.STROLL
#### 1.範例:

<style>
  .animation{
	animation: jello 1s;
	animation-iteration-count: infinite;
}

@keyframes jello {
  from, 100%, to {
    transform: none;
  }

  22.2% {
    transform: skewX(0deg) skewY(-12deg);
  }

  33.3% {
    transform: skewX(0deg) skewY(6deg);
  }

  44.4% {
    transform: skewX(0deg) skewY(-3deg);
  }

  55.5% {
    transform: skewX(0deg) skewY(1deg);
  }

  66.6% {
    transform: skewX(0deg) skewY(-1deg);
  }

  77.7% {
    transform: skewX(0deg) skewY(1deg);
  }

  88.8% {
    transform: skewX(0deg) skewY(-1deg);
  }
}
</style>

<!--動畫-->
  <div> 
    <svg class="animation" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <line  class="hex" y1="110" y2="200" stroke="black" stroke-width="10"/>
    </svg>
  </div>

結果(左邊):


先準備一個 SVG 的形狀（這裡是直線），再用css執行動畫。

---

### 2.圖片放大
#### 範例:

<style>
.pic{width:275px; height:275px;overflow:hidden;} /*讓放大後超出去的圖片隱藏*/
.pic img{transform:scale(1,1);transition: all 1s ease-out;}
.pic img:hover{transform:scale(1.2,1.2);}


</style>

<div class="pic"><img src="https://i.imgur.com/T4DoK1w.png" width="275px" height="275px"  >
</div>        

結果:

這邊沒遇到什麼大問題，還行。

---
## 4.二選一
### 總說
這花了很大部分的時間在製作，這個並非我原創，但我的的確確花了時間去理解，不只是貼上。
js部分並沒有完全的理解，僅以能力範圍內來說明。

#### JS

共有5個檔案，jquery-1.7.2.min.js 我是真的沒有懂，就沒貼上來了

##### sort_tc

// 初始化
$(document).ready( function(){
  $("#result").hide();
  $("#ui").hide();
  $("#reset").hide();
  $("#start_button").bind("click", ask_start);
  $("#reset_button").bind("click", reset_do);
  $("#left > *" ).bind("click", {win:0, lose:1}, button_click);
  $("#right > *").bind("click", {win:1, lose:0}, button_click);
  if(show_result_from_hash()){
    $("#init").hide();
    $("#reset").show();
  }

});

// 檢查並顯示是否添加了結果
function show_result_from_hash(){
  if(location.search.length < 2){ return false; }
  var strParams = location.search.slice(1).split("-");
  Root = new CharacterItem(["!root",,,,]);
  var objPal = Root;
  for(var i=0; i<strParams.length; i++){
    for(var j=0; j<CharacterData.length; j++){
      if(strParams[i] == CharacterData[j][0]){
        var objChil = new CharacterItem(CharacterData[j]);
        objPal.add( objChil );
        objPal = objChil;
      }
    }
  }
  $("#rank_num").attr("value", strParams.length);
  show_result();
  return true;
}


// 開始
function ask_start(){
  QuestionCount = 0;
  NumLength = 0;
  var objFlg = {};
  var objFlt = $(":checkbox[name]");
  for(var i=0; i<objFlt.length; i++){
    objFlg[ objFlt.eq(i).attr("name") ] = (objFlt.eq(i).attr("checked")) ? true : false;
  }
  Root = new CharacterItem(["!root",,,,]);
  for(var i = 0; i < CharacterData.length; i++){
    var on = false;
    if(CharacterData[i][4].indexOf("?") >= 0 && !objFlg["none_name"]){ continue; }
    for(var j=0; j<CharacterData[i][4].length; j++){
      if(objFlg[ CharacterData[i][4].substr(j, 1) ] == true){
       on = true; break;
      }
    }
    if(on){
      Root.add( new CharacterItem(CharacterData[i]) );
      NumLength++;
    }
    
  }
  

  ask_next();
  
  $("#init").hide(0);
  $("#ui").fadeIn(1000);
  $("#reset").show();

}
// 下一題
function ask_next(){
  QuestionCount++;

//  $("#samp").html(Root.toString());
  Question = Root.ask();
  $("#count").text(QuestionCount);
  if(Question){
    if(Question[1].rank() - 1 > parseInt( $("#rank_num").attr("value") )){ return false; }
    view_character("#left",  Question[0]);
    view_character("#right", Question[1]);
    return true;
  }
  return false;
}

//從那個網址拉圖片 並拉data檔的內容
function view_character(id, data){
  $(id + " img").attr("src", "https://my00bigbig.github.io/" + data.img + ".jpg") 
  $(id + " img").attr("alt", data.name)
  $(id + " p").text(data.name);
  $(id + " h3").text(data.nick);
}

function view_progress(){

}

// 選
function button_click(arg){
  $("#left").fadeOut(0);
  $("#right").fadeOut(0);
  Question[arg.data.win].add(Question[arg.data.lose]);
  if(ask_next() == false){ show_result(); }
  $("#left").fadeIn(500);
  $("#right").fadeIn(500);

}

// 我也不知道
function remove_both(){
 Question[0].remove();
 Question[1].remove();
  if(ask_next() == false){ show_result(); }
}


function auto_sort(){
  var i=0;
  while(ask_next()){
    Question[0].add(Question[1]);
    i++;
  }
//  show_result();
  $("#times").html(i.toString() + ":" + NumLength + "/" + parseInt( $("#rank_num").attr("value") ));
  reset_do();
}

function reset_do(){
  
  $("#init").removeAttr("style");
  $("#ui").hide();
  $("#result").hide();
  $("#reset").hide();
  Question = null;
  Root = null;
  document.location = location.pathname;
}

// 結果表示
function show_result(){
  $("#ui").hide();
  $("#result").html("");
  var aryRanks = [];
  var objCur = Root.children[0];
  for(var i=0; i<parseInt( $("#rank_num").attr("value")); i++){
    aryRanks.push(objCur);
    if(objCur.children.length > 0){
      objCur = objCur.children[0];
    }else{ break; }
  }
  var strHtm = "";
  var strResults = [];
  strHtm += '\n<h2>排行結果發表！</h2>\n<ul class="rs_1st">\n';
  for(var i=0; i<aryRanks.length; i++){
    if(i==1){strHtm += '</ul>\n<ul class="rs_2nd">\n';}
    if(i==4){strHtm += '</ul>\n<ul class="rs_3rd">\n';}
    if(i>=10 && i%10 == 0){strHtm += '</ul>\n<ul class="rs_4th">\n';}
    strHtm += '<li><h3>' + (i+1).toString() +  '</h3><img src="https://my00bigbig.github.io/' + aryRanks[i].img  +  '.jpg" alt="' + aryRanks[i].nick + '"><br>' + aryRanks[i].name + '</li>\n';
    strResults.push(aryRanks[i].id);
  }
  
  //這邊可以改
  strHtm += '</ul>\n<div class="clear"><br>[<a href="?' + strResults.join("-") + //早安你好
  $("#result").html(strHtm);
  $("#result").fadeIn(1000);
}

//
function CharacterItem(data){
      
  if(!data){return;}
  this.id = data[0];
  this.name = data[1]; 
  this.nick = data[2];
  this.img  = data[3];
  this.attr = data[4];
  this.parent = null;
  this.children = [];
  this.rank = function(){  return (this.parent) ? this.parent.rank() + 1 : 1;  }

  //追加
  this.add = function(child){
    if(child.parent){
     child.parent.children.splice(jQuery.inArray(child, child.parent.children), 1);
    }
    this.children.push( child );
    child.parent = this;
  }

  // 文字列
  this.toString = function(){
  var str = "<li>" + this.name;
  if(this.children.length > 0){
    str += "<ul>";
    for(var i = 0; i < this.children.length; i++){
      str += this.children[i].toString();
    }
    str += "</ul>";
  }
  str += "</li>";
  return str;
  }

  // 縮小子節點
  this.ask = function(){
    if(this.children.length == 0){ return false; }
    if(this.children.length == 1){ return this.children[0].ask(); }
    var both = [0, 0]
    while(true){
      if(both[0] != both[1]){ break; }
      for(var i in [0,1]){
        both[i] = Math.floor(Math.random() * this.children.length);
      }
    }
    return [this.children[both[0]], this.children[both[1]]];
  }

  // 削除
  this.remove = function(){
   while(this.children.length > 0){
    this.parent.add(this.children[0]);
   }   
   this.parent.children.splice(jQuery.inArray(this, this.parent.children), 1);
  }

##### effect

$(document).ready(function() {
	//圖片移動
	var move = -15;
	var move_x = -15;
	var move_y = -50;
	//放大趴數, 1.2 =120%
	var zoom = 1.2;

	//當滑鼠放在圖上
	$('.zitem').hover(function() {
		//根據放大趴數設定寬高
		width = $('.zitem').width() * zoom;
		height = $('.zitem').height() * zoom;
		
		//移動&放大圖片
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move_y, 'left':move_x}, {duration:200});
		
		//顯示標題
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//重設圖片
		$(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//標題隱藏
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
});

##### data_tc
這應該是最簡單的，只是寫進去讓他拉而已。
然後廣瀨鈴她姊廣瀨愛麗絲真的比較正。

CharacterData = [

  [7,"山下美月","乃木坂46","4MCFI","alp"],
  [8,"齋藤飛鳥","神選中的美少女","4MCFN","alt"],
  [9,"橋本環奈","千年一遇美少女","4MCFQ","amq"],
  [11,"小芝風花","大空と大地の中で","4MCFT","bq"],
  [12,"永野芽郁","半分、青い。","4MCFX","bo"],
  [15,"吉岡里帆","日清小狐狸","4MCG7","bms"],
  [16,"濱邊美波","東寶灰姑娘","4MCGa","bq"],
  [17,"長濱ねる","欅坂46","4MCGe","0o"],
  [19,"西野七瀬","前乃木坂46","4MCGl","amts"],
  [34,"田村真佑","乃木坂46","4MCH8","vq"],
  [36,"與田祐希","乃木坂46","4MCHd","vmst"],
  [46,"早川聖來","乃木坂46","4MCHD","ums"],
  [154,"森田光","櫻坂46","8CVwG","ums"],
[158,"廣瀨鈴","姊姊比較正","9TTa8","ov"],
]

##### ui

$(document).ready( function(){

  $(".group").bind("click", select_all);
  $(":checkbox").bind("click", view_checked_icon_reset);
  view_checked_icon_reset();
  

});

function select_all(event){
  var objsIpt = $(this).parents("fieldset").find("input[type=checkbox]");
  if($(this).attr("checked")){
    objsIpt.attr("checked", "checked");
  }
  else{ objsIpt.removeAttr("checked"); }
}

function view_checked_icon(event){
  if($(this).attr("checked")){
    $(this).parent().attr("class", "checked");
  }
  else{ $(this).parent().attr("class", "unchecked"); }
}
function view_checked_icon_reset(){
  var objsChk = $(":checkbox");
  for(var i=0; i<objsChk.length; i++){
    if(objsChk.eq(i).attr("checked")){
      objsChk.eq(i).parent().attr("class", "checked");
    }
    else{ objsChk.eq(i).parent().attr("class", "unchecked"); }
    objsChk.eq(i).hide();
  }
}            

1. `var` `let` `const` 宣告變數
2. 變數必須使用 `字母（letter）`、 `_` 、 `$` 作為開頭
3. `function` 函式
4. `for` for迴圈 / `if...else` 就是if else
5. 布林(boolean)有兩種字面值： `true` `false`

#### CSS
共有2個檔案

##### effect

.zitem {
	width:200px;
	height:290px;	
	border:2px solid #333;	
	margin:5px 10px 5px 0;
	
	/* 一樣 超出的隱藏 */
	overflow:hidden;
	
	position:relative;
	
	/* div給我並排 */
	float:left;
	
	cursor: pointer;

	}

.zitem .caption {
	width:200px;
	height:80px;
	background:#000;
	color:#fff;
	/* 固定在底部 */
	position:absolute;
	left:0;

	/* 默認隱藏 */
	display:none;

	/*不透明度*/
	opacity: 0.7;   
}

.zitem .caption h3{
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
}
.zitem .caption p{
  font-size: 18px;
  font-weight: bold;
	text-align: right;
	font-family: serif;
}

.zitem .caption a {
	text-decoration:none;
	color:#fff;
	font-size:12px;	
	
	/* 添加間距(廢話阿就padding)並使整行可點擊*/
	padding:5px;
	display:block;
}

.zitem img{
	border:0;
	position:absolute;
}

.clear {
	clear:both;	
}

##### style

.init_win{
  width: 70%;
  margin: auto;
}

#ui{
  width: 430px;
  margin:auto;
}

.clear{
  text-align: center;
}

address{
  color: black;
	text-shadow: #ccc 3px 3px 5px;
	border-top: #ccc 1px dashed;
	text-indent: .5em;
	text-align: right;
  font-size: x-small;
}

h1{
  color: black;
	text-shadow: #ccc 3px 3px 5px;
	border-bottom: #ccc 1px dashed;
	text-indent: .5em;
	text-align: center;
}

#center h2{
	text-shadow: #ccc 3px 3px 5px;
  color: black;
  text-align: center;
}
h3.count{
	text-shadow: #ccc 3px 3px 5px;
  color: black;
  text-align: center;
}

#init li{
  list-style-type: none;
}

#init ul{
  margin: 0;
  padding-left: 1em;
}

label.labe2{
  cursor: pointer;
}

label.unchecked:before{
  content: url("delete.png");
}
label.checked:before{
  content: url("add.png");
}

#init{
 margin: auto;
}


#init fieldset{
  float: left;
  height: 50%;
  margin: 5px;
	border: 1px #5f7279 solid;
	border-left: 10px #5f7279 solid;

}

legend{
	font-weight: bold;
}

#result ul{
  clear: left;
}

#result li{
  list-style-type: none;
  text-align: center;
  font-weight: bold;
  float: left;
  color: black;
	text-shadow: #ccc 3px 3px 5px;
}

#result h3{
  margin: .5em 3px 0 3px;
  background-color: #9cf;
  color: #fff;

}




/*設定結果時圖片的大小*/
.rs_1st li{
  width: 40%;
  font-size: small;
  
}
.rs_1st img{
  width: 200px;
}

.rs_2nd li{
  width: 30%;
  font-size: small;
}
.rs_2nd img{
  width: 150px;
}

.rs_3rd li{
  width: 20%;
  font-size: small;
}

.rs_3rd img{
  width: 100px;
}

.rs_4th li{
  width: 15%;
  font-size: small;
}

.rs_4th img{
  width: 75px;
}

button {
	background: -moz-linear-gradient(top,#5f7279, #394448 50%,#4c5b60 50%,#262d30);
	background: -webkit-gradient(linear, left top, left bottom, from(#5f7279), color-stop(0.5,#394448), color-stop(0.5,#4c5b60), to(#262d30));
	border: 1px solid #DDD;
	color: #FFF;
	padding: 5px 5px;
}

button:hover {
	background: -moz-linear-gradient(top,#262d30, #4c5b60 50%,#394448 50%,#5f7279);
	background: -webkit-gradient(linear, left top, left bottom, from(#262d30), color-stop(0.5,#4c5b60), color-stop(0.5,#394448), to(#5f7279));
	border: 1px solid #DDD;
	color: #FFF;
	padding: 5px 5px;
}

#### HTML

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>哪一個比較婆</title>
  <script type="text/javascript" defer="" async="" src="http://knuckmew.kwikphp.com/piwik/piwik.js"></script><script src="jquery-1.7.2.min.js"></script>
  <script src="data_tc.js"></script>
  <script src="sort_tc.js"></script>
  <script src="effect.js"></script>
  <script src="ui.js"></script>
  <link rel="stylesheet" href="effect.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="typesetting.css">
  <link rel="stylesheet" href="csstest.css">



  </head>
  <body  background="https://i.imgur.com/JtqVONN.png" style="z-index: index -100;height: 0px;" >
    
    
      
      
        <div id="sidebar_left" style="height: 100%" style="z-index: index -111;">

        </div>
        <div id="sidebar_right" style="height: 100%" style="z-index: index -111;">
          
          
        </div>

        <div id="content" style="z-index: -100;">
          <div>
            <section id="blank3"> </section>
            <hr class="style-one" />
            <section id="blank3"> </section>
            <div id="media"><font face="sans-serif" size="5"><strong>排序介紹和使用</strong></font></div>
            <section id="blank3"> </section>
          <div id="naiwei" style="margin-left: 100px;color: #44566D;">
          <p     align = "left">
            利用此排序來建立排名表。<br/>
            記得要勾選<br/>
            <img src="https://i.imgur.com/SHCXCu3.png"><br/>
            如果兩者都不喜歡，請選擇"都不感興趣"。<br/>

            *照片好難找<br/>
            選擇完成後將顯示排名<br/>
            
          </p>
          </div>
          </div>
          <div class="title-line-two"></div>      

          <senction id="init">    
            <div class="init_win">
            <fieldset style="padding: 5 12 10 12;">
            <legend>
              <label class="unchecked"><input class="group" type="checkbox" style="display: none;">全部(14)<font color="red"></font></label>
            </legend>
          
            <ul>
              <li><label class="checked"><input type="checkbox" name="l" style="display: none;">映像研雙人組(2)</label></li>
              <li><label class="checked"><input type="checkbox" name="o" style="display: none;">九八九九女優(3)</label></li>
              <li><label class="checked"><input type="checkbox" name="s" style="display: none;">大勢偶像選擇(5)</label></li>
              <li><label class="checked"><input type="checkbox" name="q" style="display: none;">九七零零女優(4)</label></li>
              
            </ul>
            </fieldset>
            <fieldset>
              <legend>選項</legend>
              <ul>
                <li><label class="labe2">排行顯示：<br>
                  <select id="rank_num">
                    <option value="1">只顯示第一名</option>
                    <option value="4">四名內</option>
                    <option value="10" selected="selected">十名內</option>
                    <option value="20">二十名內</option>
                    <option value="50">五十名內</option>
                    <option value="100">一百名內</option>
                    <option value="999">全部</option>
                  </select>
                </label></li>
              </ul>
            </fieldset>
            <div class="clear"><button id="start_button">開始排行！</button></div>
            </div>
          
          </senction>
          
          <section id="ui" style="display: none;">
            <h2>請選擇比較喜歡的一方</h2>
              <h3 class="count">Question No.<span id="count">0</span></h3>
            <div class="zitem" id="left">
              <div><img width="200" height="290"></div>
              <div class="caption">
                <h3 class="nick"></h3>
                <p class="name"></p>
              </div>
            </div>
            <div class="zitem" id="right">
              <div><img width="200" height="290"></div>
              <div class="caption">
                <h3 class="nick"></h3>
                <p class="name"></p>
              </div>
            </div>
            <div class="clear"><button id="n" onclick="remove_both()">都不感興趣</button></div>
            <!--button onclick="auto_sort()">AUTO</button-->
          </section>
          
          <section id="result" style="display: none;">
          </section>
          
          
          <p id="times"></p>
          <ul id="samp"></ul>
          
          <section id="reset" style="display: none;"><button id="reset_button">重置</button></section>
          
          <!-- Piwik -->
          <script type="text/javascript">
            var _paq = _paq || [];
            _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
            _paq.push(["setDomains", ["*.km-ul.kwikphp.com"]]);
            _paq.push(["trackPageView"]);
            _paq.push(["enableLinkTracking"]);
          
            (function() {
              var u=(("https:" == document.location.protocol) ? "https" : "http") + "://knuckmew.kwikphp.com/piwik/";
              _paq.push(["setTrackerUrl", u+"piwik.php"]);
              _paq.push(["setSiteId", "2"]);
              var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
              g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
            })();
          </script>
          
          
            
            </div>
        
            
        </div>
        <br><br><br>
        </body></html>
    

結果:
https://my00bigbig.github.io/lucky/

光能讓他正常用作就已經讓我快往生，大量的內容更是一大負擔，這邊也是之後需要再研究的地方，尤其是js。

---

## 5.雜誌

<style>
    #oneul{
    float: right;
    left: -50%;
    position: relative;
  }
   
  .one{
  float:left;
  left: 50%;
  position: relative;
  }
  .item{
    width: 33.63px;
    height: 32px;
    border: 1px solid #CCCCCC;
    margin:0 0 -1px -1px ;
    position: relative;
    z-index: 0;
    margin-right: 3px;
}
.itemm{
    background-color: #F3F3F3;
    width: 33.63px;
    height: 32px;
    border: 1px solid #f4f4f4;
    margin:0 0 -1px -1px ;
    position: relative;
    z-index: 0;

}
.itemm:hover{
    border-color: #CCCCCC;
    z-index: 1;
}


</style>
<div id="oneul">
    <ul class="one">
        <li class="item" style="margin-right: 5px;">
          <a href="index.html"><p style="color: #CCCCCC;padding: 8px 12px 8px 12px;">1</p></a> 
        </li>
        <li class="itemm" style="margin-right: 5px;">
          <a href="page2.html"><p style="color: #757575;padding: 8px 12px 8px 12px;">2</p></a> 
        </li>
        <li class="itemm" style="margin-right: 5px;">
          <a href="page3.html"><p style="color: #757575;padding: 8px 12px 8px 12px;">3</p></a> 
        </li>
        <li class="itemm" style="margin-right: 5px;">
          <a href="page4.html"><p style="color: #757575;padding: 8px 12px 8px 12px;">4</p></a> 
        </li>
        <li class="itemm" style="margin-right: 5px;">
          <a href="page5.html"><p style="color: #757575;padding: 8px 12px 8px 12px;">5</p></a>  
        </li>
    </ul>
  </div>

沒什麼技術含量，最值得說的應該是


這個按鍵，我弄超久，每次有設計方面的就整個很頭大。
利用item跟itemm之間切換，來讓其中一顆長得不一樣，成果不一定每個人喜歡，至少我是有滿意。

---

## 6.偽專欄(帳號)
結果:

沒什麼技術含量，單純是想偽造一個有人在發文的假象。
也許可以做為之後繼續研究的主題（變成真的可以發文）。

---

## 總結 (心得)

前前後後花了近一個月才完成大部分的內容，主要是在優化以及統一每一頁，過程雖然很累，但我做得很過癮。
常常一整天只完成了一個小動畫，會感覺很北七，花一堆時間只做了一點點，不過一步一腳印，最後的成果帶來的滿足感是十分巨大的。
在開始製作後，我認知到其實直接做會比查東查西來得快，且自己慢慢試錯，最後東西才是自己的。

內容方面，一開始只有二選一。後來想營造一個複合式的，除了二選一，也可以更深入(?)來觀賞自己選的人。

最後希望之後可以完成上面立的flag，把這個網站做得更完善，以上。