學習筆記本

2014年8月5日星期二

2014年8月4日星期一

2014年8月3日星期日

成品連結：演示

技巧1：

滑動選單基本上就在寫CSS，先用CSS寫出想要的樣子，要將子選項寫在選項當中
HTML:

  <div id="home-menu">
    <div class="title">全站分類/div>
    <div class="menu1">
      <li><a href="#"><h1>筆記型電腦</h1></a>
       <dl>
         <dt>
            <a href="#"><h2>ACER 宏碁</h2></a>
            <a href="#"><h2>ASUS 華碩</h2></a>
            <a href="#"><h2>HP 惠普</h2></a>
            <a href="#"><h2>LENOVO 聯想</h2></a>
            <a href="#"><h2>MSI 微星</h2></a>
          </dt>  
          <dt>
            <a href="#"><h2>文書上網</h2></a>
            <a href="#"><h2>輕薄時尚</h2></a>
            <a href="#"><h2>影音娛樂</h2></a>
            <a href="#"><h2>行動商務</h2></a>
            <a href="#"><h2>遊戲電競</h2></a>
            <a href="#"><h2>大尺吋</h2></a>
          </dt>
        </dl>
      </li>
      <li><a href="#"><h1>桌上型電腦</h1></a></li>
      <li><a href="#"><h1>平板電腦</h1></a></li>
      <li><a href="#"><h1>DIY 零組件</h1></a></li>
      <li><a href="#"><h1>儲存裝置</h1></a></li>
      <li><a href="#"><h1>週邊耗材</h1></a></li>
      <li><a href="#"><h1>印表機及耗材</h1></a></li>
      <li><a href="#"><h1>遊戲軟體</h1></a></li>
    </div>
  </div>

CSS:

h1,h2,h3 {
 padding:0px;
 margin:0px;
 font-weight:normal; 
}
a:link, a:visited {
 color:#5b5247;
  text-decoration: none;
}
a:hover {
 color:#5b5247;
  text-decoration: none;
}
li {
 list-style: none;
}
/****** home-menu:start ******/
#home-menu {
 width:160px;
 padding-left:10px;
 float:left;
}

#home-menu .menu1 a {
 padding-left:10px;
 list-style: none;
 margin-right:20px;
 color:#333;
 height:28px;
 padding-left:10px;
 padding-top:7px;
 display:block;
 font-size:15px;
 letter-spacing:1px;
}

#home-menu .menu1 h1 {
 font-size:15px;
}

#home-menu .title {
 border-bottom: 1px solid #999;
 height: 25px;
 color: #333;
 padding-left: 10px;
 font-weight: bold;
 margin-right:20px;
}

#home-menu .menu1 {
 padding-top:10px; 
}

#home-menu .menu1 a:hover{
 background: #A8FFFF;
}

#home-menu .line {
 border-bottom: 1px solid #999;
 margin:15px 0;
}

#home-menu .menu1 li {
 position:relative;
}

#home-menu .menu1 dl {
 position: absolute;
 top:-30px;
 left:140px;
 background-color:#FFF;
 border:1px solid #DDD;
 padding:10px 15px 5px 15px;
 min-width:160px;
 min-height:360px;
 box-shadow:2px 2px 5px #999;
 z-index:10;
 /*display:none;*/
}

#home-menu .menu1 dl a{
 margin:3px 0 0 0;
 padding:5px;
 font-size:15px;
 color:#333;
 display:block;
 height:auto;
}

#home-menu .menu1 dl h2{
 font-size:15px;
}

#home-menu .menu1 dl dd:hover{
 background: #A8FFFF;
}
/****** home-menu:end ******/

技巧2：

在把子選單隱藏，用JS讓她動

CSS：

#home-menu .menu1 dl {
 position: absolute;
 top:-30px;
 left:140px;
 background-color:#FFF;
 border:1px solid #DDD;
 padding:10px 15px 5px 15px;
 min-width:160px;
 min-height:360px;
 box-shadow:2px 2px 5px #999;
 z-index:10;
 display:none;
}

JS:

$("#home-menu .menu1 li").hover(function(){
  $(this).find("dl").show();
},function (){
  $(this).find("dl").hide();
});

2014年7月31日星期四

成品連結：演示

展示圖：

技巧一CSS：

下方商品區因為換頁簽不會滑過中間頁簽
所以寫CSS需用到：position:relative; position: absolute; overflow:hidden;
將第一個放到要顯示的框框裡，其餘的放到看不到的地方

#rank-area-1 .rank-detail {
 margin-top:10px;
 position:relative;
 width:703px;
 height:405px;
 overflow:hidden;
}
#rank-area-1 .content{
 position:absolute;
 top:0px;
 left:703px;
 width:703px;
 height:405px;
}

#rank-area-1 .content:first-child{
 left:0px;
}

技巧二JS：

原理是當滑鼠移過，先判斷要往左還是右
找出下一個頁面放到左邊或右邊
然後兩個區塊同時移動

// 判斷往左往右
if ($selectArea.index() > $currArea.index()){
  $selectArea.css('left',$randWidth);
  $currArea.animate({left:"-="+$randWidth},500);
  $selectArea.animate({left:"-="+$randWidth},500);
}else{
  $selectArea.css('left',$randWidth*-1);
  $currArea.animate({left:"+="+$randWidth},500);
  $selectArea.animate({left:"+="+$randWidth},500);
}

技巧三上方移動線條：

原理：當滑鼠移到自上方，取得距離原點距離，用animate做移動

$lineMove = $("#rank-area-1 i[kid="+$selectKid+"]").position().left + 5;
  $lineWidth = $("#rank-area-1 i[kid="+$selectKid+"]").outerWidth();
  $("#rank-area-1 .line").animate({left:$lineMove,width:$lineWidth},500);

2014年7月30日星期三

使用方法

1.先到官網將下載檔案

2.引入檔案

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.lazyload.js"></script>

3.Javascript 部分

$(function (){
 $(".imgload").lazyload();
});

* $(".imgload") 代表所有class=imgload都適用

4.圖片部分

<img class="imgload" data-original="http://7311.tw/style/snp01/image/banner-1.jpg" src="http://7311.tw/style/snp01/image/imgload.jpg" />

* src->可以是載入的圖片, data-original->要載入的圖片
預覽：

2014年7月12日星期六

ErrorLog "|C:/www/apache2.2/bin/rotatelogs.exe C:/www/apache2.2/logs/error_%Y_%m_%d.log 86400 480"

CustomLog "|C:/www/apache2.2/bin/rotatelogs.exe C:/www/apache2.2/logs/access_%Y_%m_%d.log 86400 480" common

2014年7月4日星期五

【CSS】position:fixed 固定

.fixed-top { position:fixed; bottom:auto; top:0px; } // 頭部固定
.fixed-bottom { position:fixed; bottom:0px; top:auto; } // 底部固定
.fixed-left { position:fixed; right:auto; left:0px; } // 左側固定
.fixed-right { position:fixed; right:0px; left:auto; } // 右側固定

【CSS】連續圖片去除空隙

加上display:block;

2014年6月23日星期一

【MySQL】預設儲存引擎: InnoDB 介紹

文章出處：小惡魔 – 電腦技術 – 工作筆記 – AppleBOY

MySQL 是一套眾所皆知的 Database System，今天來簡介 InnoDB 儲存引擎，在 MySQL 5.5.5 之前預設的儲存引擎是 MyISAM，但是為什麼在 5.5 之後官方要將預設儲存引擎換成 InnoDB 呢？大家都知道 InnoDB 用來交易管理非常方便，因為 InnoDB 透過 row lock，相對於 MyISAM 透過 table lock 來的有效率，也避免大量寫入的時候，造成無法讀取資料，這就是 row lock 的優勢，當然用 InnoDB 最主要的原因還有 Full-text search indexes 功能，但是別擔心 MySQL 5.6.4 之後(含此版本) InnoDB 開始支援 Full-text search 功能，另外在使用 MyISAM 時候，如果資料突然出問題，還必須使用 MySQL Binary Log 來恢復資料，如果用 InnoDB 這就沒關係了。大家還在用 MyISAM 嘛？開始升級伺服器，一起體驗 InnoDB 的功能，如果已經上線很久的網站，作者不建議轉換，因為可能會遇到很多雷。目前不用太擔心硬體的架構這方面了，隨便都是 64G 記憶體，四核心主機，大家所在意的還是 MySQL 是否 reliability 跟錯誤恢復，所以 MySQL 在 5.5 以後的版本大膽將 InnoDB 儲存引擎，建立資料表不用再加上 ENGINE=InnoDB，但是大家可以發現 MySQL 安裝好後，內建 mysql 和information_schema 資料庫還是用 InnoDB 儲存引擎，請大家不要亂動這兩個資料庫。底下來看看 InnoDB 的優勢。

InnoDB 優勢

已經使用過 InnoDB 的朋友們，作者相信你可以來嘗試看看 InnoDB，使用的同時會發現很多 InnoDB 優點。 1. 如果伺服器因為硬體或軟體疏失，無論發生任何問題，請重新啟動伺服器，啟動之後並不需要做任何事情，InnoDB 會自動修復 crash 部份，將已經 commit 的資料全部寫回資料表。假如您處理任何資料，但是尚未 commit，系統會自動恢復，所以只要將伺服器重新啟動，就可以恢復到 crash 之前的狀態。 2. InnoDB 將 Table 及 index 資料 cache 在 buffer pool，所以可以快速存取任何資料，因為這些資料都是直接從 Memory 讀取，快取可以存放任和型態的資料，提升處理效能，假如您有實體主機，請設定 60% ~ 80% 實體記憶體給 InnoDB buffer pool。 3. 設計資料庫時，請務必在每個資料表設定適當的 Primary key，當您在執行任何 SQL 語法時，只要牽扯到 Primary key，InnoDB 會自動優化效能，如果將 Primary key 用在 WHERE，ORDER BY，GROUP 等條件子句或 join 操作，讀取速度會是非常快。 4. InnoDB 可以讓您同時讀取或寫入同一個資料表，它將需要改變的資料存在 streamline disk I/O。所以大家不用擔心 Lock Table 的問題了。 5. InnoDB 提供錯誤偵測 (checksum mechanism)，假如有資料已經損壞在 Disk 或 Memory，使用此資料之前，系統將會提醒你。 6. InnoDB 具備處理極大量資料的效能優勢，假如在同一資料表存取同樣的資料，內部透過 Adaptive Hash Index 機制提升讀取速度。以上是作者覺得 InnoDB 改善的地方，大家可以透過 SHOW ENGINES 指令知道伺服器是否支援 InnoDB

2014年6月11日星期三

【CSS】實現強制不換行、自動換行、強制換行

自動換行
div{ word-wrap: break-word; word-break: normal; }

強制不換行
div{ white-space:nowrap; }

強制英文單詞斷行 (產品名稱有帶型號或是英文時)
div{ word-break:break-all; }

訂閱：文章 (Atom)

2014年8月5日 星期二

2014年8月4日 星期一

2014年8月3日 星期日

成品連結：演示

筆記型電腦

ACER 宏碁

ASUS 華碩

HP 惠普

LENOVO 聯想

MSI 微星

文書上網

輕薄時尚

影音娛樂

行動商務

遊戲電競

大尺吋

桌上型電腦

平板電腦

DIY 零組件

儲存裝置

週邊耗材

印表機及耗材

遊戲軟體

2014年7月31日 星期四

成品連結：演示

技巧一CSS：

技巧二JS：

技巧三 上方移動線條：

2014年7月30日 星期三

使用方法

2014年7月12日 星期六

2014年7月4日 星期五

2014年6月23日 星期一

InnoDB 優勢

2014年6月11日 星期三

2014年8月5日星期二

2014年8月4日星期一

2014年8月3日星期日

2014年7月31日星期四

技巧三上方移動線條：

2014年7月30日星期三

2014年7月12日星期六

2014年7月4日星期五

2014年6月23日星期一

2014年6月11日星期三