用table標籤做一個簡單的登入介面,同時倒入外部css
工具/原料
dreamweaver 8.0
方法/步驟
新建一個html檔案,命名為login.html,儲存在資料夾page中;
步驟:開啟dreamweaver,單擊“檔案”,選擇“新建-》HTML”, 單擊“建立”,即可;如圖所示:
在login.html中插入一個div標籤,在div標籤中新增一個table標籤,建立一個簡單的登入介面,如圖所示;
給table標籤新增樣式,table的樣式名為class=“ltab”,如圖:
建立一個css樣式,命名為tab.css,儲存資料夾page中,作為login.html的外部樣式;
步驟:單擊“檔案”,選擇“新建-》基本頁-》CSS”, 單擊“建立”,即可;
如圖:
在login.html中匯入外部樣式的方法:
1、直接在標籤中新增:
2、開啟login.html,將滑鼠放在
單擊“附加樣式表”,彈出“連結外部樣式”視窗,如圖:
單擊“瀏覽”,按儲存css的路徑,找到檔案tab.css,修改對應的“URL”名稱,如圖所示:
單擊“確定”,即可倒入css檔案,效果如圖:
開啟tab.css檔案,給表格新增樣式,單擊“儲存”,即可在login.html中看到效果,如圖所示,很方便;