[轉貼]PHP: 完美實現ASP.NET MasterPage的方法

[轉貼]PHP: 完美實現ASP.NET MasterPage的方法

ASP.NET中的MasterPage實在是太好用了，而在PHP裏面如果只是用傳統的方法，那麼只能夠把主要版面分段，然後個別使用include()的方式將主要版面湊出來，總覺得說不出來的彆扭。而且如果切割不好，那麼主要版面一旦改版，那麼內容頁就會改到死。使用傳統方法的程式碼大概像這樣:
<body>
<div><?php include('menu.php');?></div>
<div><?php include($page_content);?></div>
<div><?php include('footer.php');?></div>
</body>
如果沒有想過這個問題，也不會去找網路資源，原來早就有人找到方法了。主板頁面就是很一般的頁面，主要用了兩個變數$pagetitle和$pagemaincontent，看名字就知道是頁面標題和主要內容。
<?php
define('app_root',$_SERVER['DOCUMENT_ROOT']);
require_once(app_root."/shared/opendb.inc");
?>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title><?php echo $pagetitle ?></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="./style/globalreset.css" rel="stylesheet" media="screen" type="text/css" />
    <link href="./style/layout.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
    <div id="page">
        <div id="header">
            <div id="title">
                <h1><a href="./index.php"><img src='./images/logo_full.jpg' height='50' /></a></h1>
            </div>
            <div id="cart">
<?php //require_once(app_root."/shared/login.inc"); ?>        
            </div>
        </div>
        <div id="wrapper">
            <div id="sidebar">
                <div id="menubox">
<?php //require_once(app_root."/shared/navigation.inc"); ?>        
                </div>
            </div>
            <div id="mainbox">
                <div id="mainarea">
<?php echo $pagemaincontent; ?>        
                </div>
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>
而內容頁面只要定義$pagetitle就好了，完整頁面的輸出就請看注解的部份。雖然這樣子做可能會小小的造成伺服器的負擔，但是跟維護比較起來，這一點點的負擔是絕對值得的。
<?php
define('app_root',$_SERVER['DOCUMENT_ROOT']);
require_once(app_root."/shared/opendb.inc");
$pagetitle = "頁面標題";
//將整個頁面輸出放到緩衝區
ob_start();
?>
頁面內容，隨便你輸出
<?php
//將緩衝區的內容放到變數裏面，然後清除緩衝區
$pagemaincontent = ob_get_contents();
ob_end_clean();
//套用主板頁面
include(app_root."/shared/master.php");
?>

php抓取網頁特定div區塊及圖片

[部分轉貼]php抓取網頁特定div區塊及圖片

//舉一反三
<?php  
//取得指定位址的內容，並儲存至text  
$text=file_get_contents(‘http://www.moea.gov.tw/Mns/populace/activephoto/ActivePhoto.aspx?menu_id=3874&ap_id=1666’);   

//取出div標籤且id為PostContent的內容，並儲存至陣列match  
preg_match(‘/<div[^>]*style=”margin-left: 37px”[^>]*>(.*?) </div>/si’,$text,$match);  
  
//印出match  
//print_r($match);
$length = count($match);
while ($i <= $length) {
echo($match[$i]);
$i++;
}
?>
//
昨天有個朋友在問我說，php怎麼抓取網頁某個div區塊的內容。像funp推推王那樣每次推文都會顯示文章內的圖片，提供縮圖撰擇，又是怎麼做到的？其實這語法出乎意料的簡短…
php抓取網頁特定div區塊及圖片
1. 取得指定網頁內的所有圖片：測試
  1. <?php  
  2. //取得指定位址的內容，並儲存至text  
  3. $text=file_get_contents(‘http://andy.diimii.com/’);   
  4.   
  5. //取得所有img標籤，並儲存至二維陣列match  
  6. preg_match_all(‘#<img[^>]*>#i’, $text, $match);  
  7.   
  8. //印出match  
  9. print_r($match);  
  10. ?>  
2. 取得指定網頁內的第一張圖片：測試
  1. <?php  
  2. //取得指定位址的內容，並儲存至text  
  3. $text=file_get_contents(‘http://andy.diimii.com/’);  
  4.   
  5. //取得第一個img標籤，並儲存至陣列match（regex語法與上述同義）  
  6. preg_match(‘/<img[^>]*>/Ui’, $text, $match);  
  7.   
  8. //印出match  
  9. print_r($match);  
  10. ?>  
3. 取得指定網頁內的特定div區塊（藉由id判斷）：測試
  1. <?php  
  2. //取得指定位址的內容，並儲存至text  
  3. $text=file_get_contents(‘http://andy.diimii.com/2009/01/seo%e5%8c%96%e7%9a%84%e9%97%9c%e9%8d%b5%e5%ad%97%e5%bb%a3%e5%91%8a%e9%80%a3%e7%b5%90/’);   
  4.   
  5. //去除換行及空白字元（序列化內容才需使用）  
  6. //$text=str_replace(array(“r”,”n”,”t”,”s”), ”, $text);     
  7.   
  8. //取出div標籤且id為PostContent的內容，並儲存至陣列match  
  9. preg_match(‘/<div[^>]*id=”PostContent”[^>]*>(.*?) </div>/si’,$text,$match);  
  10.   
  11. //印出match[0]  
  12. print($match[0]);  
  13. ?>  
4. 上述2及3的結合：測試
  1. <?php  
  2. //取得指定位址的內容，並儲存至text  
  3. $text=file_get_contents(‘http://andy.diimii.com/2009/01/seo%e5%8c%96%e7%9a%84%e9%97%9c%e9%8d%b5%e5%ad%97%e5%bb%a3%e5%91%8a%e9%80%a3%e7%b5%90/’);      
  4.   
  5. //取出div標籤且id為PostContent的內容，並儲存至陣列match  
  6. preg_match(‘/<div[^>]*id=”PostContent”[^>]*>(.*?) </div>/si’,$text,$match);     
  7.   
  8. //取得第一個img標籤，並儲存至陣列match2  
  9. preg_match(‘/<img[^>]*>/Ui’, $match[0], $match2);   
  10.   
  11. //印出match2[0]  
  12. print_r($match2[0]);  
  13. ?>  
後記：用正規表達式Regex來做真的很方便，但老實說我規則常會忘掉，記錄一下幾篇文章好了（Regular Expression Details| PCRE Functions | Introduction to PHP Regex | 天殺的正規表示式…）

[轉貼]CSS圖片透明

http://www.dotblogs.com.tw/rab/archive/2011/01/21/css-cross-browser-support-alpha-display.aspx

要如何設定網頁中物件的透明度，又讓眾家瀏覽器都能閱讀，可利用下列的設定方式
  
.div_alpha{
 filter:alpha(Opacity=50, Style=0);/*for ie*/ 
 -moz-opacity:0.5;/* Moz + FF */ 
 opacity: 0.5;/* CSS3的標準語法，FOR支援CSS3的瀏覽器（FF 1.5）*/
}
filter:alpha(opacity)是屬於IE的私有屬性，-moz-opacity是屬於Mozilla跟FireFox的私有屬性，opacity則是標準的CSS規則，部分Moz Family也支援CSS3。後面的數值以百分比為單位，IE的Filter數值為0~100，-moz與opacity兩種數值為0~1之間，三種都設定可以確保透明的效果在以上的瀏覽器裡正確執行。
至於Mac上的Opera並不支援透明度屬性的設定，可是他支援png圖檔，所以可以利用png半透明圖檔設定為背景，也可以達到半透明背景的效果。
設定透明度會讓物件本身與子元素都一起半透明，所以文字也會一起變半透明，如果是要作遮罩效果，記得要將物件拆開設定，才不會讓文字也一併被透明化了喔!!
範例網址 / css_alpha_setting.htm

DOS樹狀清單

DOS樹狀清單

先執行
cmd /u
切到該資料夾
執行
檔名.bat

//code============================

@echo on
rem 註解 把 cmd/u註解(rem) 再輸入test.bat執行

cmd /u

pause
DIR /S /A:-D /B /O:N >> list.txt
list.txt

//================================

http://pbice.blogspot.tw/2010/11/dirunicode.html

用Dir指令列出Unicode檔名清單

我原本就知道MS-DOS模式底下的dir指令可以將結果輸出成文字檔，這樣可以很方便的將所有檔案的檔名做成清單。不過，遇到Unicode檔名該如何處理？看了這篇文章〈利用 dir 將檔案總管中的目錄裏的檔名轉成文字檔〉，覺得很實用，摘記如下：

  1. 先新增一個文字檔（例如list.txt），將編碼改成Unicode。
  2. 輸入cmd /u，以Unicode模式執行。
  3. 執行dir指令，dir >> list.txt。如果只想列出檔名、不要日期、路徑等資訊，可以加參數 b。
  4. 注意輸出時一定要有2個輸出符號>>，否則會亂碼。

[轉貼]HTTrack 3.47.27 免安裝中文版 – 網站離線閱讀下載軟體

http://www.azofreeware.com/2011/04/httrack-3441.html

HTTrack
網站下載工具 – HTTrack，想要把整個網站的內容下載下來嗎？可以試試這個自由軟體，它具有續傳下載功能，也可以用於更新現存的鏡射網站。（阿榮）（葒荳推薦）（下載）



HTTrack is a free (GPL, libre/free software) and easy-to-use offline browser utility.

It allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site’s relative link-structure. Simply open a page of the “mirrored” website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads. HTTrack is fully configurable, and has an integrated help system.

關鍵字：HTTrack Website Copier, winhttrack

[官方載點]

※中文切換說明：開機時選擇「Chinese-BIG5」，或者，「Preferences」→「Language preference…」→選擇「Chinese-BIG5」。

下載連結→ [按此下載免安裝中文版]

免安裝版 [3.47.27] [3.47.26] [3.47.24] [3.47.23] [3.47.22] [3.47.21] [3.47.20] [3.47.19] [3.47.18] [3.47.17] [3.47.16] [3.47.14] [3.47.11] [3.47.7] [3.47.6] [3.47.2] [3.46.1] 

[轉貼]「密碼查看器 1.5」 星號密碼顯示工具

http://file.minwt.com/2013/02/15.html


        大部分的軟體，為了防止密碼外洩，因此當密碼欄的部分，都會採用星號來作保護，由於軟體本身會幫忙記憶，但人的記憶力總是有限的，一段時間不用時，早也忘了當初所設定的密碼是什麼，但這時就可透過「密碼查看器」，將這些星號的密碼，現出原形來，如此一來就不用擔心，當初所設定的密碼是什麼了，也便於日後密碼的管理。 

AutoPager Chrome

autopager-00 (by 異塵行者)
當我們在Google搜尋時，必須透過點擊下一頁才能瀏覽更多結果；當我們來到一些線上新聞媒體網站時，很多長篇評論也會讓我們花上許多時間點擊換頁；又或者當我們來到購物網站時，不斷翻頁查找商品的經驗想必很繁瑣；還有像是在論壇瀏覽文章時，如果能一氣呵成把好幾頁文章直接在同一頁看完，除了爽快之外也能節省不少時間。

下載點：https://chrome.google.com/webstore/detail/autopager-chrome/mmgagnmbebdebebbcleklifnobamjonh?hl=zh-TW

[轉貼][網路工具]FreeProxy 讓一群電腦輕鬆共用 Internet 連線

http://toget.pchome.com.tw/category/network/12322.html

‧軟體名稱：FreeProxy
‧軟體分類：架站軟體
‧軟體性質：Freeware
‧更新日期：2004-12-29
‧最近版本：3.81
‧作業系統：Windows XP/2000/Me/98/95/NT
‧語言界面：英文
‧購買金額：-
‧試用限制：-
‧原創公司：Hand-Crafted Software
‧評　　等：

‧軟體下載：

【軟體簡介】
當你和一群同事或朋友到外地想要使用自己的電腦，但牆上只有一個網路插孔？或是你想和朋友共用同一個無線網路帳號，以節省上網費用？FreeProxy 可以將一台普通的 Windows 系統變成一個功能強大，且具備網路資料快取機能的代理伺服器，讓你的電腦能帶著其他人一起遨遊網路。
【詳細說明】
編輯／黃力堯（2004-12-29）
當有很多人都想使用自己的筆記電腦連上 Internet，但當時只能找到一個網路接孔的時候，想必一定是很尷尬的狀況吧．究竟該讓誰先連上網路呢？還是要大家一起共用那個網路接孔？這些狀況現在你都不需要再擔心了，因為如果你有了 FreeProxy 代理伺服器軟體，下次在碰到這種一堆人搶一個網路孔的狀況時，你就可以大聲的說：先讓我連上網路，因為我可以將連線分享給你們用！

安裝了 FreeProxy 軟體之後，你的電腦就馬上成為一台連線代理伺服器．FreeProxy 共支援下列幾種通訊協定的代理作業：

．HTTP (網頁傳輸通訊協定)

．POP (郵件收取通訊協定)

．SMTP (郵件寄送通訊協定)

．Telnet (終端機通訊協定)

．FTP (檔案傳輸通訊協定)

．SOCKS (SOCKS 代理伺服器協定)

．NNTP (新聞伺服器協定)

這些通訊協定已經涵蓋了大部分人一般會使用的通訊協定，你還可以指定各個通訊協定要在哪個通訊埠號接受連線，或是只在特定的網路卡上接受連線。設定完成後你就可以開始將你的 Internet 連線分享給其他人使用了，例如牆上只有一個網路插孔，而你擁有具備無線網路的筆記電腦，你就可以使用點對點無線連線方式將網路連線分享給其他具備無線網路的電腦使用。

此外 FreeProxy 所帶給你的還不僅只有陽春的代理功能喔，它還內建了多重的使用者管制功能，時間限制功能等，使得 FreeProxy 也很適合使用在須對使用者進行管制的企業使用。而且當主要的網際網路連線斷線時，FreeProxy 還內建了撥號連線功能。只要你的電腦具備數據機，你就可以在緊急的時候使用數據機作緊急備援用，不讓重要的網路連線中斷。

【下載資訊】
‧檔案大小：-
‧下載連結：toget、handcraftedsoftware.cyberemail.org、handcraftedsoftware.cyberemail.org

[轉貼]VM改大小

轉貼:http://hacker003.blog.sohu.com/99745253.html

很多人在安装虚拟机linux的时候，为了节省硬盘空间，把硬盘容量设置得较小，可是后来发现硬盘容量不够用了。在VMware中又不能直接修改虚拟机的硬盘容量大小，或者重建虚拟机系统，非常麻烦。
    其实在VMware6.0安装目录下有一个命令行工具——vmware-vdiskmanager.exe 程序，可用来修改虚拟机硬盘的大小。方法如下：
    1、关闭虚拟机电源；启动Windows下的命令提示符界面；
    2、通过 cd 命令进入VMware的安装目录（如：D:VMwareWS-v6.0）,输入“vmware-vdiskmanager”后按回车键，可显示关于该命令的说明。
    3、执行如下命令：
    vmware-vdiskmanager -x l2Gb D:UbuntuDeskUbuntu.vmdk
    参数 -x 表示要扩展虚拟机硬盘空间；紧随其后的数字指要扩展的大小（如12Gb，表示磁盘总量，包含原来的磁盘容量）；最后是要操作的虚拟机Linux的具体文件。
    【注意】若路径名中有空格，必须以双引号括起来。
    执行完毕，退出命令提示符窗口，重启VMware，这时虚拟机硬盘空间已变成12GB了。
    如果原来的虚拟机硬盘已被分成了多个分区，那么在通过 vmware-vdiskmanager.exe扩大了硬盘空间后，还需要在虚拟机系统中安装第三方分区工具来调整分区。如PQ Magic硬盘分区大师等，这些软件的使用在这里就不介绍了！

[轉貼]浮動IP救星 No-IP

轉貼:http://changyang319.pixnet.net/blog/trackback/a78eeb29c2/32476829

DDNS設定教學，使用No-IP服務，及利用DUC程式動態來對應主機與IP位址

　　無論在家裡或是公司裡的中華電信ADSL(實際上是VDSL，為了一般口語，才稱為ADSL)，都已經將原本8個動態IP改成1個固定IP+7個動態IP了(中華電信更改固定IP網址)，而這個固定IP也都已經用來架設公司或是個人網站了，所以剩下來的動態IP，就不方便用來比較正式的網站了。

　　但是對於一些特別的需求，且不在意網址，而硬是想要利用這些動態IP時，也不是不可行，除了利用之前教學過的「DDNS設定教學，使用D-Link無線IP分享器」，使用IP分享器來同步這些動態IP之外，若你沒有分享器的話，另外一個方法，就是透過自動更新IP的客戶端軟體。
　　提供DDNS服務的業者有很多，最常見的大概就屬「DynDNS」和「No-IP」這兩家，蠻多的分享器都會支援DynDNS，但卻不一定支援「No-IP」，所以，我自己的習慣，如果有要透過「分享器」來做到DDNS功能時，我會選擇「DynDNS」；而如果是要直接使用PPPoE撥號連線上網的話，我就會使用「No-IP」，因為No-IP有提供DUC軟體，可以讓我們安裝在電腦上，藉此通知No-IP我們電腦目前所使用的IP位址。
　　而再開始我們的教學之前，你必需要先至「No-IP」網站，去申請No-IP的帳號。
ddns-1.jpg
　　Step 1. 申請完帳號後，請登入您的No-ip帳號，接著點擊左上角的「Hosts/Redirects」，接著再從該功能版面中點擊「Manage Hosts」，最後再點擊「Add A Host」。No-IP可以免費讓你新增「5部」主機，從下圖的範例中，可以看到我原本就已經有2部了。
ddns-2.jpg
　　Step 2. 在「Add a host」面頁中，乍看之下，好像有很多專業的欄位需要你填寫，但其實最基本只要填寫兩個填位而已，一個是你想要的主機名稱(名稱不可以和別人相同)，另一個則是從下拉式選單中，選擇一個「網域名稱」。
ddns-3.jpg
　　但在選擇「網域名稱」時，也不是每一個都可以選，在選擇時，你應該會看到這些網域有一些分類，像是「No-IP Enhanced Domains」、「No-IP Plus Domains」、「No-IP Free Domains」，但實際上你只能選擇「No-IP Free Domains」這部份的網域名稱，其餘的名稱都是付費的網域名稱。
ddns-4.jpg
　　Step 3. 接著你剛才加入的Host，就可以在清單中看到了。
ddns-5.jpg
　　但還沒有結束喔，到這邊你只做了一半的設定工作，一般來說，初次這樣設定時，這個設定的HOST網址，是有機會可以直接運作的，只要你在設定時，是用該部電腦在設定，這樣就會在IP的位址填入正確的IP，或者你也可以直接就把目前正確的IP填進去，初次的設定就會運作的很好。
　　但要是你重新撥號，更換了電腦的IP怎麼辦呢？
　　當然，你也可以手動的上No-IP網站來把該Host的IP位址做修正，但一般來說，沒有人會手動做這些事，又不是閒閒沒事做，動態IP不適合架站最主要的原因，就是這個原因，我們要一直的修正「網域名稱」與「主機IP」的對應。
　　所以，這時最好就需要有一支程式來做這件事，而No-IP就寫出這個程式「DUC(Dynamic Update Client)」來幫你完成這煩人的對應工作，這部份在下一段來做解說。

使用No-IP DUC來做主機及網域的對應

　　要使用DUC(Dynamic Update Client)，當然是先要去No-IP的網站來下載程式，來更新IP，下載的網址如下：
　　Step 1. 請點擊〔Download Now〕，並且安裝好DUC程式。
ddns-6.jpg
　　Step 2. 輸入你的No-IP的帳號及密碼，接著點擊〔OK〕，如下圖：
duc-1.jpg
　　Step 3. 接下來要設定在這部主機上，你想要設定對應哪部主機，這時可以點擊〔Edit Hosts〕。
duc-2.jpg
　　Step 4. 接下來會列出你已經設定好的Host清單，只要從清單中選擇你想要對應的Host，最後再點擊〔Save〕即可。這設定的步驟，除非你還有要修改，要不然的話，你只需要做一次就可以了，之後只要執行程式就會自動對應你想要的Host。
duc-3.jpg
　　看到這三個綠色的「打勾」，即代表host已經對應好IP了。
duc-4.jpg
　　

轉貼:http://changyang319.pixnet.net/blog/trackback/a78eeb29c2/32476829

無名 搬家 Blogger

2013/9/2 ~ 2013/12/26 無名末日倒數
該逃去哪呢 眾說紛紜
本人決定逃到 Blogger

這時候就問題來了

文章? 回文? 照片? 影片? 音樂?

搬個家還怪痛苦的.

再來無名一連串的政策失誤 真的也讓我見識到了
應該說 燒到我一次 也是最後一次了

廢話不多說 進入正文

搬家寶典 (無名 to Blogger)

1.付費(含測試5篇文章) 1篇2元 圖片不失連(無名相簿的圖) 感覺不錯~
http://tw.piliapp.com/move/?ref=top

2.手動加工 (免費-災難連連~but堪用)

2.1.
轉-重灌狂人
無名要倒了？如何幫「無名小站」部落格搬家到 Google 的 Blogger 去？
http://briian.com/?p=10534

2.2.
轉-阿榮福利味
iWretch 1.7.5.0 免安裝中文版 – 無名相簿下載程式 無名關站相簿備份專用
http://www.azofreeware.com/2012/06/iwretch-1730.html
成果:

2.3.
可是影片,音樂怎麼辦咧…?
其實還是有辦法…
(雖然本人完全不推薦無名官方的做法 因為鎖定blog後台之後 就是悲劇的開始)

依照官方提供的新式備份
[請務必先留下舊的備份 因為不先拿出來之後就沒辦法救了~!]

{帳號}-dataalbumdetail.html
{帳號}-dataaudiodetail.html
{帳號}-datavideodetail.html

打開 ?.txt後 可以看到一整串連結

這時候 就可以用 JDownload 迅雷 等等的續傳軟體下載了

或者參考此方式:
轉-免費社群資源
從無名小站批次合併、下載、打包實體照片教學，可一次下載全部相簿照片
http://www.freegroup.org/2013/09/wretch-album-combine-download-all-photos/#comment-139167

[轉貼]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’);
}