Visual Studio 2012 - Page Inspector 功能(2)

HTML5 應用程式開發-從零開始》系列

第一篇我們看到了如何開啟 Page Inspector 功能,現在持續討論其中的細節,來看以下畫面:


畫面左邊包含三個頁籤,在預設的情形下,顯示的是 HTML 頁籤內容,也就是網頁的標籤原始碼,按一下「檔案」標籤,則會顯示目前網頁在整個專案中的相對位置與路徑資訊。


現在於網頁中進一步配置以下的內容:

<div style="width: 100px; height: 65px; background-color: black;">
    <ul style="color:#fff">
        <li>aaa</li>
        <li>bbb</li>
    </ul>
</div>

此時整個編輯區域呈現以下的外觀:


檢視畫面中呈現即時內容,下方則是新配置的標籤內容,當你滑鼠游標移至任意標籤時,上面的檢視畫面將即時呈現此標籤的相關內容,如下圖:


上圖是游標移至標籤所呈現的情形,上方的檢視畫面即時標示游標所在位置的標籤。

沒有留言: