月份: 2013 年 8 月

[轉貼]Google Chrome F12 開發者工具

轉載 http://fundesigner.net/chrome-dev-tool/

每次當要寫網頁時，不外乎就是時常打開瀏覽器來看顯示是否正常，看看是不是哪邊語法錯誤等等。而如果發現錯誤，我第一個不是回去看程式碼有沒有問題，而是使用Google Chrome開發者工具(Developer Tools)，這個工具相當方便，不但在開發時能夠讓CSS快速完成，並且能夠即刻查看效果，沒錯，我平常都是這樣用的。
什麼是「Google Chrome Developer Tools 開發者工具」?
有些讀者可能沒使用過這個工具，其實這個工具在Google Chrome中就已經內建了，只要用Chrome開啟任一網頁按下「Ctrl+Shift+I」就會開始這個開發者工具。
另法：直接用滑鼠，按右鍵點「檢查元素」。
1
如上圖，會跳出一個Developer Tools開發者工具。這時候我們就可以來好好利用這個工具囉！
另外，也可以讓他固定在瀏覽器的下方，不獨立出一個視窗。只要點開發者工具視窗的左下角，第一個按鈕，就可以了。
3
然後就可以固定住了。
4

選取某區塊、段落

當我們要開始使用之前，當然要先選到要修改的地方，不需要再一直從開發者工具去打開層疊樹找指定區塊。
所以，我們先把滑鼠移到某區塊上面，並點選「檢查元素」：
2
這樣一來開發者工具就會自動固定到該區塊，然後看到下圖的右邊，出現了可以修改的樣式！
5

CSS 調較樣式、新增樣式功能

這個功能是我最常用的一項功能，因為用他來開發 CSS 樣式真的非常快。
承上一節，我們看到右方的樣式部分：
6
從上圖可以看到，怎麼會出現兩個font-size？因為我在開發的時候不小心前面打過了後面又再打一次，所以，前面的15px會自動被後面的16px覆蓋掉，而15px會被劃刪除線，意思就是這句已經被覆蓋掉不會生效。

修改顏色

在開發過程中常常會修改顏色，到最好看的地方。承上圖，我們可以看到在background: 右邊有一個正方形的顏色塊，我們可以點一下。
點一下之後我們就可以選其他顏色，而且這個調色盤的功能相當完整，是用漸層來讓你選顏色，而且還有透明度的調整。
7
另外你還可以發現點了之後，在網頁中的該區塊顏色會立即被更改成你選擇的顏色，方便立即查看效果。
（當然，這邊的修改在重新整理之後就會恢復原本的樣子）

修改值

很簡單，在每一個樣式上按一下就會自動變成編輯狀態，然後就可以修改成你要的樣子。
如下圖，我將留白改為左右各60px。
8
小技巧：將數值反白後，可利用鍵盤的↑↓鍵來調整數值，一次單位為1。

自動完成功能

此外開發者工具也很貼心的有自動完成的功能，只要輸入字頭，就會自動跳出自動完成的字了，這時候只要按下TAB鍵就可以自動完成拼字了。
9

取消樣式

當然，也可以把不需要用到的樣式，或不要用的樣式讓他不生效，很簡單，在屬性的左邊有一個打勾勾的地方，把他勾掉就不會套用該行樣式。
10

新增樣式

新增樣式的方法也很簡單，只要在旁邊的空白處按一下左鍵，就會出現新增屬性的框框了。
11
把自動完成發揮到極致，如下圖，選擇border，按下Enter，再按下TAB輸入值即可。
12
然後就可以整個把他輸入完囉，最後再按一下Enter就可以完成編輯。
13

HTML 新增、刪除、更名元素

Google當然也有想到這一點，所以在開發者工具裡面也可以把元素做一些調整，如刪除、新增和修改。
而要做這一些步驟，只要在開發者工具左方的元素上按下右鍵即可。
14
這邊可以做很多項調整，像是可以刪除該元素，如上圖。
如果你想要改class屬性的值，就在那上面快點兩下，就會變成編輯的狀態，就能修改。
15

偵錯功能

當然，開發者工具一定要有偵錯功能才稱的上是開發者工具嘛，要看目前的網頁有沒有錯誤，就點一下Console標籤即可。
16
這時候就可以知道哪邊有問題、想辦法要如何解決了。像是第二行的錯誤很明顯就是找不到檔案，這時候就可以去想是不是檔案名稱打錯了之類的解決方式。

務必記得

請注意，在這個開發者工具內做的所有動作都是暫時的，所以當你使用開發者工具修改了某元素之後，請務必也將原始檔案做更改的動作，才會生效。否則重新整理之後還是會恢復原來的樣子。
使用開發者工具的好處就是可以馬上添加某樣式下去看效果，修改樣式。Yuxin都是使用這個將覺得不好看的樣式先用開發者工具做修改，然後再將修改後的樣式程式碼複製，再貼回原始檔。
就這樣，真的能讓網頁設計開發的速度變得更快，時間是很寶貴的，能省時間，當然就要盡量去省。如果你也是Chrome的愛好者並且常常開發網頁，您不妨也用用看這個開發者工具的功能吧！

JS修改css樣式切換 js css 收闔效果


#html
＜a href=”#tr1″ class=”Tableslide”＞
        ＜table border=”0″ width=”100%”＞
            ＜tr＞
                ＜td＞
                    ＜samp＞連結＜/samp＞
                ＜/td＞
                ＜td ID=”img_title_ar” Class=”title_ar1″ ＞
               
                ＜/td＞
            ＜/tr＞
        ＜/table＞
＜/a＞

＜div id=”tr2″＞
…
＜/div＞

#js
    $(“.Tableslide”).click(function() {
        var _this = $(this).attr(“href”);
        if ($(_this).css(“display”) == “none”) {
            $(_this).slideDown();
            //$(this).html(“-“);
            document.getElementById(“img_title_ar”).className = “title_ar1”;
        } else {
            $(_this).slideUp();
            //$(this).html(“+”);
            document.getElementById(“img_title_ar”).className = “title_ar2”;
        }
        $(“#msg”).html($(_this).css(“display”));
        return false;
    });

#css
.title_ar1
{
    background: url(‘../images/title_arup.gif’);
}
.title_ar2
{
    background: url(‘../images/title_ardw.gif’);
}

[轉貼] PHP資料加密

http://www.hkcode.com/programming/242

這裡是將用戶密碼用 MD5() 加密後加插入資料庫:
PLAIN TEXT

CODE:

  1. <?php
  2. $db_conn = mysql_connect(“host”, “db_user”, “db_pass”);
  3. mysql_select_db(“db_name”, $db_conn);
  5. // 插入資料表的 $password 用了 md5 加密
  6. mysql_query(“insert into users values
  7.                         (‘$username’, ‘”.md5($password).“‘)”);
  8. ?>
檢查用戶名稱及密碼:
PLAIN TEXT

CODE:

  1. <?php
  2. $db_conn = mysql_connect(“host”, “db_user”, “db_pass”);
  3. mysql_select_db(“db_name”, $db_conn);
  5. $sql = mysql_query(“select * from users where
  6.                         `username`=’$username’ and
  7.                         `password`='”.md5($password).“‘”);
  9. if (mysql_num_rows($sql) > 0) {
  10.     // 用戶名稱及密碼正確
  11. } else {
  12.     // 用戶名稱及密碼錯誤
  13.     exit();
  14. }
  15. ?>
用以上方法寫出來的登入系統，只用用戶是知道自己的密碼，系統管理員最多只能夠修改密碼，而不能看到源始密碼是什麼。

opencart step_3 安裝出錯

opencart step_3 安裝出錯
問題在於 不要使用 WAMP 2.6.0 安裝包
原因不明~
(事後猜測 可能是我腦殘 Win7裝這包…appserv-win32-2.6.0) 
解說:win7 是 win64位元的 使用32位元的去裝 "可能" 會有問題…

使用 AppServ_2.5.10 就可以安裝的很開心 Orz…

另外win7可能發生的問題 [轉貼]Win7 MySQL的phpmyadmin無法開啟

進階閱讀
OpenCart後台簡易防駭防入侵

[轉貼]Win7 MySQL的phpmyadmin無法開啟

[轉貼]Win7 MySQL的phpmyadmin無法開啟

http://cabuchi.pixnet.net/blog/trackback/c366cbf8e4/37900431

http://cabuchi.pixnet.net/blog/post/37900431-appserv%EF%BD%9Cphpmyadmin%E7%84%A1%E6%B3%95%E7%99%BB%E5%85%A5%EF%BC%8C%E9%96%8B%E5%95%9F%E5%BE%8C%E4%B8%80%E7%89%87%E7%A9%BA%E7%99%BD

安裝好AppServ重新開機後
要開啟localhost/phpmyadmin無法進入
一直loading一片空白
是因為Windows7的hosts預設是空的
解法：
修改C:WindowsSystem32driversetc　的host
把127.0.0.1的#拿掉
hosts 
若不是使用管理者帳號修改此檔案 會無法修改
可使使用複製修改後，再覆蓋的方式，就可以解瞜！