【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。

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>

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


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


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

沒有留言: