[轉貼]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);
  4. // 插入資料表的 $password 用了 md5 加密
  5. mysql_query(“insert into users values
  6.                         (‘$username’, ‘”.md5($password).“‘)”);
  7. ?>
檢查用戶名稱及密碼:
PLAIN TEXT

CODE:

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

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 
若不是使用管理者帳號修改此檔案 會無法修改
可使使用複製修改後,再覆蓋的方式,就可以解瞜!